前端开发 前端工程说明

前端工程说明

1. one/one-ui 文件就是前端工程。
2. 对vue-cli生成的默认工程进行了一定程度的改造。
   • 支持多页面：one-ui/src/module 下面的每一个文件夹就是一个单独的页面。
   • 优化了编译速度以及编译出来的文件大小
3. 前端UI使用的是 AdminLTE
4. 部分复杂的组件使用了 Element UI 的组件

工程文件结构

前端项目的文件结构如下

├─assets
│
├─common
│  ├─components
│  ├─directives
│  ├─filters
│  ├─mixins
│  ├─validator
│  └─utils
│
└─module
    ├─account
    ├─index
    │  ├─router
    │  ├─views
    │  │  ├─layout
    │  │  ├─personal
    │  │  │  ├─common
    │  │  ├─system
    │  │  │  ├─area
    │  │  │  ├─dict
    │  │  │  ├─log
    │  │  │  ├─menu
    │  │  │  ├─modal
    │  │  │  ├─office
    │  │  │  ├─role
    │  │  └─user
    │  │      ├─common
    │  │      └─modal
    │  └─vuex
    │      ├─setting
    │      └─system
    └─login

common文件

用于存放所有全局组件、通用工具类、初始化代码等

• components文件：存放公共组件，所有公共组件统一在common/components/index.js里面注册为全局组件
• directives文件：存放所有的自定义directive
• mixins文件：存放所有的自定义mixin
• filters文件：存放所有的自定义filter
• validator文件：存放所有的自定义验证器
• utils文件：存放一些JS工具类

module文件

每一个相对独立的功能建议拆分开，在router、views、vuex、api下面的单独建立文件夹来放置该功能对应的代码 module下面每个文件夹是一个模块，每个模块就相当于vue-cli中的每个单页应用。

module文件结构

moduleName.html、moduleName.vue、moduleName.js，这三个文件是该模块的入口页面、组件以及js文件。

• router：用于存放该模块下面的路由
• views：用于存放该模块下面的所有Vue业务组件
• vuex：用于存放该模块下面的Store
• api: 用于存放所有与后端交互的API（项目的中心是index模块，故API都汇总到index模块下的api中，其它模块没有单独列出）

router

存放整个模块的路由

views

存放整个模块的页面

vuex

存放整个模块的状态

api

存放整个模块与后端的交互API

login页面

对应login.html页面，仅提供登录功能

acount页面

对应account.html页面，提供账户的一些需要外部访问的功能，比如账号注册，密码重置等。

index页面

对应index.html页面，提供所有系统登录后可访问的功能。 这个模块是系统的重心，基本上所有的业务界面都在这个模块

组件命名

组件命名规范

1. 列表类：XXXXList.vue，路由：/xxxx/list
2. 添加类：XXXXAdd.vue，路由：/xxxx/add
3. 编辑类：XXXXEdit.vue，路由：/xxxx/:id/edit
   • 如果需要编辑的信息很多，需要分组件，再单独建立一个edit文件夹，用来存放edit对应的组件
4. 查看类：XXXXView，路由：/xxxx/:id/view
   • 如果需要查看的信息很多，需要分组件，再单独建立一个view文件夹，用来存放view对应的组件
5. Modal：统一以Modal结尾。
   • 选择类的以Select开头，添加类的以Add开头，修改类的以Edit开头 比如：SelectUserModal.vue，AddUserModal.vue，
   • 如果modal可能是个公用的，放到该业务模块的common文件夹下面。如果不是公用的，放在使用的地方即可。

命名示例

简单模块示例

以用户（user）模块为例：

组件	路由
user/UserList.vue	/user/list
user/UserAdd.vue	/user/add
user/UserEdit.vue	/user/:id/edit
user/UserView.vue	/user/:id/view

复杂模块示例

组件	路由
user/list/UserList.vue	/user/list
user/list/UserQueryCondition.vue	查询条件组件
user/edit/UserAdd.vue	/user/add
user/edit/UserEdit.vue	/user/:id/edit
user/eidt/form/XXXX.vue	编辑页面的细分组件
user/view/UserView.vue	/user/:id/view
user/view/form/xxxx.vue	详情页面的细分组件