外观

本页目录

框架设计 ​

使用高版本Vue-cli脚手架：使用vue-cli4.0版本以上来初始化项目，保持项目目录简洁明了 参考

项目结构 ​

基于vue-cli2脚手架 ​

text
├─build
|  ├─build.js         ----------- 生产环境构建代码
|  ├─check-version.js ----------- 检查node、npm等版本
|  ├─utils.js         ----------- 构建工具相关
|  ├─vue-loader.conf.js   ------- webpack loader配置
|  ├─webpack.base.conf.js ------- webpack基础配置
|  ├─webpack.dev.conf.js  ------- webpack开发环境配置,构建开发本地服务器
|  ├─webpack.prod.conf.js ------- webpack生产环境配置
|
├─config
|  ├─dev.env.js        ----------- 开发环境配置
|  ├─index.js          ----------- 基础配置
|  ├─test.env.js       ----------- 测试环境配置
|  ├─pre.env.js        ----------- 预生产环境配置
|  ├─pro.env.js        ----------- 生产环境配置
|
├─dist
|
├─node_modules
|
├─src
|  ├─assets        ----------- 资源
|  |     ├─iconfont       ----------- 字体图标
|  |     ├─images         ----------- 图片
|  |         ├─back       ----------- 背景图片
|  |         ├─banner     ----------- banner图
|  |         ├─default    ----------- 默认图片
|  |         ├─figure     ----------- 配图
|  |         ├─icon       ----------- 图标
|  |         ├─logo       ----------- logo
|  |         ├─nodata     ----------- 无数据图
|  |         ├─other      ----------- 其他图片
|  |     ├─sass    ----------- 样式
|  |         ├─global.scss ---------- 通用样式
|  |         ├─icon.scss   ---------- 图标样式
|  |         ├─main.scss   ---------- 项目公共样式
|  |         ├─reset.scss  ---------- 初始化样式
|  |         ├─sass-index.scss ------ 样式输出
|  |         ├─variable.scss  ------- 样式变量
|  |
|  ├─components    ----------- 业务组件
|  |
|  ├─router        ----------- 路由
|  |
|  ├─request       ----------- 请求
|  |     ├─apis.js        ----------- 接口索引
|  |     ├─index.js       ----------- 请求封装、异常处理
|  |
|  ├─store         ----------- vuex数据状态管理（存储全局变量）
|  |     ├─actions.js     ----------- 异步更改状态
|  |     ├─getters.js     ----------- state派生状态
|  |     ├─index.js       ----------- vuex初始化 + vuex-persistedstate数据持久化
|  |     ├─mutation-types.js -------- 更改状态方法名管理
|  |     ├─mutation.js    ----------- 更改状态
|  |     ├─state.js       ----------- 单一状态树
|  |
|  ├─utils         ----------- 公共方法
|  |
|  ├─views         ----------- 视图
|  |
|  ├─App.vue
|  ├─main.js
|
├─static           ----------- 静态文件， 比如一些图片，json数据等
|
├─.babelrc         ----------- babel6配置文件，ES6语法编译等配置
├─.editorconfig    ----------- 定义代码格式
├─.eslintignore    ----------- eslint检测代码忽略的文件（夹）
├─.eslintrc.js     ----------- 定义eslint的plugins,extends,rules
├─.gitignore       ----------- git上传需要忽略的文件格式
├─.postcsssrc      ----------- postcss配置文件
├─package.json     ----------- 项目信息、项目依赖管理
├─README.md        ----------- 项目文档（简介、运行步骤、注意事项）
├─...

基于vue-cli3脚手架 ​

text
├─dockerfiles      ----------- 镜像脚本（主要用于项目部署，jenkins打包+镜像容器部署）
|  ├─dist             ----------- 项目构建的包
|  ├─Dockerfile       ----------- 镜像脚本
|  ├─run.sh           ----------- 运行时脚本，主要用于环境变量配置
|
├─node_modules
|
├─public
|  ├─favicon.ico      ----------- 浏览器标签图标
|  ├─index.html       ----------- 页面模板（单页面只有一个，多页面要分别建页面模板）
|
├─src
|  ├─assets           ----------- 图片、样式等资源
|  ├─components       ----------- 组件
|  ├─plugins          ----------- 一些类库的封装，如axios
|  ├─router           ----------- 路由
|  ├─store            ----------- vuex数据状态管理（存储全局变量）
|  |     ├─modules        ----------- 数据分模块存储
|  |     ├─index.js       ----------- vuex初始化 + vuex-persistedstate数据持久化
|  |
|  ├─views            ----------- 视图
|
|  ├─apis.js          ----------- 接口索引
|  ├─App.vue          
|  ├─main.js          
|  ├─utils.js         ----------- 公共方法
|
├─.env.development    ----------- 开发环境变量
├─.env.production     ----------- 生产环境变量
├─.gitignore          ----------- git上传需要忽略的文件格式
├─babel.config.js     ----------- babel7配置文件
├─package.json        ----------- 项目信息、项目依赖管理
├─README.md           ----------- 项目文档（简介、运行步骤、注意事项）
├─vue.config.js       ----------- 开发构建配置
├─...

基于vue-cli4脚手架 ​

text
├─dockerfiles      ----------- 镜像脚本（主要用于项目部署，jenkins打包+镜像容器部署）
|  ├─dist             ----------- 项目构建的包
|  ├─Dockerfile       ----------- 镜像脚本
|  ├─run.sh           ----------- 运行时脚本，主要用于环境变量配置
|
├─node_modules
|
├─public
|  ├─favicon.ico      ----------- 浏览器标签图标
|  ├─index.html       ----------- 页面模板（单页面只有一个，多页面要分别建页面模板）
|
├─src
|  ├─api           -----------  api接口
|  ├─assets           ----------- 图片、样式等资源
|  ├─components       ----------- 组件
|  |     ├─HelloWorld.vue    ----------- HelloWorld 组件
|  ├─config          ----------- 配置信息
|  ├─constants          ----------- 常量信息
|  ├─directives          ----------- 自定义指令
|  ├─filters          ----------- 过滤器，全局工具
|  ├─datas          ----------- 模拟数据，临时存放
|  ├─lib          ----------- 外部引用的插件存放及修改文件
|  ├─mock          ----------- 模拟接口，临时存放
|  ├─plugins          ----------- 一些类库的封装，如axios
|  ├─router           ----------- 路由
|  ├─store            ----------- vuex数据状态管理（存储全局变量）
|  |     ├─modules        ----------- 数据分模块存储
|  |     ├─index.js       ----------- vuex初始化 + vuex-persistedstate数据持久化
|  |
|  ├─themes            ----------- 自定义样式主题
|  ├─views            ----------- 视图
|  |     ├─role        ----------- role模块
|  |     |     ├─role-list.vue         ----------- role 列表页面
|  |     |     ├─role-add.vue          ----------- role 添加页面
|  |     |     ├─role-index.scss       ----------- role 样式
|  |     |     ├─components            ----------- role 组件文件夹
| 
|  ├─App.vue          
|  ├─main.js          
|  ├─utils.js         ----------- 公共方法
|
├─.env.development    ----------- 开发环境变量
├─.env.production     ----------- 生产环境变量
├─.gitignore          ----------- git上传需要忽略的文件格式
├─babel.config.js     ----------- babel7配置文件
├─package.json        ----------- 项目信息、项目依赖管理
├─README.md           ----------- 项目文档（简介、运行步骤、注意事项）
├─vue.config.js       ----------- 开发构建配置
├─...

目录介绍 ​

api目录 ​

  • 文件、变量命名要与后端保持一致。
  • 此目录对应后端 API 接口，按照后端一个 controller 一个 api js 文件。若项目较大时，可以按照业务划分子目录，并与后端保持一致。
  • api 中的方法名字要与后端 api url 尽量保持语义高度一致性。
  • 对于 api 中的每个方法要添加注释，注释与后端 swagger文档保持一致。

例子：

js
/**
  * 后端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目录 ​

assets为静态资源，里面存放 images, styles, icons等静态资源，静态资源命名格式为 kebab-case

md
assets
|-- icons
|-- images
|   |-- background-color.png
|   |-- upload-header.png
|-- scripts
|-- styles

components目录 ​

此目录应按照组件进行目录划分，目录命名为KebabCase，组件命名规则也为 KebabCase。保持内部组件都有一个文件夹，并且为大驼峰命名。文件夹内有index.vue，进行内容汇总和输出。

md
components/
|-  SvgIcon
|-  index.vue
|-  svg-handle.vue

views目录 ​

命名要与后端、router、api等保持一致； 文件夹和文件都为中划线分隔。其中文件夹尽量为单个单词。和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

  • 基础组件文件名为 base 开头，使用完整单词而不是缩写。
md
views/
|-  conmon
|- base-button.vue
|- base-table.vue
  • 其他组件，尽量为模块或者栏目新建一个目录。除非仅有一个文件，而且无任何关联的js，vue等内容。当有公共内容的时候必须新建conmon文件夹，放置vue等文件
md
views/
|-  conmon
|- header.vue                             公共头部
|- footer.vue                              公共底部
|-  role
    |-- role-index.vue                     role首页                  
    |-- role-list.vue                        role列表页面
    |-- role-add.vue                       role新建页面  
    |-- index.less                            role模块样式
    |-- components                         role模块通用组件文件夹
    |-- role-header.vue              role头部组件
    |-- role-modal.vue               role弹出框组件
    |-- role-update                           role更新页面文件夹
role-update-index.vue
role-update-list.vue
    |-- employee                           employee模块
    |-- behavior-log                      行为日志log模块
    |-- index.vue                          整个项目首页（无任何关联文件的情况）
    |-- 404.vue                            404页面
  • 其如果一个vue项目内必须出现多个用户端，或者相互无任何关联的大模块情况，可以另外和views平级新建文件夹，并命名为views横杠加模块类型或名称。
md
views-mobile/
    |- conmon
    |- header.vue          公共头部
    |- footer.vue          公共底部
    |- role
    |- role-index.vue      role首页
    |- role-list.vue       role列表页面

constants目录 ​

此目录存放项目所有常量，如果常量在 vue 中使用，请使用 vue-enum 插件(https://www.npmjs.com/package/vue-enum) 目录结构：

md
|constants
|-- index.js
|-- role.js
|-- employee.js

例子： employee.js

javascript
export const EMPLOYEE_STATUS = {
  NORMAL: {
    value: 1,
    desc: '正常'
  },
  DISABLED: {
    value: 1,
    desc: '禁用'
  }
};
export const EMPLOYEE_ACCOUNT_TYPE = {
  QQ: {
    value: 1,
    desc: 'QQ登录'
  },
  DINGDING: {
    value: 3,
    desc: '钉钉登录'
  }
};
export default {
  EMPLOYEE_STATUS,
  EMPLOYEE_ACCOUNT_TYPE
};

router与 store 目录 ​

这两个目录一定要将业务进行拆分，不能放到一个 js 文件里。 router 尽量按照 views 中的结构保持一致 store 按照业务进行拆分不同的 js 文件

在 GitHub 上编辑此页

上次更新: