vue-cli脚手架的搭建及创建项目

vue-cli脚手架的搭建及创建项目

1.安装node.js环境

官网下载：https://nodejs.org/en/download/
一直默认就行，安装完成后需在cmd中验证是否安装成功：

node -v
npm -v

出现版本号则说明安装成功
注意： node的版本尽量高一些，因为vue运行需要基于npm一定的版本（最好是3.x.x以上），版本低了有可能会出错，而npm是随node的安装自动安装的，直接安装最新的node，npm的版本号也会变高的，不用再做更多的操作

2.使用npm或cnpm（淘宝镜像）全局安装 webpack

使用命令工具输入：

npm 安装： npm install webpack webpack-cli -g
cnpm 安装： npm install webpack webpack-cli -g

安装完成后，检验是否安装成功：

webpack -v

如出现版本号则说明安装成功

注意: 由于npm是国外的，可能因为网速的原因会安装失败，这是则可使用cnpm安装

3.全局安装vue-cli

在命令行输入：

npm 安装： npm install -g vue-cli
cnpm 安装： cnpm install -g vue-cli

安装完成后验证：

vue -V

如果出现版本号则安装成功
注意: 这里的"V"是大写

如上述操作都完成，就可进入下一步，创建项目

4.创建项目

vue init webpack demo（项目名，小写）

Project name（项目名：默认“demo”）
Project description （项目介绍：默认 A Vue.js project）
Author （作者名）
Vue build （Use arrow keys）
Runtime + Compiler：recommended for most users（运行加编译）
Runtime—only：about 6KB lighter min+gzip，but templaters（or any Vue-spcific HTML）are ONLY allowed in .Vue files - render functions are required elsewhere（仅运行）
Install vue-router ? （Y/n）（安装Vue路由？）
Use ESLint to lint your code ? （Y/n）（使用ESlint对代码进行校验？）
Set up unit tests （Y/n）（使用单元测试？）
Setup e2e tests with Nightwatch？ （Y/n）（使用e2e测试？）
Should we run npm install fr you after the project has been created?（recommended）（Use arrow keys）
Yes，use Npm
Yes，use Yarn
No，I whill handle that myself
如果npm可以正常使用，选第一项
如果使用淘宝镜像选最后一个
根据提示
cd demo
cnpm install （or if using yarn ：yarn）
npm run dev