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的风格指南请参考官方风格指南

目录结构

├── 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中。

采用这种目录及命名的原因：

根据业务模块，对api进行模块划分，方便管理和维护。
js命名方式遵循文件命名规范，在此基础上加上前缀api，以便区分api文件。
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中管理所有的路由信息及导航守卫。\

优点：