estate-ui
依赖环境
node <= v14.18.1
Vue 集成开发环境。
参考资料:
- 流行的后台集成框架 PanJiaChen/vue-element-admin
- Angular 风格指南 angular/styleguide
- Vue 风格指南 vue/styleguide
- React 理念 react/thinking-in-react
简介
基于 [email protected],增加如下基本功能(后面是对应的说明文档或配置文件):
- UI 框架 element-ui - README
- 路由管理 vue-router - README
- 路由管理 vue-router - README
- HTTP 请求 axios - README
- 模拟数据 mockjs - README
- 强制代码校验 eslint + prettier - README
- SVG 图标库 vue-awesome - README
- 全局样式 - README
- 测试 - README
目录结构说明
estate-ui
- src - 主业务代码目录
- api - 数据的请求方法
- assets - 共用的静态资源
- components - 共用的组件
- layout - 主页的布局容器
- mock - 模拟接口数据
- plugins - 使用的插件
- router - 路由配置
- store - 全局的状态管理
- styles - 全局的样式配置
- utils - 工具函数存放目录
- views - 主业务的页面路径
- tests - 测试类目录
- main.js - 入口文件
- .env - 环境变量配置文件
- .eslintrc.js - eslint 配置文件
- .svnignore - svn 忽略文件
- .babel.config.js - babel 编译配置文件
- jest.config.js - jest 测试配置文件
- perttier.config.js - perttier 配置文件
- proxy.config.js - 开发服务器代理配置
- vue.config.js - vue-cli 的配置文件
注意事项
- element-ui 使用来按需加载,使用未注册的组件时,先到 src/plugins/element.js 文件中注册组件。
开发流程与规范
流程
- 根据原型图/设计图进行路由设计(不写代码,只是画出路由的草稿图)
- 根据原型图/设计图将页面进行组件的划分(简单的列出各组件之前的关系草稿图)
- 写路由配置与基础的入口组件(此时不带任何的业务)
- 依次按照“父组件,子组件”顺序编写基础的页面布局(先不写交互逻辑)
- 布局完成后,开始设计/思考组件数据存储/交互方式,如:
data
props
store
等 - 开始编写组件的交互逻辑(注意保持单一职责原则,考虑如何让组件间的关系解耦)
- 涉及到接口交互时,编写 mock 数据进行模拟交互
- 然后优化交互体验,增加一些过渡效果
- 最后进行与后端的接口联调,数据结构的调整等
规范
为了保护项目的可维护性,可扩展性以及高效的编码,编写方式务必保持一致。
以下规则不包含所有的规则,例如一些默认规则。
单一职责
对所有的组件,指令,过滤器,接口请求方法等应用单一职责原则(SRP)。
- 坚持每个组件或者模块只做一件事。
- 坚持把文件大小限制在 400 行以内。
- 坚持定义小函数,考虑在 75 行以内。
文件命名
保持不同类型的文件命名风格一致。
- 组件名使用多个单词,例如组件名带上该模块的前缀。
- 在描述性名字中,用横杠来分割单词。
- 尽量使用功能的特性去命名。
代码编写
JS
- 坚持使用大写驼峰来命名类。
- 坚持使用 const 声明变量。
- 坚持使用小写驼峰来命名属性与方法。
- 坚持将自定义的模块导入与第三方的模块导入中间空一行。
- 坚持在非头部的注释上面增加一行空行。
CSS
- 坚持使用类名去命名样式。
- 坚持使用公共的样式类,避免重复的样式属性。
- 坚持在每个组件使用一个容器类包含所有的子类。
- 坚持在父子组件之间不发生样式类名的重复。
建议 BEM 命名规范:理论上讲,每行 css 代码都只有一个选择器。
HTML
- 坚持考虑尽可能的扁平化布局。
- 坚持使用语义化的标签,而不是为了该标签的样式。
- 坚持将带计算逻辑的模版变量转换为
computed
或者 通用的filters
。 - 避免使用内联样式。
Vue 单文件
- 坚持以
template
,script
,style
顺序写组件。 - 坚持组件的
data
为函数,非对象。 - 坚持为
prop
的属性定义required
,validator
, 类型等详细信息。 - 坚持为
v-for
设置key
。 - 避免将
v-if
与v-for
用在一起。 - 坚持为组件的私有属性使用
$_
前缀。 - 坚持为组件的样式设置作用域。
代码提交
- 坚持在提交代码前校验代码,解决每一个警告。
- 坚持一次 commit 只进行一个功能的更改。
- 坚持使用
type(subtype): description
形式提交 commit,type
如下:feat
新增的功能chore
构建过程或辅助工具的变动refactor
重构(即不是新增功能,也不是修改 bug 的代码变动)style
修改格式,不影响逻辑fix
修复问题revert
回滚docs
编写文档test
测试类
开始
npm start
开启开发服务器npm run build
进行打包npm run build-analyzer
进行打包与体积分析npm run lint
运行代码校验npm run test
运行单元测试
开始开发
1.关于代理的相关配置
- 不能随意修改,有项目负责人修改
- 避免直接使用api本省的字符作为代理标识
2.关于config配置api请求路径
- 按目录结构编写config url配置文件
// 例子:
// createProcess就是views中的组件名称,
// 该组件对应的url都会配置到createProcess中,方便项目阅读
createProcess: {
land: {
query: GLOBAL.PROXY + '/registerDraftController/getLandPageList'
},
house: {
query: GLOBAL.PROXY + '/registerDraftController/getHouseLandPageList'
},
record: {
query: GLOBAL.PROXY + '/supplementTaskController/getBlPendingPageList'
}
},
3.关于api文件的编写
- config的引入
- 必须调用request
import request from '../../utils/request';
import config from '../../config/index';
const DraftApi = {
queryTD(param) {
return request({
url: config.URL_DEFAULT.createProcess.land.query,
method: 'get',
params: param
});
},
queryFC(param) {
return request({
url: config.URL_DEFAULT.createProcess.house.query,
method: 'get',
params: param
});
}
};
export default DraftApi;
4.关于语法检查
- 必须遵循语法检查,使用Webstrom、VsCode的可以配置,大多数编辑工具都可以配置,eslint配置,推荐webstrom
- 配置fix eslint problems, 百度即可
5.components中组件的介绍
5.1.e-table组件
- 基本功能
e-table自带分页器,基本可以满足estate-ui所的表格需求。
参数:
参数 | 类型 | 描述 |
---|---|---|
tableList | Array | 表格数据 |
columns | Array | 列数据 |
operates | Object | 操作区按钮数据 |
options | Object | 表格全局配置 |
方法:
方法名 | 参数 | 描述 |
---|---|---|
setTableList | data | 设置表格数据 |
setTotal | total | 设置数据总数 |
setPageSize | size | 设置每一页的显示条数 |
更多详细请参考/estate-ui/src/views/personal-office/draft 下的组件
示例代码:
<ETable
ref="draftFcTableRef"
:tableList="tableList"
:options="options"
:columns="columns"
:operates="operates"
@afterCurrentPageClick="afterCurrentPageClickHandle"
/>
import ETable from '@/components/e-table/index';
export default {
data() {
return {
tableList: [],
options: {
// 每页数据数
pageSize: 10,
// 当前页码
currentPage: 1,
loading: true,
mutiSelect: true,
hasIndex: true
},
columns: [
{
prop: 'bdcdyh',
label: '不动产单元号',
align: 'center',
width: '220'
},
{
prop: 'zl',
label: '坐落',
align: 'center'
}
],
operates: {
width: 200,
fixed: 'right',
list: [
{
id: '1',
label: '详情',
show: true,
underline: false,
icon: '',
disabled: false,
method: (key, row) => {
console.log('row', row);
},
showCallback: () => {
return true;
}
}
]
}
};
},
methods: {
query() {
// 1.请求数据
// 2.在返回结果中,调用上文中列出的三个方法
}
}
mounted() {
// 关于e-table组件这里需要注意,初
// 始化数据一定是在mounted中初始化,而不是created
this.query();
}
}
6.关于views页面的编写
6.1.关于新增页面注意项
规范
- 新增文件。
-
- views下,所有的目录对应的是一节菜单,小写短横线连接,建议要英文表述清楚菜单名的意义。
-
- 具名在文件夹,而不是.vue文件上
比如:
应该是:
-- home
-- -- index.vue
而不是
-- home.vue
好处在于home下可以为组件扩展更多类型的文件,index.option.js等等,
扩展后后依然位于一个home文件夹中,便于管理
- 修改/estate-ui/src/router下index.js文件
-
- 懒加载
-
- path要唯一,且同名于views下的对应的组件
-
- 路由配置后,路由数据也是菜单的数据,修改后会自动同步到菜单处