# 前端开发文档 ### 技术选型 ``` 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` ## 路由和状态管理 项目 `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/ ``` ## 规范 ## Vue规范 ##### 1.组件名 组件名为多个单词，并且用连接线（-）连接，避免与 HTML 标签冲突，并且结构更加清晰。 ``` // 正例 export default { name: 'page-article-item' } ``` ##### 2.组件文件 `src/js/module/components`项目内部公共组件书写文件夹名与文件名同名,公共组件内部所拆分的子组件与util工具都放置组件内部 `_source`文件夹里。 ``` └── components ├── header ├── header.vue └── _source └── nav.vue └── util.js ├── conditions ├── conditions.vue └── _source └── serach.vue └── util.js ``` ##### 3.Prop 定义 Prop 的时候应该始终以驼峰格式（camelCase）命名，在父组件赋值的时候使用连接线（-）。 这里遵循每个语言的特性，因为在 HTML 标记中对大小写是不敏感的，使用连接线更加友好；而在 JavaScript 中更自然的是驼峰命名。 ``` // Vue props: { articleStatus: Boolean } // HTML ``` Prop 的定义应该尽量详细的指定其类型、默认值和验证。 示例： ``` props: { attrM: Number, attrA: { type: String, required: true }, attrZ: { type: Object, // 数组/对象的默认值应该由一个工厂函数返回 default: function () { return { msg: '成就你我' } } }, attrE: { type: String, validator: function (v) { return !(['success', 'fail'].indexOf(v) === -1) } } } ``` ##### 4.v-for 在执行 v-for 遍历的时候，总是应该带上 key 值使更新 DOM 时渲染效率更高。 ``` ``` v-for 应该避免与 v-if 在同一个元素（`例如：
  • `）上使用，因为 v-for 的优先级比 v-if 更高，为了避免无效计算和渲染，应该尽量将 v-if 放到容器的父元素之上。 ``` ``` ##### 5.v-if / v-else-if / v-else 若同一组 v-if 逻辑控制中的元素逻辑相同，Vue 为了更高效的元素切换，会复用相同的部分，`例如：value`。为了避免复用带来的不合理效果，应该在同种元素上加上 key 做标识。 ```
    {{ mazeyData }}
    无数据
    ``` ##### 6.指令缩写 为了统一规范始终使用指令缩写，使用`v-bind`，`v-on`并没有什么不好，这里仅为了统一规范。 ``` ``` ##### 7.单文件组件的顶级元素顺序 样式后续都是打包在一个文件里，所有在单个vue文件中定义的样式，在别的文件里同类名的样式也是会生效的所有在创建一个组件前都会有个顶级类名 注意：项目内已经增加了sass插件，单个vue文件里可以直接书写sass语法 为了统一和便于阅读，应该按 `