vue-cli安装以及搭建vue项目详细步骤

第一步，检查node.js是否安装，通过命令提示符，node -v   npm -v查看，如果没有请先安装node.js,如下图.

第二步，把npm换成cnpm，命令工具输入npm install -g cnpm --registry=https://registry.npm.taobao.org然后cnpm -v查看版本，如下图

第三步，全局安装webpack，使用命令工具输入cnpm install webpack -g。使用webpack -v查看版本如果webpack版本4以上，需要安装webpack-cli 依赖 使用命令工具输入cnpm install webpack webpack-cli -g 如下图

第四步，安装vue-cli使用命令工具输入cnpm install vue-cli -g使用vue -V（这个Ｖ大写），如下图

第五步，上面步骤安装完后，就可以利用vue-cli初始化vue项目在你想要安装项目的而目录下输入vue init webpack projectname（projectname是你项目的名称），Project name:——项目名称Project description:——项目描述Author:——作者Vue build:——构建模式，一般默认选择第一种Install vue-router?:——是否安装引入vue-router，这里选是，vue-router是路由组件,后面构建项目会用到Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦，eslint的格式验证非常严格，多一个空格少一个空格都会报错，所以对于新手来说，一般不建议开启，会加大开发难度Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试，可以不用安装如下图

第六步，选择上一张图片的NO,I will handle that myself然后输入cd projectname(你项目名称)然后再输入cnpm install如下图

第七步，输入cnpm run dev最后在网址打开http://127.0.0.1:8080/如下图

最后附上项目的结构目录，如下图