Cms-client-copy-example-scaffolds NPM

ZCMS 3.0

ZCMS2.4之后的升级版本，不再维护原来的前端UI框架，对后端UI部分亦作调整。实现完全的前后端分离。前端使用用Vue及ElementUI框架，后端实现RESTful规范的接口与前端进行交互。

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

分步计划：

700多个zhtml页面700多个后端接口，用vue实现对的功能，然后完成对应的后端接口。
编辑器、专题可视化、工作流编辑器等前端工作量较多的功能的使用HTML5+Vue实现。
以稿件为中心的操作方式对界面、交互的调整。
代码重构，微服务拆分。
手机端、微信端实现。
其他功能增减。

开发流程：

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

注意事项

JS风格使用JavaScript Standard Style，建议使用VSCode作为js/vue的编辑器，并安装以下插件EditorConfig for VSCode , Prettier-Standard - JavaScript formatter , ESLint , stylefmt , Vetur。并且vscode的配置里要加下面的命令，防止格式化时自动加分号。 "prettier.singleQuote": true, "prettier.semi": false,
.eslintrc里要配置使用standard风格： {"extends": "stndard"}
在开发界面时使用ElementUI提供的栅格系统（24列），对界面进行响应式布局，以便移动端访问。
ZCMS3.0的界面布局参考ZCMS2.4扁平风格，因为使用第三方控件库，所以不要求界面完全相同，但要布局类似（主要是控件的位置，和控件间的留白）。
不要使用ElementUI提供的图标组件，使用Font Awesome 图标。
后端接口符合RESTful规范
注意后端返回前端的数据，字段名同数据库中的字段名，并转为小写字母开头的驼峰式命名（2017年11月底对框架3.0作的调整，用 java.beans.Introspector.decapitalize 方法处理了字段名），构造mock数据时也要注意这一点。
工程编译时，src目录下的lib、assets目录下的文件会被直接复制到dist目录下。
为了便于维护，对话框、页签等如果里面的内容比较多（超过30行），要独立成vue组件，尽量不要让一个vue组件的代码太多（超过500行超过20K）,尽量把vue文件里的js移到单独的文件，便于使用编辑器的js校验/js格式化功能。vue文件中css代码行数较多时（超过50行），亦可将css移到单独的css文件。模板部分要保持在vue文件里，以使用Vetur插件的模板语法校验功能。
从后台请求的数据有分页的情况下，Request参数的约定：pageIndex 第几页（从0开始）；pageSize 每页返回多少行。Response中返回数据除了有列表外，还要有total供分页条显示总记录数。特定的api也可以支持 startIndex 从第几行记录开始,count 返回多少行记录。
因为ElementUI 2.3.4 对 pagination.js 的调整，使之翻页条初始化时会翻到第1页，需要重新封装有翻页条的表格，在此之前不要升级ElementUI。

浏览器兼容性要求

IE9+（支持Vue2 不支持MutationObserver）能使用基本功能（专题设计、工作流设计不能用）
IE11+（支持MutationObserver 支持Promise等ES6特性；不支持箭头函数等ES6特性、不支持录音，不支持IndexedDB）/Chrome45+（支持Vue2 支持MutationObserver 支持File；不支持ES6、不支持录音）/Firefox52+，主要功能能使用（专题设计不能用）
Chrome54+/Firefox58+（支持ES6 支持async等ES7特性），所有功能可以使用

目录说明

目录结构类似 https://github.com/kenberkeley/vue-demo/tree/master/src 但有简化、调整。

static
├─lib                      第三方库，供页面用<script>引入，不会编译，直接复制到发布目录
│      vue.min.js
│      vue-router.min.js
│      axios.min.js
│      ......
├─assets                   资源目录，不会编译，直接复制到发布目录
│  ├─css                   公共样式及第三方样式库，页面用<link>引入
│  ├─fonts                 图标字体
│  └─images                图片
src
│  app.html                主入口静态页
│  app.js                  主入口js
│  login.html              登录页静态页
│  login.js                登录页js
│
├─config                   一些全局配置
├─router                   路由配置
├─directives               自定义指令
├─filters                  自定义过滤器
├─mixins                   公共mixins
├─common                   公共js工具方法/类
│      util.js               工具类
│      ......
├─components               公共组件
│      toolbar.vue
│      ......
└─views                    所有页面视图
   │   app.vue                app主视图组件
   │
   ├─workspace                对应一级菜单“我的工作台”
   │      ......
   ├─plugins                  对应一级菜单“功能组件”
   │  ├─components            “功能组件”模块下各子模块的共用组件
   │  ├─mixins                “功能组件”模块下各子模块的共用mixins
   │  └─mock                  mock数据目录
   │  ............
   ├─member                   对应一级菜单“会员管理”
   │  ├─components            “会员管理”模块下各子模块的共用组件
   │  ├─mixins                “会员管理”模块下各子模块的共用mixins
   │  └─mock                  mock数据目录
   │  ............
   └─error                    404、505等错误提示视图

开发与构建命令

建议使用yarn最新版本，下载地址 https://yarnpkg.com/latest.msi 建议使用淘宝的npm仓库镜像，安装npm包速度更快：

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

# 安装依赖
yarn install

# 进入开发模式，启动前台应用，localhost:3000 。监听vue文件改动自动刷新浏览器
yarn run dev

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

# 构建文件到发布目录(绝对路径,方便发布cms-server目录)
copy .\dist\ E:\output

链接

JavaScript Standard 代码规范 https://github.com/standard/standard/blob/master/docs/README-zhcn.md

VUE 2 文档 https://cn.vuejs.org/v2/api/

Vue Router 2 文档 https://router.vuejs.org/zh-cn/

Element-UI 文档 https://element.eleme.cn/2.3/#/zh-CN/component/layout

axios 介绍 https://github.com/mzabriskie/axios/blob/master/README.md

Font Awesome 4.x 图标 ~~http://fontawesome.io/icons/~~ https://www.thinkcmf.com/font/font_awesome/icons.html

Swagger 文档
https://swagger.io/docs/specification/basic-structure/