vue-cli 脚手架总结

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

搭建官方项目模板步骤： 

一、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以上。

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

三、咱们还须要把项目的依赖下载下来。使用命令:  cd youdemoname 而后执行npm install 就能够了，这个时候你的项目中有多了一个node_modules 目录

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

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

    

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

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