# 前端开发文档

### 技术选型

    Vue mvvm框架

    Es6 ECMAScript 6.0

    Ans-ui Analysys-ui

    D3 可视化库图表库

    Jsplumb 连线插件库

    Lodash 高性能的 JavaScript 实用工具库

### 项目目录结构

`build` 打包及开发环境项目的一些webpack配置

`node_modules` 开发环境node依赖包

`src` 项目所需文件

`src => combo` 项目第三方资源本地化 `npm run combo`具体查看`build/combo.js`

`src => font` 字体图标库可访问 https://www.iconfont.cn 进行添加 注意：字体库用的自己的 二次开发需要重新引入自己的库 `src/sass/common/_font.scss`

`src => images` 公共图片存放

`src => js` js/vue

`src => lib` 公司内部组件（公司组件库开源后可删掉）

`src => sass` sass文件 一个页面对应一个sass文件

`src => view` 页面文件 一个页面对应一个html文件

    > 项目采用vue单页面应用(SPA)开发
    - 所有页面入口文件在 `src/js/conf/${对应页面文件名 => home}` 的 `index.js` 入口文件
    - 对应的sass文件则在 `src/sass/conf/${对应页面文件名 => home}/index.scss`
    - 对应的html文件则在 `src/view/${对应页面文件名 => home}/index.html`

公共模块及util `src/js/module`

`components` => 内部项目公共组件

`download` => 下载组件

`echarts` => 图表组件

`filter` => 过滤器和vue管道

`i18n` => 国际化

`io` => io请求封装 基于axios

`mixin` => vue mixin 公共部分 用于disabled操作

`permissions` => 权限操作

`util` => 工具

### 系统功能模块

首页 => `http://localhost:8888/#/home`

项目管理 => `http://localhost:8888/#/projects/list`

    | 项目首页
    | 工作流
      - 工作流定义
      - 工作流实例
      - 任务实例

资源管理 => `http://localhost:8888/#/resource/file`

    | 文件管理
    | UDF管理
      - 资源管理
      - 函数管理

数据源管理 => `http://localhost:8888/#/datasource/list`

安全中心 => `http://localhost:8888/#/security/tenant`

    | 租户管理
    | 用户管理
    | 告警组管理
      - master
      - worker

用户中心 => `http://localhost:8888/#/user/account`

#### 文档采用gitbook生成

中文文档 => `src/view/docs/zh_CN`

英文文档 => `src/view/docs/en_US`

## 路由和状态管理

项目 `src/js/conf/home` 下分为

`pages` => 路由指向页面目录

     路由地址对应的页面文件

`router` => 路由管理

    vue的路由器，在每个页面的入口文件index.js 都会注册进来 具体操作：https://router.vuejs.org/zh/

`store` => 状态管理

    每个路由对应的页面都有一个状态管理的文件 分为：

    actions => mapActions => https://vuex.vuejs.org/zh/guide/actions.html

    getters => mapGetters => https://vuex.vuejs.org/zh/guide/getters.html

    index => 入口

    mutations => mapMutations => https://vuex.vuejs.org/zh/guide/mutations.html

    state => mapState => https://vuex.vuejs.org/zh/guide/state.html

    具体操作：https://vuex.vuejs.org/zh/

## 规范

## 接口列表

## 扩展开发

# results matching ""

# No results matching ""