VUE脚手架搭建项目流程

一、安装环境搭建

（1）安装node.js

     从node官网（https://nodejs.org/en/）下载并安装node，安装完成之后，打开命令行工具输入命令node -v,如下图，出现对应版本号就说明安装成功了

  到这为止，node的环境已经安装完了，npm包管理工具也都有了，但是由于npm的服务器是外国，有时候我们安装“依赖”的时候很慢，为了更快更稳定，所以需要用这个cnpm来安装我们说的依赖

（2）安装cnpm

点击进入淘宝的cnpm（https://npm.taobao.org/）网站，里面有详细配置方法 

或者打开命令行输入 

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

等待安装成功，输入cnpm -v 可以查看当前cnpm版本

（3）安装webpack

打开命令行工具输入 npm install webpack -g，安装完成之后输入webpack -v 出现相应版本号，说明安装成功

（4）安装vue-cli脚手架

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

 

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

上述步骤，已经把需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目

创建一个基于webpack模板的新项目

打开命令行输入工具，

1、cd 到想要建立项目的目录路径 （如下图，我的项目是建立在e盘workDirectory目录下面的）

2、使用vue-cli初始化webpack项目    vue init webpack  项目名（如下图，）

 

 3、 cd命令进入创建的工程目录，比如cd vueTestProject  ( vueTestProject是自己上面建的工程名字)

4、安装项目依赖： npm install

到目前为止，创建完成的vueTestProject目录如下

5、启动项目：npm run dev

这一步，默认服务器启动的是本地的8080端口，所以请确保你的8080端口没有被别的程序占用，

服务器启动成功后浏览器会默认打开一个欢迎页面，如下图

如果没有直接弹出浏览器，可以设置config文件夹里面的index.js，修改dev里面autoOpenBrowser属性为true，这样每次执行完npm run dev 就会直接弹出默认浏览器页面了

到此就算成功利用vue-cli搭建一个基于vue+webpack的项目了