1.安装
npm install --global vue-cli
2.创建工程
vue init webpack vuetest
webpack是模板，还有其他的官网有介绍，webpack的应该是使用最多的了；vuetest是项目文件夹名；
后面会依次让输入选择
项目名称：不能输入中文，符合URL-friendly ；
WechatIMG1263.jpeg
项目描述：可以输入中文了
projectDesc.jpeg
作者：
author.jpeg
选择构建方式：
建议第一个，运行+编译 省事；
build.jpeg
是否使用vue-router（vue路由）：
router.jpeg
是否使用ESLint（代码检测，统一风格）：
eslint.jpeg
是否使用unit tests（单元测试）：
unitTest.jpeg
是否使用e2e tests with Nightwatch（自动化测试）：
e2eTest.jpeg
选择安装依赖方式：
install.jpeg
提供npm yarn两种；选择这俩后会自动安装；自行安装的话就选最后一个喽；
大功告成，等待安装就ok了！
all.jpeg
3.项目目录介绍
WechatIMG1274.jpeg
build+config是webpack的配置文件；
dist是打包后的文件夹；
src是项目代码，代码都写在这个文件夹下；
static是放一些静态都文件，打包的时候会原装不动的copy到工程中；
package.json 是npm的配置文件；
WX20180215-141948@2x.png
name,description,author对应创建工程时输入的内容；
script是可执行的操作dev+start是开发时使用，检测到代码变化浏览器会自动刷新，具体功能配置需要查看webpack的配置；
build是打包命令，项目编译完成后会生成dist文件夹；
使用方法：npm run dev/start/build;
package-lock.json是npm5做的一个优化，加快了npm下载的速度
.gitignore是git的配置文件；
WX20180215-142540@2x.png
需要git忽略的文件夹写在这个下；
默认忽略了dist文件夹，需要删掉/dist/才可以被git检测到打包后的代码；
其他
关于scss，sass
webpack里已经配置好了scss sass，只需要安装下依赖就可以使用了；
npm install node-sass --save-dev
npm install sass-loader --save-dev
内联写好声明 lang="scss" 外联直接创建.scss .sass;
WX20180215-143307@2x.png
webpack的一些“坑”？
1.打包后的路径有问题，需要引入的css js 图片统统找不到，
1518685197470.jpg
不过问题不大，改一下webpack的路径配置就好；
1518685099086.jpg
2.web sever端口
web sever默认的端口是8080，很多工具默认的都是8080，建议修改下避免冲突；
WX20180215-170448@2x.png
