前两个月正好用Vue做了一个大数据项目，积累了很多经验。今天终于有机会分享了。vue提供的模块化无疑是提升开发效率的神器，也为后期的代码优化和维护提供了极大的便利。组件使用介绍Vue提供了组件功能，组件分为全局组件和非全局组件。不同的是全局组件可以直接在.vue文件中使用自定义html。非全局组件必须在Vue对象中定义组件。导入这个组件。局部组件引用方法importAfrom'@/component/A'exportdefault{data(){},components:{A}}全局组件引用方法//index.js文件importAfrom'@/component/A'A.install=function(vue){Vue.component(A.name,A)}export{A}//main.jsfileimport{A}from'./components/index'Vue.use(A)这里有一个引入全局的优化技巧成分。上述引入全局组件的方式需要同时维护index.js和main.js文件，非常麻烦。使用以下代码只维护index.js文件//index.js文件importAfrom'@/component/A'A.install=function(Vue){Vue.component(A.name,A)}functionInstallAll(Vue){Vue.use(A)}export{A,InstallAll}//main.js文件import{InstallAll}from'./components/index'InstallAll(Vue)验证码组件复用电话号码+验证码登录是已经是主流的登录方式之一。但是一个项目需要用到验证码的地方有很多。例如，在登录、注册、修改密码、重新确认信息时，都会进行二维码请求。到处改写验证码逻辑很麻烦，所以验证码需要是一个抽象的组件。验证码通常连接多个接口，或者是一个接口但需要传递验证码的类型。而这些接口通常需要手机号码。所以验证码需要接收两个参数：phone，type。你可以自己完成点击操作和倒计时操作，对引用的地方没有任何影响。//最后在每个页面调用的时候是这样的集合组件的复用和集合功能比使用频率更高验证码越高，当然难度也越大。像我最近的大数据项目，用户可以收集视频、音乐和话题。同时出现在很多地方，比如视频列表、音乐列表、话题列表、视频详情、音乐详情、话题详情……都有收藏的功能，不是抽象成一个组件写几个用同样的逻辑本地后期维护极其困难。像这样的收藏通常需要一个id，是否是收藏状态，以及收藏完成后的一系列跳转功能。所以需要两个参数：id和status。还有complete的回调方法//调用的时候最后一个页面是这样的而Topics显然是三个集合接口。你要写三个集合组件吗？当然不是，既然都属于采集功能，自然是一个组件来完成。再加一个类型参数来区分就可以了。//最后每个页面调用的时候是这样的/collection>这样，我每次使用collection时，只需要复制这行代码即可。综上所述，第三方UI库会给我们引入很多有用的组件，比如轮播、表单、图片上传等。但是这些都是与业务无关的组件，我们在做项目的时候肯定会遇到很多重复的功能。为了便于代码维护，必须要有良好的组件抽象能力。善用组件功能。上面提到的验证码和采集功能是经常使用的，我一般把它们当作全局组件（我个人会把使用次数>1的组件当作全局组件），但是有些页面极其复杂，有几万个页面上的代码行数。查查肯定麻烦巴拉的。也有必要把它拆分出来，不要写到最后一个组件。在这种情况下，我通常会使用部分组件来保持和提高界面的简洁性。filters数据过滤无疑是vue的重要功能之一。时间和数字等过滤器过于频繁。掌握过滤器无疑会大大提高代码的幸福感和可维护性。过滤器的介绍和组件一样，过滤器也分为全局过滤器和局部过滤器。全局过滤器vue.filter('date',function(value1,value2,...){返回'处理后的结果'})本地过滤器exportdefault{filters:{date(value1,value2,...){return'resultafterprocessing'}}}usage(globalorlocalusageisthesame)//不带参数{{value1|date}}//带参数{{value1|date(value2,...)}}//多重过滤{{value1|filter1|filter2}}注意：第一个参数是竖线（|）前面的值常见的使用场景我大多使用全局过滤器。和localfilters一样，一是拿到原始数据就可以直接处理，二是发现前期用的localfilters已经升级为globalfilters。如果您有良好的日期处理部分过滤方案，欢迎提出意见。后台传过来的数据是string类型2019-03-1409:00:00之一。要么是时间戳类型，但是界面通常只显示一部分，比如只显示年月日，或者月日。于是就有了全局日期过滤器，开心到哭了。本过滤器最好同时支持以上两种格式。如果你不知道数字处理。例如，保留几位小数，用字母w代替多位数字，或者汉字“亿”很常见。以上两种是我遇到最多的，欢迎大家评论补充。总结一下，该用过滤器的地方不要死磕，不止一个地方要写成public。否则后面如果逻辑处理不正确，你不知道哪里用了同样的处理逻辑，很容易造成bug漏掉。mixins这个属性的使用场景也分为全局使用和局部使用。全局使用将影响所有后续组件。所以我不推荐在业务代码中使用全局mixins。而且感觉使用globalmixins不利于代码维护。如果你突然想在模板中一个一个地使用函数，你首先想到的肯定是在methods中搜索。如果找不到，那将非常难受。而且破坏性比较大，所以我一直都是用局部注入。让其他人知道这里使用了mixins。如果他们遇到一些奇怪的情况，知道这里有mixin的时候，他们会主动查看这里的相关代码。我在引用第三方列表库时用的最多的就是这个属性，一般都有一个formatter格式化数据属性。这里不使用过滤器。但是像列表这样的数据处理重复性很强，所以注入一个mixins就方便多了。一些第三方库中使用的技巧router中使用的一些技巧钩子函数beforeEach在做路由跳转时会先执行beforeEach。因此，可以在路由跳转的时候判断是否可以跳转。常见的场景是判断用户是否登录，是否对某个页面有权限//to:Route:要进入的目标路由对象//from:Route:当前导航离开的路由//next:Function:必须调用这个方法来解析这个钩子。执行效果取决于next方法的调用参数。next()：继续执行管道中的下一个挂钩。如果所有的钩子都被执行??了，那么导航的状态就是确认（confirmed）。router.beforeEach((to,form,next)=>{})vuexAction的tricks中使用的一些tricks可以异步执行方法。我在业务中经常会遇到这样一种情况：获取某种信息，但是这个信息接口是在多个页面中使用的，每个页面都要处理这个接口真的很麻烦。所以很高兴在vuex中分享这部分资料。使用Action是因为它是异步的。提供参考代码：actions:{getMemberShip({state,commit}){returnnewPromise((resolve,reject)=>{if(!state.memberShip){//memberShip是一个ajax请求方法memberShip(state.userInfo)。然后(res=>{commit('setMemberShip',res)resolve(res)}).catch(err=>{reject(err)})}else{resolve(state.memberShip)}})},}这是me定义获取会员包的情况，在会员包的很多页面都会用到。但是经常变化，没必要一登录就加载，所以用action保存。如果没有这个值，则执行ajax请求，如果有，则直接返回结果。echartssecharts是图表界的老大哥，支持N种图表，配置项上千个也不为过。不过也正是因为配置项众多，才给了你自由配置更多的可能。使用echarts有什么技巧？快速定位配置项echarts包含标题、图例、提示框、标签、标记线……等控件。真的很难找到一种风格来调整。不过现在官方新增了术语速查手册。曾经去老官那里查过。现在新官有了这个东西，我倒是有福了。我需要调整那个控件的效果。上面的点把我带到了相应的API，好用啊。优化项目代码不是一个特殊的数据展示项目，用到的图表种类也不多。通常一个图表是重复使用的，而echarts通常需要几十行代码来配置一个图表。把这个配置项去掉，只传入一个参数代码，是多么的整洁啊。这个实现非常简单。如果您还没有这样做，建议立即优化您的项目。axiosaxios是一个类似于ajax的第三方控件。所以我有一个很好的想法要和你分享。我在开发中遇到了一个坑。官方文档说支持IE，但是IE根本不支持。是因为axios底层是用promise写的，而IE根本不支持这个属性，所以需要引入profill。解决方法是引入babel-polyfill//step1npminstall--savebabel-polyfill//step2，在vue.config.js文件中添加如下内容module.exports={configureWebpack:config=>{return{entry:{app:['babel-polyfill','./src/main.js']}}}}有自己的axios默认配置这段代码太长，就不分享了。想要能够关注公众号进群交流（二维码在最下方）本来打算酝酿总结的，最近发现不总结就渐渐忘记了。还有很多东西没写，比如Project优化技巧，命令系统。但是这段文字已经很长了。所以我只能到此为止了。如果您觉得对您有用，请点个赞。如果你想和我交流，得到指导，请关注公众号，加我微信讨论。
