前端开发文档
技术选型
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/