csit-vue v0.0.2

Build Setup

# install  yarn
npm install -g yarn

# install dependencies
yarn install

# run
yarn run dev

# build
yarn run build

# build for production and view the bundle analyzer report
yarn run build --report

项目说明

该工程是最简单且基于Air进行配置的前端工程.包括基本的登录、token保存及一个基于HUI的简单demo

使用技术: Vue/Vue-router(前端路由管理)/axios(向服务端发送请求)/

文件目录说明
build --- 前端工程webpack构建设置
config --- 前端工程构建参数设置(通过index.js配置项目开发运行端口等及打包相关配置)
src --- 项目源码
    -doc -当前组件说明--临时后续会有指南替代
    -api --- 服务端接口请求配置
      --moduleName ---模块名
        ---xxxApi --- 页面名称
    -assets --- 项目静态文件,图片等
    -components ---项目自定义组件
       -ci-xxx
          -index.vue   --demo
          -index.less  --样式抽取出来
          -index.js    --导出
    -mock ---mock模拟数据（真实交互环境可以不需要）
    -model --- 模型管理（对应view中需要的配置，form表单，校验等）
      --moduleName  --- 模块名
        ---xxx --- 页面对应的模块
    -router --- 项目路由配置
    -style --- 项目样式文件
    -utils --- 项目公共方法文件
    -directives --- 项目自定义指令文件
    -mixins --- 项目混入文件
    -views --- 项目中各功能页
        --moduleName --- 模块名
           ---xxx ---页面
             ---index.vue  --具体的页面元素抽出来
             ---approve.vue
             ***********
    -app.vue --- 项目入口渲染页面
    -main.js --- 项目入口文件(创建整个项目的vue实例，并将router、hui等注入)
index.html --- 项目入口模板
package.json --- 项目的依赖配置、运行配置等
sysconfig.js --- 项目常用接口配置

2.命名规范

2.1 目录名称 目录名称一律小驼峰

2.2 文件名称 组件名称 一律大驼峰 其余文件一律小驼峰

2.3 模块名， 页面名称与后台对应

myWorkbench(我的工作台)
Cotrun(科创版)
ProRecord(项目档案)
InquireStatistics(查询统计)
DispatchOrg(派出机构)
SystemManage（系统管理）

2.4 与后台交互的api 文件名 业务+Api 例如 ：bpm/bpmApi.js

import {get, post} from '@/api/bizApi/commonUtil'
const moduleName = 'demo';
const baseUrl = "/iasis/" + moduleName+"/";

//后端请求映射
const urls = {
  "query": baseUrl + 'query',
  "add": baseUrl + 'addUser',
  "edit": baseUrl + 'edit',
  "delete": baseUrl + 'delete',
  "approve": baseUrl + 'delete'
}

//方法区
var businessNameDemoApi = {
  "queryUrl": urls.query,
  add(param) {
    return post(param,urls.add)
  },
  edit(param) {
    return post(param,urls.edit)
  },
  delete(param) {
    return post(param,urls.delete)
  }
}

export default businessNameDemoApi

说明：一些常规的异常等操作框架会处理，无需每个业务都去处理

2.5 model 业务名称+Model 例如：/bpm/bpmModel.js

var businessNameDemoModel = {
 //配置
   columns: [
    {
      title: "节点id",
      key: "id"
    },{
      title: "节点名称",
      key: "name"
    }],
  queryFrom:[

  ]
}
export default businessNameDemoModel