JunXian Sun

项目规范

基于ep框架，建议规范如下：

目录结构规范

  • 1，建议 mock数据统一在mock文件目录下，用于本地数据模拟，不要随便写。

    • Mockjs：https://github.com/nuysoft/Mock/wiki/Getting-Started。 avatar

  • 2，目录资源存放如下:

    /assets → 存放资源文件，包括图片、CSS文件和图标
/base →框架支撑代码，所以不要在里边堆mock数据呀。
/framework→框架代码
/store → Vuex，新增变量时，别乱命名，就照着里边的cope
/router → ep下的路由这里自动生成的文件修改了也会被覆盖的。
/utils → 工具类这里
/views→# 业务页面放在biz文件夹下
main.js → 入口文件转到init.js下了，引入第三方插件在init.js下
routerJson.json →这里配置路由
settings.json → 配置文件，比如白名单什么的...

  • 3，创建业务文件 → 在biz文件夹下新建二级文件夹（注意文件夹命名），存放每个模块的vue页面，约定不要嵌套过多的文件夹吧，嵌套最多三个。 如下：

    | views
    |-biz
        |-NuclearNote
            |-NuclearNoteAdd.vue

  • 4，utils文件夹下的公共方法。

    → 能用就用，要不然就是变成摆设了。

  • 5，base文件夹，入口文件内不要写业务内的静态code代码

    → 不要在initjs里放类似对应表的code

  • 6，公共组件统一放在components文件夹内

接口API

接口过多情况下，是否可以添加各自的api？ → 文件地址：src/api/xxx.json 例如：

//文件目录
  | src
      |-api
          |-api.json
          |-billDrc.json
          ...
          |-index.js
//index.js
  | index.js ↓

  import billDrc from './billDrc.json';

  let arrJson={
     "post": {
      ...api['post'],
      ...billDrc['post']
     } 
  }
export default arrJson

路由JSON

基于ep框架，路由配置在routerJson.json？

→ 文件地址：routerJson.json 例如：

 {
    "biz": {
        "/OrganizationInfo": {
            "name": "组织信息查询",
            "router": "Organization/OrganizationInfo"
        }
        ......
    }
}

数据请求

  • ep框架中：

        - 一般使用post('xx').then (json => {})
    - this.$post('xx').then (json => {})

  • 数字贸易(axios)例如:

    // 接口注释
export const resetPwd = (params) => {
    return http.Post('/user/resetPwd', params)
}
// 页面使用
import { platformDetailSelect } from "../api/index";
resetPwd(params).then(res => { })

ui组件/第三方插件

  • 1，ui组件： ep-ui优先，element-ui

    • ep-ui ：http://192.168.129.181:81/component/layout

    • element-ui ：https://element.eleme.cn/#/zh-CN/component/installation

  • 2，组件库引入（具体参考插件官网），例如：

    • 1,全局引入一般在main.js(ep框架的入口文件在src/base/init.js)
      import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);//暴露
    • 2,按需引入→避免体积太大
      import { Button } from 'element-ui';
Vue.use(Button)

  • 3，插件推荐：

    • 开发必备： vue devtools
    • 导入导出excel： Export2Excel ：http://www.swiper.com.cn/
    • 轮播图： Swiper ：http://www.swiper.com.cn/
    • 编辑器： vue-quill-editor：https://www.npmjs.com/package/vue-quill-editor
      • 如果很多个页面都需要用到，那就在入口文件里引入即可，全局引入后就不要在单文件里引入了。
      // require 
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
components: {
    quillEditor
    }
}
    • 图表： echarts 3.0 ：https:/www.echartsjs.com/zh/index.html
    • 其它： momentjs ：http://momentjs.cn/ → 作为参考

ep-ui常用组件

  • Form表单：验证不要使用定位在右边的提示（本身有bug就不要用了）。要使用以下正常的校验方式： avatar
  • 日期控件：
    <ep-date v-model="value"></ep-date>

其它待补充

← 补充 →