PC前端业务开发规范 | 工匠智造文档

文件夹结构

以CBO模块作为例子

所有模块均放在modules文件夹下面，src/modules/CBO
模块的组件放在组件文件夹的components文件夹下面，src/modules/CBO/components，组件代码分类存放，不允许一个vue文件写完全部代码，要求下面再分为：
- src/modules/CBO/components/js：存放组件的js文件
- src/modules/CBO/components/view：存放组件html文件
- src/modules/CBO/components/css：存放组件css文件，用不到自定义css可以不用创建
- src/modules/CBO/components/vue：存放组件vue文件
每个模块下面必备文件：
- src/modules/CBO/Language.js：多语文件，该模块所有个性的多语设置全写到这里
- src/modules/CBO/Router.js：路由文件，该模块所有路由配置全写到这里
其他文件夹均与components平行：
- src/modules/CBO/enum
- src/modules/CBO/service
- …

模块文件夹：全大写的模块简称，或者是大驼峰命名
其他文件夹：小驼峰命名
文件名：大驼峰命名
- 列表：卡片名后面追加List，比如：卡片名是(Itemmaster)，那么列表就是(ItemmasterList)
- 路由：以(CBO)模块，卡片名称为(Itemmaster)举例
- path(全小写):
  - 卡片：’/cbo/itemmaster/edit/:id?’
  - 列表：’/cbo/itemmaster/list’
- name(大驼峰):
- 卡片：’CBO-Itemmaster-Edit’
- 列表：’CBO-Itemmaster-List’
多语key：小驼峰命名
路由名称：大驼峰，尽量以（模块名-主实体缩写 + 功能）来命名，页面name属性，尽量与路由保持一致，卡片页面以“-Edit”结尾（CBO-ItemMaster-Edit），列表以“-List”结尾（CBO-ItemMaster-List）

尽量用Module去持久化，如果根据业务需求，需手动调用Api，需要向上汇报，但也只能调用BaseServiceEntity.save(entityReocrds)方法,不允许采用其他方式提交数据

严格要求格式，
- 有且只有一个<Page>标签
- Header和Footer根据需要选择，可以没有，Body必须有
- Body可以有多个，多个Body标签需要手工调整样式，Page画面是Flex从上往下的布局，Body自动充满剩余空间
- 所有Dom元素都必须在Header、Body、Footer这个三个标签中
```
  <Page>
      <Header>
          操作按钮区域
      </Header>
      <Body>
          主题内容
      </Body>
      <Footer>
          功能按钮区域
      </Footer>
  </Page>
```
界面显示的文字必须用多语key来实现，不允许直接写字符串，比如：控件显示编码文字，应该绑定 $t(‘code’)。而code对应的文字在模块的Language.js里面维护，如果所有模块的Language.js中有code属性，则不用维护，具体使用参见demo的Language.js样例
```
<TextBox :name="$t('code')" v-model="record.code" />
```
尽量避免直接或者是间接循环调用Http请求

Tags: 开发规范