一、 安装 node.js

安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。

二、全局安装webpack

npm install webpack -g

安装完成后使用webpack -v,如果出现相应的版本号,则说明安装成功。

三、全局安装 vue-cli

npm install -g vue-cli

安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。

如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本

四、使用vue-cli来构建项目

  1、在硬盘中找一个放项目的文件夹

  2、在文件夹下打开命令盘,输入命令

  Vue-Project是我们自己设置的项目名称,项目名称不能用中文

vue init webpack Vue-Project

  3、进入项目工程目录

  4、安装项目所需依赖  npm install

  //  5、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource (后续版本会提示安装vue-router,vue-resource不用安装)

npm install vue-router vue-resource --save

创建完成的项目目录,如下图

各个目录的作用

最后一步启动项目

npm run dev

启动成功,打开浏览器8080窗口,页面如图所示

参考网址  : https://www.jianshu.com/p/1626b8643676

 
 

vue-cli 启动过项目步骤的更多相关文章

  1. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  2. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  3. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  4. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

  5. 详解 IntelliJ IDEA 配置和启动maven 项目 步骤

    1.本地安装maven 1.1 安装 https://www.cnblogs.com/wkrbky/p/6350334.html?utm_source=itdadao&utm_medium=r ...

  6. Vue Cli 3.x项目如何部署到IIS子站点下

    Vue Router在IIS下的部署参考:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB% ...

  7. VUE CLI 3.0 项目引入 ElementUI

    ElementUI 官网: http://element-cn.eleme.io/#/zh-CN/component/installation 一.通过npm安装依赖包 1. 进入到项目目录,执行指令 ...

  8. vue cli创建的项目 当你后期使用了ES6语法,如何解决浏览器兼容问题

    最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...

  9. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

随机推荐

  1. redhad系统配置daocloud加速器

    一.注册daocloud账户网址:http://www.daocloud.io/ 配置加速器需要在daocloud上注册一个用户.注册之后,登陆进去可以看到[加速器]选项. 点击加速器选项之后,就可以 ...

  2. [原创]COCOS2DX 3.8 增加protobuf为external库

    此处为记录防止忘记,最近使用COCOS练习一些新的库,所以需要把PROTOBUF编译进去,看上去很麻烦,这里记录一下,以防忘记. 首先下载protobuf 2.5.0版本,下载地址请自行百度. 准备工 ...

  3. python 数据清洗

    前言 1. 删除重复 2. 异常值监测 3. 替换 4. 数据映射 5. 数值变量类型化 6. 创建哑变量 统计师的Python日记[第7天:数据清洗(1)] 前言 根据我的Python学习计划: N ...

  4. maven环境快速搭建(转)

    出处:http://www.cnblogs.com/fnng/archive/2011/12/02/2272610.html 最近,开发中要用到maven,所以对maven进行了简单的学习.因为有个m ...

  5. 字节序(Endian),大端(Big-Endian),小端(Little-Endian)

    http://www.cppblog.com/tx7do/archive/2009/01/06/71276.html 在各种计算机体系结构中,对于字节.字等的存储机制有所不同,因而引发了计算机通信领域 ...

  6. 使用 JAVA 中的动态代理实现数据库连接池

    数据库连接池在编写应用服务是经常需要用到的模块,太过频繁的连接数据库对服务性能来讲是一个瓶颈,使用缓冲池技术可以来消除这个瓶颈.我们可以在互联网上找到很多关于数据库连接池的源程序,但是都发现这样一个共 ...

  7. VC中CDC与HDC的区别以及二者之间的转换

    CDC是MFC的DC的一个类 HDC是DC的句柄,API中的一个类似指针的数据类型. MFC类的前缀都是C开头的 H开头的大多数是句柄 这是为了助记,是编程读\写代码的好的习惯. CDC中所有MFC的 ...

  8. delphi Table切换控件顺序问题

    delphi Table切换控件顺序问题 Tagorder的值就是确定Table键切换顺序的 以上做法只能解决同一类型的多个控件(如Edit1,edit2....)显示顺序问题 假如有不同类型的控件如 ...

  9. mysql按照天或小时group分组统计

    select DATE_FORMAT( deteline, "%Y-%m-%d %H" ) , COUNT( * ) FROM test GROUP BY DATE_FORMAT( ...

  10. ASP.NET程序从IIS6移植到IIS7时出现500.22错误(转)

    最可能的原因: •    此应用程序在 system.web/httpModules 节中定义配置. 可尝试的操作: •    将配置迁移到 system.webServer/modules 节.也可 ...