爱康云前端项目结构和开发规范

项目结构（移动端H5）

前端项目

目前爱康云的前端移动端的H5项目有7个，分别为

• 慢病患者端(patient_web)
• 慢病医生端(doctor_web)
• 肿瘤患者端(tumour-patient)
• 肿瘤医生端(tumour-doctor)
• 心康患者端(heart-patient)
• 心康医生端(heart-doctor)
• 微医院(mini-hospital)

公共包引入方式

之前使用的是npm link，但npm link后本地package.json里没有记录，无法直观的查看本地包的引用。

这里采用npm install本地包的引用方式。指令如下：

npm install ../ak-commonjs/

命令执行完后，package.json里会多一条记录

  "dependencies": {
    "ak-commonjs": "file:../ak-commonjs",
    "core-js": "^3.3.2",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.0.1",
    "we-vue": "^2.3.3"
  },

也可以在package.json里加上"ak-commonjs": “file:…/ak-commonjs” 这一行再执行npm install命令。当然，公共包需要和引入包在同一个目录下

包依赖结构

除开第三方UI组件vant，计划重构时创建五个公共包，其中公共组件包含了工具JS，和业务无关的公共组件，登录模块，聊天包，患者公共包和医生公共包。目的是干掉重复代码，不同产品线的相同功能不再复制粘贴。

规范

代码规范

所有项目使用统一的Eslint的标准配置作为基础。

个性化配置写在package.json中，暂定以下几条。

"rules": {
  "no-debugger": 0,
  "vue/require-v-for-key": 0,
  "no-eval": 0,
  "brace-style": 0
}

所有项目代码要保证没有eslint警告，再提交到git。（暂时所有eslint配置复制粘贴到各项目，后续想办法eslint规则只写一处，各项目和公共包引用。）

其他编码规范：

1. 不要编写大段代码，一个函数内容太大，拆分成多个函数
2. 重复代码封装成函数，函数留下可扩展的空间
3. 重复组件提取到公共包中，组件的个性化配置暴露出来，组件留下可扩展空间
4. 复杂程序逻辑，复杂业务逻辑，高端写法，多级函数引用，请写好注释

另外，为避免大家代码一键格式化后不一样，在idea的setting里下图的Do not indent children of处增加 script 和 style

CSS规范

1. 定义与业务无关的公共CSS文件
2. Vue页面和组件的样式写在当前页面内
3. 相同业务逻辑的页面的样式可以提取到CSS文件内，放在当前目录下
4. 不同业务逻辑的页面禁止相互引用CSS样式文件
5. CSS因不同页面逻辑不同、改动频繁，难复用，应遵循单独使用，少继承的原则

项目包结构规范

使用vue cli3创建项目，包目录如下

• assets 静态资源
• conponents 组件
• router 路由文件
• store store文件
• views 页面
• tests 单元测试文件

公共包结构规范

公共包删除一切无用的文件和配置，精简项目结构，其中components里写公共组件。tests存放单元测试文件，必须完成公共组件需要单元测试。

• assets 静态资源
• components 公共组件
• js js文件
• tests 单元测试文件

package.json里指定入口文件为index.js

  "main": "index.js",

在index里export组件

import WeVue from 'we-vue'
import Vue from 'vue'
import playerPicker from './src/components/player/playerPicker'
Vue.use(WeVue)

export {
  playerPicker
}

git commit 规范

1. commit需写好注释，并标注是功能开发还是bug修复
2. 开发阶段（本周四到下周五）的commit需提交到dev和test两个分支，先提交到dev，再切换到test，cherrypick当次提交
3. 测试阶段（下下周一到下下周三），可直接在test分支上修改bug，提交到test分支上，周三上线后，将test分支合并到dev分支
4. 当前版本不上线的功能只能提交到dev分支，不需cherrypick到test分支上。

单元测试测什么

首先一个问题，单元测试需要测什么？
以下引用自vue-test-utils官网

对于 UI 组件来说，我们不推荐一味追求行级覆盖率，因为它会导致我们过分关注组件的内部实现细节，从而导致琐碎的测试。

取而代之的是，我们推荐把测试撰写为断言你的组件的公共接口，并在一个黑盒内部处理它。一个简单的测试用例将会断言一些输入 (用户的交互或
prop 的改变) 提供给某组件之后是否导致预期结果 (渲染结果或触发自定义事件)。

也就是说我们需要测试的是输入和输出。根据不同的输入得到不同的输出，看是否满足预期结果。尽可能覆盖所有不同的输入情况，但不需要去关注组件的内部实现细节。那么该测试什么的输入和输出呢？

1. 公共组件，在Component文件夹中的所有
2. 有复杂逻辑JS函数，工具类等

单元测试规范

待补充

新项目cli

搭建好创建新项目的模板，一键创建立即可用的新项目。
待补充