cbd-umi3

这是一个基于 [email protected] 的PC端开发框架。

项目开发

安装依赖

npm install
# or
yarn

启动项目

# 启动服务器
npm start

项目打包

# 打包项目并生成产物到dist目录
npm run build

关于项目插件

项目中集成了第三方umi插件，可能会影响umi的默认逻辑，请多留意

umi@3会自动扫描package.json中符合命名规则的插件依赖，并自动注册。

• umi-plugin-convention-routes 这个插件是为了支持umi@2的路由扫描规则而添加的，加入了一些限制。请仔细阅读README

项目结构

开发工具等准备工作

1. 推荐 vscode 作为开发此项目的 IDE
2. 推荐 ESLint Prettier 插件
3. 推荐的 vscode 配置：

{
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.formatOnSave": true
}

4. 推荐的 vscode 快捷动作(自己配置合适的快捷键吧)

• 代码提示 editor.action.triggerSuggest
• 多行合并一行 editor.action.joinLines
• 选择相同的单词 editor.action.addSelectionToNextFindMatch
• 打开/关闭终端 workbench.action.terminal.toggleTerminal
• eslint-fix(需要安装插件) eslint.executeAutofix
• 代码格式化 editor.action.formatDocument
• 向下复制行 editor.action.copyLinesDownAction
• 删除行 editor.action.deleteLines

提示：请善用eslint-fix修复简单的eslint错误

开发规范

1. 页面应该写在pages目录下，所有页面必须以index.js为入口。页面的路径不可以包含大写字母，如目录包含多个单词，请使用"-"分隔，如pages/user-manage/index.js
2. 页面/组件应当包含三要素(index.js入口，ComponetName.js页面/组件本身，ComponetName.less页面/组件的样式)
3. 单个页面/组件文件，代码量请控制在300行以内，超过该数目，请适当对业务内容进行拆分。
4. 除极个别情况（需要与前端项目负责人沟通确认），不可以在业务代码中使用eslint-disable的方式跳过eslint校验规则。
5. 页面中引入(组件/服务/models/工具等)资源时，必须遵循规则：禁止依赖子页面或兄弟页面的相关资源，只可以引入当前目录的相关资源，或祖先目录的相关资源。如果某页面需要引用兄弟页面的资源，请进行重构，将该资源提升至他们的共同祖先目录。
6. 项目中已集成CBD-UI运行时插件，默认唤起快捷键为ctrl+alt+s(windows)或ctrl+cmd+s(mac)。推荐使用该插件创建页面/组件。
7. 简单的页面，请尽量少使用dva-model。当兄弟页面/父子页面之间存在复杂的状态共享时，我们才考虑使用model的state。当兄弟页面/父子页面之间存在业务逻辑复用时，我们才考虑使用model的effect
8. 使用dva-model时，请尽量少新建reducers，大部分的内容都可通过update完成(使用CBD-UI创建新的model时就可以看到)
9. 接口层services，组件的propTypes等，请编写足够的可读性强的注释，以便于代码维护。
10. 对于控制台中打印的Warnning信息，如React出现的duplicate key, update on an unmounted component, invalid value for prop xxx 等问题，请务必解决后再提交代码。
11. 使用dva-model时，请保持namespace与文件名一致，便于后期维护查找。