### 运用到的工具、框架或库： * **[VueJS 2.x](https://github.com/vuejs/vue)** * [Vue-router](https://github.com/vuejs/vue-router) * [axios](https://github.com/mzabriskie/axios) * **[Element UI 2.x](https://github.com/ElemeFE/element)** * [Babel](https://babeljs.io/) * [Webpack 3](https://github.com/webpack/webpack) * [gulp](https://gulpjs.com/) ## 开发流程： 1. 使用脚手架工具创建前端工程、后端工程，配置数据库，导入示例数据。 1. 根据项目实际需求，配置路由和菜单，准备各路由所对应的vue文件，vue文件内容为空白，待分配给项目成员实现。 1. 在mock目录下准备mock数据，设计好数据结构（控件需要的数据结构）和字段名（最好同数据库中表结构字段名，用 java.beans.Introspector.decapitalize 方法处理一下） 1. 实现vue文件的界面部分，使用axios-mock-adapter来拦截ajax请求，返回mock数据。 1. 后端实现RESTful接口，并维护接口文档（在doc目录下维护raml格式接口文档或使用 http://apizza.cc 在线文档服务） 1. 前端取消axios-mock-adapter拦截，调试后端接口。 ## 注意事项 1. JS风格使用`JavaScript Standard Style`，建议使用**VSCode**作为js/vue的编辑器，并安装以下插件`EditorConfig for VSCode` , `Prettier-Standard - JavaScript formatter` , `JavaScript Standard Style` , `stylefmt` , `Vetur`，注意不要再安装其他JS格式化工具以免冲突。 并且vscode的配置里要加下面的命令，防止格式化时自动加分号。 ` "prettier.singleQuote": true,` ` "prettier.semi": false,` 1. 在开发界面时使用ElementUI提供的栅格系统（24列），对界面进行响应式布局，以便移动端访问。 1. ZCMS3.0的界面布局参考ZCMS2.4扁平风格，因为使用第三方控件库，所以不要求界面完全相同，但要布局类似（主要是控件的位置，和控件间的留白）。 1. 不要使用ElementUI提供的图标组件，使用Font Awesome 图标。 1. 后端接口符合RESTful规范 1. 注意后端返回前端的数据，字段名同数据库中的字段名，并转为小写字母开头的驼峰式命名（2017年11月底对框架3.0作的调整，用 java.beans.Introspector.decapitalize 方法处理了字段名），构造mock数据时也要注意这一点。 1. 工程编译时，`source`目录下的`lib`、`assets`目录下的文件会被直接复制到`dist`目录下。 1. 不要提交`node_modules`和`dist`目录到svn工程里 1. 写接口的同事可维护raml格式接口文档，并用raml2html生成html格式接口文档（也可以使用 http://apizza.cc 在线文档服务） 1. 测试发现`vue-loader 13.x`不能正常编译vue文件，路由配置的视图载不进来，还没有找到原因，所以暂时用 `vue-loader 12.2.2`。如要升级`vue-loader`，一定要先作测试确认能正常编译vue文件，路由配置的视图能载入进来。 1. 为了便于维护，对话框、页签等如果里面的内容比较多（超过30行），要独立成vue组件，尽量不要让一个vue组件的代码太多（超过500行超过20K）,尽量把vue文件里的js移到单独的文件，便于使用编辑器的js校验/js格式化功能。vue文件中css代码行数较多时（超过50行），亦可将css移到单独的css文件。模板部分要保持在vue文件里，以使用Vetur插件的模板语法校验功能。 1. 从后台请求的数据有分页的情况下，Request参数的约定：`pageIndex` 第几页（从第1页开始）；`pageSize` 每页返回多少行。Response中返回数据除了有列表外，还要有`total`供分页条显示总记录数。特定的api也可以支持 `startIndex` 从第几行记录开始,`count` 返回多少行记录。 ## 目录说明 目录结构类似 https://github.com/kenberkeley/vue-demo/tree/master/src 但有简化、调整。 ``` source │ index.html 主入口静态页 │ app.js 主入口js │ login.html 登录页静态页 │ login.js 登录页js │ config.js 一些全局配置 │ ├─router 路由配置 ├─directives 自定义指令 ├─filters 自定义过滤器 ├─mixins 公共mixins ├─store 公共状态管理 ├─common 公共js工具方法/类 │ util.js 工具类 │ ...... ├─components 公共组件 │ toolbar.vue │ ...... ├─lib 第三方库，供页面用