基于Vue的前后端分离开发注意事项-泽元知识库

运用到的工具、框架或库：

开发流程：

使用脚手架工具创建前端工程、后端工程，配置数据库，导入示例数据。
根据项目实际需求，配置路由和菜单，准备各路由所对应的vue文件，vue文件内容为空白，待分配给项目成员实现。
在mock目录下准备mock数据，设计好数据结构（控件需要的数据结构）和字段名（最好同数据库中表结构字段名，用 java.beans.Introspector.decapitalize 方法处理一下）
实现vue文件的界面部分，使用axios-mock-adapter来拦截ajax请求，返回mock数据。
后端实现RESTful接口，并维护接口文档（在doc目录下维护raml格式接口文档或使用 http://apizza.cc 在线文档服务）
前端取消axios-mock-adapter拦截，调试后端接口。

注意事项

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,
在开发界面时使用ElementUI提供的栅格系统（24列），对界面进行响应式布局，以便移动端访问。
ZCMS3.0的界面布局参考ZCMS2.4扁平风格，因为使用第三方控件库，所以不要求界面完全相同，但要布局类似（主要是控件的位置，和控件间的留白）。
不要使用ElementUI提供的图标组件，使用Font Awesome 图标。
后端接口符合RESTful规范
注意后端返回前端的数据，字段名同数据库中的字段名，并转为小写字母开头的驼峰式命名（2017年11月底对框架3.0作的调整，用 java.beans.Introspector.decapitalize 方法处理了字段名），构造mock数据时也要注意这一点。
工程编译时，source目录下的lib、assets目录下的文件会被直接复制到dist目录下。
不要提交node_modules和dist目录到svn工程里
写接口的同事可维护raml格式接口文档，并用raml2html生成html格式接口文档（也可以使用 http://apizza.cc 在线文档服务）
测试发现vue-loader 13.x不能正常编译vue文件，路由配置的视图载不进来，还没有找到原因，所以暂时用 vue-loader 12.2.2。如要升级vue-loader，一定要先作测试确认能正常编译vue文件，路由配置的视图能载入进来。
为了便于维护，对话框、页签等如果里面的内容比较多（超过30行），要独立成vue组件，尽量不要让一个vue组件的代码太多（超过500行超过20K）,尽量把vue文件里的js移到单独的文件，便于使用编辑器的js校验/js格式化功能。vue文件中css代码行数较多时（超过50行），亦可将css移到单独的css文件。模板部分要保持在vue文件里，以使用Vetur插件的模板语法校验功能。
从后台请求的数据有分页的情况下，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                      第三方库，供页面用<script>引入，不会编译，直接复制到发布目录
│      vue.min.js
│      vue-router.min.js
│      axios.min.js
│      ......
├─assets                   资源目录，不会编译，直接复制到发布目录
│  ├─css                   公共样式及第三方样式库，页面用<link>引入
│  ├─fonts                 图标字体
│  └─images                图片
└─views                    所有页面视图
   │   app.vue                app主视图组件
   │
   ├─workspace                对应一级菜单“我的工作台”
   │      ......
   ├─plugins                  对应一级菜单“功能组件”
   │      ......
   ├─member                   对应一级菜单“会员管理”
   │      ......
   ├─platform                 对应一级菜单“系统管理”
   │  ├─mock                  “系统管理”模块下各子模块的mock数据配置
   │  ├─components            “系统管理”模块下各子模块的共用组件
   │  ├─mixins                “系统管理”模块下各子模块的共用mixins
   │  └─store                 “系统管理”模块下各子模块的共用状态管理
   │      index.vue              “系统管理”主视图组件
   │      systemInfo.vue         对应二级菜单“系统信息”
   │      branch.vue             对应二级菜单“组织机构”
   │      role.vue               对应二级菜单“角色管理”
   │      user.vue               对应二级菜单“用户管理”
   │      config.vue             对应二级菜单“配置项管理”
   │      menu.vue               对应二级菜单“菜单管理”
   │      plugin.vue             对应二级菜单“插件管理”
   │      backup.vue             对应二级菜单“数据备份”
   │      log.vue                对应二级菜单“系统日志”
   │      ......
   └─error                    404、505等错误提示视图

开发与构建命令

建议使用npm5或以上版本，建议使用淘宝的npm仓库镜像，安装npm包速度更快：

# 更新npm到最新版   
npm install npm@latest -g

# 使用淘宝的npm仓库镜像   
npm config set registry https://registry.npm.taobao.org

# 安装依赖   
npm install

# 进入开发模式 
npm run dev

# 构建文件到dist目录供发布  
npm run build

# 安装 api-designer 到全局   
npm install -g api-designer

# 使用 api-designer 编辑raml格式接口文档，编辑时是暂存在浏览器本地缓存中的，需要导出或复制到工程根目录下API.raml文件
api-designer

# 安装 raml2html 到全局   
npm install -g raml2html

# 构建raml格式接口文档为html格式接口文档
raml2html API.raml -o API.html