vue-cli +vue2+ webpack 前端架构环境的搭建

刚接触webpack和vue-cli时完全不知道从哪下手，更不要说一个前端架构，各种百度，Google，安装插件。在这里总结一顺序，方便大家按顺序搭建

1.安装node

在node官网下载最新版node环境，一路next安装。安装后npm也自动安装，
查看安装是否成功。

微信截图_20170514185512.png

2.安装脚手架vue-cli,进行全局安装，只需安装一次，或者可以借助淘宝镜像进行快速安装（1和2任选一个）。

1.指令：npm install vue-cli -g
2.镜像指令：npm install vue-cli -g --registry=https://registry.npm.taobao.org

微信截图_20170514185834.png

安装后查看是否安装成功，执行 vue -V 查看版本。

微信截图_20170514185904.png

3.新建一个自己的vue项目，如vuedemo项目名（输入这个命令之后，会出现一些提示，是什么不用管，一直按回车即可。）

指令： vue init webpack vuedemo

微信截图_20170514191044.png

4.项目初始后提示 To get started: 根据提示指令继续操作

cd vuedemo
npm install
npm run dev
按顺序执行即可

微信截图_20170514191437.png

5.执行最后一条 npm run dev 浏览器自动弹出一个窗口，出现以下内容说明环境搭建成功。

微信截图_20170514191547.png 微信截图_20170514191721.png

6.查看我们vuedemo项目文件目录结构，环境搭建成功。

微信截图_20170514191608.png