Vue项目开发技巧总结

前言

最近帮组里面新人做code review, 顺带回顾了一下以前项目的代码。问题是真的不少，虽然尽量统一规范，但每个人的代码风格还是有所区别的，很难让人满意。在项目开发的时候，我也经常会遇到有些部分可以用更有效率和易维护的代码实现，但是因为项目进度的原因选择了更省事的写法，虽然后来会在有时间的时候回去优化，但不能否认的是大部分还是没有时间再去修正的。所以我系统总结了一下我在Vue开发中遵循的规则，希望自己能够严格规范代码，同时也分享给大家参考。

项目结构

建项目是技术确认后正式开发的第一步，一个合理的项目目录结构会在规范整个项目的代码风格上有很大帮助。首先先看一下我用vue-cli建的vue项目

目录结构

在这里我只介绍src内部目录

1. api
   这个目录是用来封装和服务端交互的api的，比较通用的写法
2. assets
   用来存放图片，字体等等静态资源
3. business
   这个目录是用来存放视图和业务分离后业务部分的代码的，我会在下面详细介绍
4. components
   用来存放一些封装好的公共组件，或基础组件。如果是只在某个页面单独使用的组件，一般放到views目录下。
5. lang
   用来存放国际化的多语言相关的文件
6. model
   该目录下一般用来存放两种model,一种是页面的viewModel,一种是网络请求的数据model,我会在下面详细介绍
7. router
   存放vue-router的路由文件
8. store
   存放vuex的store文件
9. utils
   该目录下一般放一些工具类或静态数据，比如说对日期处理的封装函数，还有静态的变量名之类的数据。
10. views
    该目录下放项目的主要代码，一般来说该目录下的一个子目录对应一个页面。

代码分离

在Vue开发中，我见过包括我自己在内的很多开发人员都会犯的一个错误，那就是视图代码和业务代码过度耦合。非常简单的一个例子，业务比较复杂的页面的，写到后期经常会出现一个.vue文件里面写了最少上千行代码，导致无论继续开发或者是后期维护都变得非常费时费力，究其原因是因为把很多业务、数据上的处理都放到了这一个.vue文件里面。
要想解决这个问题，那就必须要分离代码，在和视图有关的.vue文件中，只允许存在和视图UI操作有关的代码。下面是一个对模板增删改查的.vue文件的分离写法。

在这里我将Template.vue这个文件有关的所有业务处理，以及进行网络请求的数据处理都放到business目录下的template.business.js这个文件中，在.vue文件中只保留对UI对基本操作。而在相应的template.business.js中，如果业务很复杂的话，也可以对这个js文件进行模块划分，这样对于相应业务的逻辑会更加清晰，让复杂的项目代码也会具有较高的可维护性和易读性。

数据处理

在前端开发中，当通过网络请求获取、提交数据时，接口提交、返回当数据格式和页面渲染时用的当数据格式很有可能并不相符，所以对于这部分一般需要做数据转换。数据转换我一般会封装到model目录下，每一个网络请求都对应于一个数据Model和一个View Model,在进行http请求获取数据时生成一个普通的数据Model的实例，然后转换成适合页面渲染的View Model。当进行数据提交时，将页面的view Model转换成普通的数据Model然后进行http请求。

总结

以上的这些方法在开发的时候稍微麻烦一些，肯定不如直接在.vue文件里直接写要方便。但是当项目开发到后期，代码量越来越多时，或者有需求要改动时，就会发现这些额外的工作是完全有价值的。