如何搭建Vue项目（利用vue-cli来构建项目）

1.安装Node环境

a)安装node.js,下载地址为：https://nodejs.org/en/
b)检测版本node -v,还要检测包管理工具npm -v,因为在官网下载安装node.js后，就已经自带npm包管理工具了
c）有版本号输出，代表第一步完成

版本号1.png

2.安装webpack环境

a) 打开命令行工具输入npm install webpack -g，
在这里一般我们采取全局安装，这样每次创建项目的时候就不用再次执行语句安装webpack ，

b）安装完成之后输入webpack -v，出现版本号代表成功，在这里可能会出现如下错误，

错误.png

npm install webpack-cli -g

c） 再次查询版本号，输出成功代表完成第二步

版本号2.png

3. 安装vue-cli脚手架构建工具

打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功

版本号3.png

4. 创建项目

a）在命令行中 cd到我们项目文件夹路径
b）vue init webpack 项目名称
c）然后基本一路回车或者就ok了

创建项目.png
成功.png

Project name (vuedemo) 直接回车默认 
Project description (A Vue.js project) 直接回车默认 
Author 直接回车默认 
Use ESLint to lint your code? eslint可选择为no，eslint是代码规范验证，如果选择y会经常报错，会比较烦
pick an eslint preset. 默认Standard 
setup unit tests with karma + mocha?单元测试
setup e2e tests with Nightwatch?单元测试

5.运行项目

a）cd 项目名称
b）安装依赖 npm install -g
c）执行npm run dev
d）到了这里，说明你的项目就可以正式运行了，打开浏览器输入上述的链接，项目搭建完毕，可以开发了

成功.png