vue-cli 脚手架总结

vue-cli 的脚手架项目模板有browserify 和 webpack , 现在自己在用的是webpack , 官网给出了两个模板： webpack-simple 和 webpack 两种。两种的区别在于webpack-simple 没有包括Eslint 检查功能等等功能，普通项目基本用webpack-simple 就足够了. 

搭建官方项目模板步骤： 

1、npm install --global  vue-cli(安装vue-cli )  有的时候有看到其它两种写法:  --save-dev 和 --save的写法。这两个有一定的区别，我们都知道package.json  中有一个 “dependencies” 和 “devDependencies” 的。dependencies 是用在开发完上线模式的，就是有些东西你上线以后还需要依赖的，比如juqery , 我们这里的vue 和 babel-runtime（Babel 转码器 可以将ES6 转为ES5 ）， 而devDependencies 则是在开发模式执行的，比如我们如果需要安装一个node-sass 等等。有的时候看到package.json中安装的模块版本号前面有一个波浪线。例如: ~1.2.3 这里表示安装1.2.x以上版本。但是不安装1.3以上。

2、vue init webpack-simple yourdemoname  下载一个webpack-simple项目，这里的webpack-simple 是固定的，也就是官网的项目模板。youdemoname 这个是你自己项目的名字。 执行这个步骤以后。就会弹出询问 “项目名称..项目描述“等等问题 直接按照提示操作。这个时候对应的项目目录下就出现刚刚建立的项目了。

3、我们还需要把项目的依赖下载下来。使用命令:  cd youdemoname 然后执行npm install 就可以了，这个时候你的项目中有多了一个node_modules 目录

4、使用"npm run dev" 命令来运行项目，这时会默认在浏览器中打开http://localhost:8080的地址，如果安装了vue devTools，还可以在开发者工具中看到相应的app，如下图

5、"npm run bulid" 来执行发布，会自动生成dist文件夹，生成过程及结果如下图

    

6、使用IIS建立一个站点，目录定位到index.html所在的位置，然后启动网站，在浏览器中打开，结果如下图

以上内容参照了http://www.cnblogs.com/Shinnosuke/p/5680818.html一文，但在实践过程中，没有完全成功，主要是几个命令，文中已经特别用红色标出，同时增加了过程和结果图。