第 7 卷
path: '/file/file-list', name: 'FileList',
component: () => import('@/views/file/file-list.vue')
}, {
path: '/file/file-add', name: 'FileAdd',
component: () => import('@/views/file/file-add.vue')
}, {
path: '/file/file-update', name: 'FileUpdate',
component: () => import('@/views/file/file-update.vue')
} ]
}
(二) Vue 项目目录规范
2.2.1 基础
vue 项目中的所有命名一定要与后端命名统一。
比如权限：后端 privilege, 前端无论 router , store, api 等都必须使用 privielege 单词！
2.2.2 使用 Vue-cli 脚手架
使用 vue-cli3 来初始化项目，项目名按照上面的命名规范。
2.2.3 目录说明
目录名按照上面的命名规范，其中 components 组件用大写驼峰，其余除 components 组件目录外的所有目录均使用 kebab-case 命名。
src源码目录
| |-- api | 所有api接口 |
|---|---|
| |-- assets | 静态资源，images, icons, styles等 |
| |-- components | 公用组件 |
| |-- config | 配置信息 |
| |-- constants | 常量信息，项目所有Enum,全局常量等 |
| |-- directives | 自定义指令 |
| |-- filters | 过滤器，全局工具 |
| |-- datas | 模拟数据，临时存放 |
|-- storevuex, 统一管理 |-- themes自定义样式主题
|-- views视图目录
| | | |-- role | role模块名 |
|---|---|---|
| | | |-- |-- role-list.vue | role列表页面 |
| | | |-- |-- role-add.vue | role新建页面 |
| | | |-- |-- role-update.vue | role更新页面 |
| | | |-- |-- index.less | role模块样式 |
| | | |-- |-- components | role模块通用组件文件夹 |
| | | |-- employee | employee模块 |
- api 目录
文件、变量命名要与后端保持一致。
此目录对应后端 API 接口，按照后端一个 controller 一个 api js 文件。若项目较大时，可以按照业务划分子目录，并与后端保持一致。
api 中的方法名字要与后端 api url 尽量保持语义高度一致性。
对于 api 中的每个方法要添加注释，注释与后端 swagger 文档保持一致。
正例：
后端 url： EmployeeController.java
/employee/add /employee/delete/{id}
/employee/update
前端： employee.js
// 添加员工 addEmployee: (data) => {
return postAxios('/employee/add', data)
}, // 更新员工信息
updateEmployee: (data) => { return postAxios('/employee/update', data)
}, // 删除员工
deleteEmployee: (employeeId) => { return postAxios('/employee/delete/' + employeeId)
},
assets 为静态资源，里面存放 images, styles, icons 等静态资源，静态资源命名格式为 kebab-case
|assets |-- icons
|-- images ||-- background-color.png
||-- upload-header.png |-- styles
- components 目录
此目录应按照组件进行目录划分，目录命名为 KebabCase，组件命名规则也为 KebabCase
|components |-- error-log
||-- index.vue ||-- index.less
|-- markdown-editor ||-- index.vue
||-- index.js |-- kebab-case
- constants 目录
此目录存放项目所有常量，如果常量在 vue 中使用，请使用 vue-enum 插件 (https://www.npmjs.com/package/vue-enum)
目录结构：
|constants |-- index.js
|-- role.js |-- employee.js
例子： employee.js
export const EMPLOYEE_STATUS = {