前言总结了上一篇文章中的前端工程思想，并在Vue全家桶项目中付诸实践。趁热总结一篇如何更高效高质量的开发。vue项目，以及在里面踩过的坑。..基于vue-cli的自定义模板（CustomTemplates）小伙伴们的vue项目应该都是用vue-cli初始化的，但是vue-cli只满足基本的配置和功能。如果你有额外的配置需求或者想要迎合团队的业务配置，每一个新项目都要重新安装额外的配置，比如vuex，sass，packageaxios，以及相关的文件夹。为了解决以上问题，vue-cli有自定义模板的功能。你fork官方模板修改一下，然后用vue-cli调用。直接拉取git源有两种具体的调用场景：当你修改好模板并上传到repo后，可以执行如下命令行初始化vueinitusername/repomy-project拉取本地模板:clone的时候官方模板是在本地修改的。可以执行以下命令行初始化vueinit~/fs/path/to-custom-templatemy-project。也可以写meta.*(js,json)来选择安装哪些配置~如果你懒得去写vuex,sass配置，封装axios的话，可以通过我配置的脚手架来初始化项目~vueinitduosanglee/vuejs-custom-template的模板在repops:我的模板的代码风格是基于standard引入sass全局变量、mixin、function等。首先我们考虑以下场景：在使用rem开发移动端的时候，定义一个方法pxToRem实现px到rem的转换，然后在项目中创建每个.vue文件@import'public.scss'都要导入很多很多次，在如果public.scss路径发生变化。..哭都来不及了。这时候，sass-resources-loader就来救场了。可以省去重复导入的需要，还支持LESS、POSTCSS等，具体用法如下：npminstall-Dsass-resources-loader首先需要在项目中找到build文件夹，找到util.js，添加一些代码functionresolveResouce(name){returnpath.resolve(__dirname,'../src/style/'+name);}functiongenerateSassResourceLoader(){varloaders=[cssLoader,//'postcss-loader','sass-loader',{loader:'sass-resources-loader',options:{//它需要一个绝对路径resources:[resolveResouce('common.scss')]}}];if(options.extract){returnExtractTextPlugin.extract({use:loaders,fallback:'vue-style-loader'})}else{return['vue-style-loader'].concat(loaders)}}然后还在当前文件中Return{css:generateLoaders(),postcss:generateLoaders(),less:generateLoaders('less'),sass:generateLoaders('sass',{indentedSyntax:true}),scss:generateLoaders('sass'),stylus:generateLoaders('stylus'),styl:generateLoaders('stylus')}被return{css:generateLoaders(),postcss:generateLoaders(),less:generateLoaders('less'),sass:generateSassResourceLoader(),scss:generateSassResourceLoader(),stylus:generateLoaders('stylus'),styl:generateLoaders('stylus')}这样在项目中里面用到了sass全局变量、mixin、function~~在线mock平台easy-mock现在前后端分离，前后端并行开发，提高开发效率，通过协作一个api文档，所以一个好的mock工具对于提高效率也很重要~这里强烈推荐easy-mock工具。支持团队协同编辑、生成模拟数据的在线mock服务，还支持导入swagger文档等功能。该接口定义全局变量如下。项目中会需要用到全局变量，处理一些频繁的操作，大家应该绑定window对象，但是这种方式不适合服务端渲染，因为服务端没有window对象，它是未定义的，尝试访问属性时会报错。我总结出两个可靠的方法被代理到Vue的原型对象。由于所有组件都会从Vue的原型对象继承它们的方法，所以我们只需要Object.defineProperty(Vue.prototype,'$xxx',{value:xxx});可以通过this.$xxx:在所有组件/实例中访问插件~无需定义全局变量或手动引入~至于为什么要使用Object.defineProperty方法，是因为通过Object.defineProperty绑定的属性是只读，以防一起开发项目的合作者（zhu）（dui）（you）（you）重写或覆盖该方法的值。所有组件的状态，所以全局变量和方法都可以放在vuex中~具体用法我就不细说了，大家可以仔细看看vuex文档组件设计大家都知道，组件化的思路就是分而治之，几乎任何类型的应用程序接口都可以抽象成组件树，那么我们应该遵循什么规则将应用程序抽象成组件来应对复杂多变的业务需求。我们从通信、黑盒、继承的角度来看通信：Vue的父子组件通信机制是props向下，event向上，尽量保持松耦合，保持单向数据流的特点，强约束.需要注意的时候，尽量减少组件间的通信，比如使用$parent，$root。继承：当两个组件有一些共同点，而差异点足够多时，可以使用Vue的继承---mixin，它允许你封装一个功能，可以在应用程序的其他组件中使用。如果使用得当，它们不会改变函数范围之外的任何东西。而mixin还有各种高级用法，大家可以自己去查（不知道怎么查）。黑盒：组件的黑盒状态只暴露变量接口和方法，渲染输入数据，将组件内部不变的逻辑封装起来。设计模式原则：利用单一职责原则等设计模式原则，将组件拆分分离成更细的颗粒，保证高内聚；又如接口隔离原则，使用稳定的服务端接口，将不断变化的模块隔离开来，使Components解耦；里氏代换原则、依赖倒置原则等。目录结构--src--assets#私有资源--common#公共组件--components#业务组件--api.js#请求文件--config#环境变量配置--env.js#环境变量文件--http.js#封装axios文件--pages#页面维度--pageA#页面A--pageA.vue#页面A单个文件--pageA-components#页面A下的一个组件--children#子页面--router#路由--index.js#路由入口--routes.js#路由配置信息--store#vuex--modules#vuex模块--index.js#vuex入口--utils#js通用方法--app.vue#top-level单文件--main.js#入口从目录结构可以看出我对整个项目的划分思路。首先我把组件分为两类：通用组件和业务组件。普通组件与业务耦合度低，有简单状态或无状态，几乎所有的数据都依赖于输入，它只负责渲染输入数据。比如按钮是一个组件，可能有一个参数决定它的大小，还有一个参数决定它是否可以被点击，但是按钮被点击后会发生什么，就不是按钮组件需要知道的了。业务组件与业务高度耦合，可以由多个公共组件和其他业务组件组成。它会有一些方法来修改它持有的数据。在内部，它保存了一些数据和方法来确定内容的呈现，一个简单的道具在外部接受数据。可以理解为组件树的非叶子节点，通过自身的数据变化，进而对子组件的内容进行操作。然后config文件夹里放了环境变量文件env.js和打包http库文件http.jsenv.jshttp.js，然后我把路由里面的routes.js和api.js请求文件分别解压出来。自动生成sprite图片在前端项目中自动生成sprite图片，为我们节省了大量的时间。我们只需要将图片丢到文件夹中，webpack-spritesmith就可以根据我们设置的规则自动合成css-sprite。安装配置如下：varSpritesmithPlugin=require('webpack-spritesmith');...module.exports={...plugins:[newSpritesmithPlugin({src:{cwd:'./src/assets/sp/',glob:'*.png'},target:{image:'./src/assets/sprite/sprite.png',css:'./src/assets/sprite/sprite.css'},apiOptions:{cssImageRef:'./sprite.png'},spritesmithOptions:{algorithm:'top-down',padding:100}})]}自动修复eslint格式错误。这个功能是基于小伙伴的开发工具是vscode。首先，在vscode扩展中安装vscode的eslint插件，然后在settings.json中添加如下配置“eslint.validate”：true},{"language":"vue","autoFix":true}],"eslint.autoFixOnSave":true那么eslint插件在保存的时候会自动根据项目下的.eslintrc设置代码格式文件~sf不支持播放gif。具体效果只给你看跨域我自己查。在浏览vue-cli的官方文档时发现了vue-cli自带API代理，解决了项目中后端联调时的跨域问题。具体安装配置如下：首先我们找到config文件下的index.js，然后找到dev对象下的proxyTable属性，然后在proxyTable中加入如下代码：{'/api':{target:'网站名',pathRewrite:{'^/api':''}}}然后重启本地服务器，这样你发送的/api/a就会被代理发送到“网站名/a”~开发工具emmet之所以称emmet为前端开发工具，是因为它可以根据我们输入的缩写得到相应的内容，大大节省了我们开发html和css的时间，例如：输入ul>li*2>span按扩展键
