vue项目实践思考003

通过本问将看到我在vue的项目中，进行的一系列的项目优化，然后看到不同的维度将这些点进行分类。

这里更多的指的是设计考虑的思路，是大纲，暂不涉及实际代码。

项目架构

分模块设计思想

在接到项目之后，首先将store,router，xhr的对应三个部分分别分子模块，每个子模块的划分维度有所差别。

• 其中store划分modules划分维度是数据关联性，由于store本身支持modules的组合，而且使用是混合在一起的，所以我们还是会在index中将模块进行混入的。
• 其中router是按照业务进行分模块的，或者说是按照页面维度分的，每个一级路由分一个路由模块，二级路由为页面名称，其中将一级路由设置为文件夹名称，二级路由路径与页面名称同名，为了简化这部分，一级路由的名称定为‘scope’，而且为了同时支持懒加载和优化引入组件的写法，写了_import的优化方法，可以批量按照文件名引入对应的组件，在生产环境将进行路由代码分割。然后不同模块也是最后汇总到router的modules中。
• 其中xhr的部分按照后端的微服务进行拆分模块，方便查看和维护。按照后端的接口层次再决定是否划分二级对象属性，其中暴露出来的方法与后端同名，后续也是决定采用easymock进行批量生成api方法来优化这部分手写代码的工作。考虑到几乎没有一个页面或者组件会用到多余两个的api微服务请求，所以这就决定了我在index.js中并没有收集聚合每个业务的api，而是选择开发时按需加载。而对于通用性比较高的api，我一方面会定义在index.js中，另一方面会把这部分数据暴露在vuex中来达到目的。
• 额外介绍，除了以上三个，我针对src根目录也设置了过滤器的分业务模块实现方案。这部分由于各个业务耦合情况比较少，所以也是仅仅针对核心的 工具 过滤器暴露在index.js中，其他的都是按需引入。

业务内公共组件

与有的同学考虑不同的是，我在写一些组件的时候，针对业务性比较强，但是针对当前业务公用的一些拆分组件会定义在每个业务的components目录下，而不是放在src/components,我称之业务内公共组件。

业务内枚举 与 全局枚举

其实很多时候会遇到枚举数据，或者是后端定义好的，或者是前端定义好的，或者是接口请求的但是基本不做更改的。也许枚举字段少的也还好，但如果一个数据项有超过十个枚举项，有超过2个页面使用的时候，你应该考虑的是单独的放在枚举字典文件中去维护。 那么首先，我是建议基于这个业务的枚举建在业务的根目录下新建一个enum的js枚举文件，单独用来承载业务中的枚举。但较多时候会有一些比较让人烦恼的部分：

1 业务中的枚举发现另外的页面中也有用，不单单属于这个一级业务页面。那么你可以这样考虑下：首先肯定是维护一份数据的，那么维护在哪里，如果是核心业务，那就维护在全局枚举仓库，然后业务中进行按需引入或者改装。如果是周边业务，偶尔用下，我个人觉得维护在业务中的枚举是比较好的。

2 枚举与过滤器与字段翻译的关系。其实枚举字段不仅仅是用于做枚举的，还必然的会充当一些下拉框，显示值的遍历来源，也可以当做字段翻译的翻译来源，同时还可以当做我们一些业务字段的过滤器。这部分理解好之后，对于我们优化整理项目中的业务数据类型有着极大的好处。

3 全局枚举业务过滤器，通用性过滤器，当然这些过滤器功能除了按照基本的部分，还会按照业务中收集到的部分进行业务过滤器的维护。同时也作为对应的方法来获得对应值转换值的语法，一者两得。

common组件

• 纯ui组件，elementui组件进行进一步的封装，按照其官方的维护方式进行自己项目需求的一些分类。
• 布局内基本布局组件，这里面包括了页面架构，菜单，顶部，主题页面。
• 可分解于任何页面任何位置的特征业务组件，支持其展现到任何位置任何页面中，只要求其对应的业务数据要求即可。
• 功能性组件，包括图片上传，自定义的模态框

theme

为了维护基本的风格，设置了一些基本的主题变量，然后针对elementui的核心组件修改器风格颜色。

axios拦截

针对axios的部分进行请求前后拦截，针对特定状态码进行翻译，在这个设置中进行vuex必要的接口token必要性的验证以及引入提示组件进行必要的接口提示。

针对业务的整合需求，进行接口的串联、并联的请求优化。

mixins

将常用的优化方法进行mixins进行混入。

典型代码段优化

用数据做逻辑，减少标签的显示控制

看到很多前端会根据数据的某个字段，然后写v-if 决定这个标签是否显示，然后不是这个字段，另外一个显示。建议在不管是对象还是数组的显示控制中，直接根据需要的数据进行数据改装，不用多条件判断类似的组件渲染。这种代码简单的可以用一个标签承载，内容的显示区别简单的可以用三目，复杂的就应该在js方法中进行改造完之后或者过滤器实现。

<span v-if="sex===male" >男</span>
<span v-else >女<span>
复制代码

挥之不去的静态复制写法

vue提供了良好的数组循环和对象循环的方法，在我们实现类似的页面需求的时候，不建议再和之前一样，写很多维护性不强的页面列表了。把它用一个数组维护，然后v-for循环实现，对于因为大量的这种代码占据篇幅的话，说明还是 没有很好的理解vm的含义。

<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3 </option>
复制代码

除了if,else想不到其他逻辑方式

然后就看到一大波人会if，age===0,判断，else if 等等。其实除了这些你还有switch,对象属性字面量方式，switch方式，等等。不要让if,else的嵌套循环成为我们写代码的唯一方式。

<option value='0'>0</option>
<option value='18'>未成年</option>
<option value='60'>老年 </option>
复制代码