Vue+Typescript+ElementUI+Karma+MockJs PC前端规范

文件命名规范

api

       业务前缀+ kabeb-case +后缀.api.ts（dac-xxx-xxx.api.ts）    文件里面export多个函数

 

       函数规范：

1. 获取数据请求使用fetchXxx命名（如fetchFlights）
2. 操作请求使用动词开头（如submitOrder）
3. 尽量跟请求ui保持一致（如/domair/dacshopping/findflights的请求ui命名为fetchFlights）
4. 组件中必须有一个handle前缀的私有函数处理某个请求，如handleFetchXxx

 

内容展示：

const fetchFlights = (param: DacFlightQueryDto): AxiosPromise> => {

  return request('/domair/dacshopping/findflights', param)

}

 

views

       小驼峰目录

              综合代码：index.vue

              组件文件：index.comp.ts（可选）

              测试文件：index.spec.ts（可选）

              样式文件：index.scss（可选）

      

view类初始化

import { Component, Vue } from 'vue-property-decorator'



@Component({})

export default class OrderFill extends Vue {

}

 

 

画页面规范：

       先整体布局，再细节调整，整体优于细节。

少数相同情况下可以不严格遵守UI设计，先从代码可阅读性，可维护性出发，然后尽量满足UI设计。

尽量抽离使用三次及以上的代码作为业务内组件

 

样式变量命名规则

       全局变量使用 ‘$--’ 开头，并用kabeb-case

       局部变量使用 ‘$’ 开头，并用kabeb-case

 

样式class命名

使用当前类名的kabeb-case + __(两个下划线) + kabeb-case

 

mock目录放在最外层，跟src同级

mock文件命名

       跟api的命名相呼应（如dac-xxx-xxx.api.ts为dac-xxx-xxx.mock.ts），所在目录为业务名（如flight）

 

组件放置位置

1. 某个业务的多个页面使用的组件放在@/components中
2. 某个页面使用的组件放在当前目录下的./components中，往上追溯到最大模块目录。
3. 多个业务使用的组件放在@Base/components中

 

 

model文件命名（尽可能跟controller的dto命名加注释一致，如不能，则根据swagger文档新建dto，后面有可能的话我会去加上注释并改正命名），业务前缀（首字母大写） + PascalCase + Dto （如DacCabinFeeLabelDto.ts）

 

页面布局和元素编排

       尽可能使用element-ui的布局方式结合组件使用，如el-row, el-col，通过使用element-ui自带变量改变整体样式。

 

 

 

技术要求：

       熟练掌握element-ui，热别是布局这一块，尽可能使用其组件，并尽可能全局控制样式(element-ui样式变量表不能直接改值，需要再我方变量中添加覆盖即可)。

       熟悉使用mockjs，用于拦截请求返回mock数据

       熟练使用lodash，使对象，数组，字符串等的操作变得简单便捷

       熟练使用karma，前端单元测试

 

 

Base

       业务无关或者多业务相关的内容才能放在其中

 

 

组件：Vue 自带函数不需要待修饰符，自定义函数一定需要待修饰符，内部使用必须用private修饰符，其它用public

 

 

Watch

       watch + 变量名