vue项目工程化规范

前言

在一个团队中，通常会同时有多个项目在开发，咱们除了要开发本身主要负责的项目，偶尔也会由于客观因素去开发别的团队或我的主导的项目。这时问题就出现了，咱们须要花必定的时间去了解项目的目录结构，而且努力遵循当前项目的一些潜在的规范（即便这些规范心里是拒绝的，为了避免破坏总体性也会去遵照）。那么咱们对于采用vue技术栈的项目发现有一些能够改进和规范的地方，如：文件命名不规范，开发目录结构不统一等。

目的

统一命名规范，统一开发目录结构。借用egg.js中的设计思想就是：在团队内部采用这种方式能够减小开发人员的学习成本，开发人员再也不是『钉子』，能够流动起来。没有约定的团队，沟通成本是很是高的，好比有人会按目录分栈而其余人按目录分功能，开发者认知不一致很容易犯错。

文件命名规范

folder：文件夹命名采用中划线链接
反例：serviceCustomer ServiceCustomer Users uiComponents
推荐：service-customer users

.js：通常的js文件采用小驼峰的命名方式。若是是类文件，则使用大驼峰的命名方式
反例：service-customer.js
推荐：serviceCustomer.js ServiceCustomer.js(仅限类文件)

.vue：官方推荐使用大驼峰或者中划线的方式命名。单文件组件官方命名规范
反例：myComponent.vue
可以使用：MyComponent.vue
推荐：my-component.vue

引入vue组件的时候须要转换为大驼峰 推荐：import MyComponent from '@/components/my-component'
以上命名规范是在参考iview，iview-admin，element等一些vue开源项目并结合vue官方文档以及当前的开发习惯得出的推荐用法。
更多vue的风格指南请参考官方风格指南

目录结构

此目录为src文件下的目录结构

├── api
│   ├── user.js
│   └── news.js
├── assets
│   └── images
├── components
│   └── biz-alert
│       ├── index.js
│       └── biz-alert.vue
│   └── cell-group
│       ├── index.js
│       └── cell-group.vue
├── libs
│   ├── ajax.js
│   └── excel.js
├── mixins
│   ├── news.js
│   └── user.js
├── router
│   └── modules
│       ├── news.js
│       └── users.js
│   └── index.js
├── store
│   └── modules
│       ├── news.js
│       └── users.js
│   └── index.js
├── styles
│   └── common.css
├── utils
│   └── util.js
├── views
│   ├── news
│   └── users
├── App.vue
└── main.js
复制代码

api

api目录用于存放api请求，即全部的api都放在这个目录下进行管理，无特殊状况不要在项目的其余文件夹或文件中出现api路由。文件命名采用相似apiUser.js的命名方式，以便区分是api或者是别的js文件。api目录下对不一样模块再进行分类管理，如用户相关的api统一写在apiUser.js中，订单统一写在apiOrder.js中。

采用这种目录及命名的缘由：

1. 根据业务模块，对api进行模块划分，方便管理和维护。
2. js命名方式遵循文件命名规范，在此基础上加上前缀api，以便区分api文件。
3. export default apiUser 根据sonar的规范(By convention, a file that exports only one class, function, or constant should be named for that class, function or constant. Anything else may confuse maintainers.)。必须和文件名同样

   

assets

assets目录主要存放图片文件，图片文件命名没有标准的规范。可参考图片命名规范

components

存放公共组件，在一个项目中或多或少的存在一些复用的组件，这一类的组件统一在这个目录下进行管理。
建议每个组件用一个单独的目录进行管理，在index.js把组件暴露出去，这种作法方便作一些扩展。带来的问题是，可能须要多建立一个index.js，多写几行代码。
采用这种目录结构以及引入index.js的方式，主要参考一些开源的后台管理项目。iview-admin ，iview， 飞冰的ICE Design Pro的模板。

libs

libs目录存放插件封装和配置, 好比 axios,vue-lazy等

mixins

mixins目录用来存放各个混入对象

router

router目录用来存放路由信息和导航守卫。
大型项目中建议在router/index.js管理全部路由相关的内容，包括路由的基本配置信息、导航守卫。路由信息则按照模块来管理，在方便管理路由信息的同时避免某个文件过大（超过800行），这样的组织结构会更加清晰，demo以下。也可参考vue-element-admin
中型项目能够在一个文件中管理路由信息，在index.js中配置导航守卫。可参考 iview-admin
小项目中能够在router/index.js中管理全部的路由信息及导航守卫。\

优势：

1. 职责明确
2. 结构清晰，易于管理

不推荐：

1. 在main.js中处理导航守卫，带来的问题main.js职责不明确，文件过大
2. 路由文件超过800行（目前的项目中的路由信息，有部分存在或即将存在这个问题）

store

store目录主要用于vuex状态管理。

styles

styles目录用于存放一些公共的样式文件。

utils

utils 目录存放辅助函数。

views

views为业务视图。
这个目录下的结构组织可根据模块或者页面去组织。

总结

遵循上述的规范，能避免咱们在开发过程当中的一些痒点，优化咱们的项目结构。目的是让帮助咱们开发人员在各个项目中流动，大大下降学习和熟悉项目的成本。
这个项目结构的规范主要借鉴了egg的设计思想，并参考了部分开源项目的设计和命名规范。

参考资料

Vue工程化最佳实践
vue官方风格指南
egg文档
iview
iview-admin
vue-element-admin
vant风格指南
飞冰 Ice Design Pro模板