现在vue-cli已经到3.0时代了；原来使用vue-cli脚手架也发生了改变；最后生成的文件相应的不一样了；我写的这个总结是自己在做vue项目的时候中用到的一些技术点；准备记录下来以备不时之需；

一：脚手架安装的命令；

1：npm install -g vue-cli  全局安装 vue-cli
2：vue init webpack my-project 初始化文件  这里面命令选项挺多的  详细的可以参考<a href='https://github.com/vuejs/vue-cli/tree/v2#vue-cli--'>vue-cli</a>;这里面介绍的比较全；
3：这样就结束了；中间是其他的一些选项；其中有一项我觉得需要注意下；eslint代码检测；这个在构建项目的时候就打开的话；是编译的时候强制检测的；这样有时候并不是太友好；对不习惯的简直是灾难；
建议使用IDE的ESlint插件；这样也能实现团队内部的规范；统一编辑器啊；还有其他的；这些一个团队的基础装备应该是统一的；不然会出现一些强bug；

基础的内容暂时想到的是这么多；

---

二：vue 项目配置修改

在生成的项目文件中build以及config中是配置项目的改动的两个文件夹；包括打包编译以及其他涉及到反向代理；开发使用的域名端口号等等一些配置；接下来我把我用到的一些字段简单的进行整理；建议大家详细的学习一下webpack;挺有用的；我看过一本 【深入浅出的webpack】吴浩麟编写的；
你需要知道模块化；相应的就要知道CommonJS以及它与AMD CMD的区别和关系。。。前端不好学；内容太多；不说太多了；就写我用到了的一些配置吧；

简单的说一下构建工具吧；webpack gulp grunt Fis3这些都是项目构建工具；他们都做了相同的事情；就是把源码转成js html css代码；总结如下内容

• 代码转换；
• 文件优化；
• 代码分割
• 模块合并
• 自动刷新 监听本地代码的改变
• 代码校验
• 自动发布
  构建工具其实是工程化 自动化思想在前端开发中的提现，将一系列流程用代码去实现；
  这些构建工具总体上都是为了实现这些功能；有人经常问道grunt gulp webpack 有什么区别；还是自己说他们的优缺点吧；就像JQ和现在的vue react一样；时代在进步；grunt gulp webpack 均是在进步中不断地相互淘汰；
• grunt 灵活，它负责执行我们定义的任务；大量的可复用的插件封装好了常见的构建任务； 但是集成度不高要写很多配置；无法做到开箱即用
• gulp 基于流的自动化构建工具；但是同样需要配置再执行比grunt的强大的是流的概念，gulp.task 注册任务；gulp.run 执行任务 gulp.watch 监听文件的改变 gulp.src读取文件 gulp.dist写入文件；太详细的在【前端构建工具对比】中详细的解释吧；内容有点多；
• webpack 相比就比他们强的是 专注处理模块化，能做到开箱即用；同样通过plugin进行插件扩展增加灵活性；

1：config文件夹下面的index.js；最后在build文件夹下的webpack.dev.conf.js webpack.prod.conf.js;都会一一对应；所以3.0以后就没有这个config这个配置依赖的文件夹了

1：dev下面 proxyTable；设置反向代理使用；

image.png

2：autoOpenBrowser是否在项目运行的时候自动打开浏览器；
3：host这个配置是是否允许局域网内可以访问；我用了下面的方法；将配置改为addressArr[0],实现局域网内可以访问

var addressArr = []; for (var dev in ifaces) { ifaces[dev].forEach(function (details, alias) { if (details.family == 'IPv4') { addressArr.push(details.address) console.log(details.address) // iptable[dev + (alias ? ':' + alias : '')] = details.address; } }); }

image.png

4：errorOverlay 错误弹出框；在出错的时候会自己弹出；

在build下面的配置

image.png

我修改了上面的这三个选项

1：assetsRoot 打包最终生成的文件夹
2：assetsSubDirectory 打包后生成的二级静态路径
3：assetsPublicPath  在html中引用路径前面会拼接这个字符串;就像下图

image.png

还有一个 productionGzip

image.png