0.0.1 • Published 3 years ago
@xuliangliang/mylib v0.0.1
cbd-umi3
这是一个基于 umi@3.x 的PC端开发框架。
项目开发
安装依赖
npm install
# or
yarn
启动项目
# 启动服务器
npm start
项目打包
# 打包项目并生成产物到dist目录
npm run build
关于项目插件
项目中集成了第三方umi
插件,可能会影响umi
的默认逻辑,请多留意
umi@3
会自动扫描package.json
中符合命名规则的插件依赖,并自动注册。
- umi-plugin-convention-routes 这个插件是为了支持
umi@2
的路由扫描规则而添加的,加入了一些限制。请仔细阅读README
项目结构
开发工具等准备工作
- 推荐 vscode 作为开发此项目的 IDE
- 推荐 ESLint Prettier 插件
- 推荐的 vscode 配置:
{
"files.eol": "\n",
"editor.tabSize": 2,
"editor.formatOnSave": true
}
- 推荐的 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错误
开发规范
- 页面应该写在
pages
目录下,所有页面必须以index.js
为入口。页面的路径不可以包含大写字母,如目录包含多个单词,请使用"-"分隔,如pages/user-manage/index.js
- 页面/组件应当包含三要素(
index.js
入口,ComponetName.js
页面/组件本身,ComponetName.less
页面/组件的样式) - 单个页面/组件文件,代码量请控制在300行以内,超过该数目,请适当对业务内容进行拆分。
- 除极个别情况(需要与前端项目负责人沟通确认),不可以在业务代码中使用
eslint-disable
的方式跳过eslint
校验规则。 - 页面中引入(组件/服务/models/工具等)资源时,必须遵循规则:禁止依赖子页面或兄弟页面的相关资源,只可以引入当前目录的相关资源,或祖先目录的相关资源。如果某页面需要引用兄弟页面的资源,请进行重构,将该资源提升至他们的共同祖先目录。
- 项目中已集成
CBD-UI
运行时插件,默认唤起快捷键为ctrl
+alt
+s
(windows)或ctrl
+cmd
+s
(mac)。推荐使用该插件创建页面/组件。 - 简单的页面,请尽量少使用
dva-model
。当兄弟页面/父子页面之间存在复杂的状态共享时,我们才考虑使用model
的state
。当兄弟页面/父子页面之间存在业务逻辑复用时,我们才考虑使用model
的effect
- 使用
dva-model
时,请尽量少新建reducers
,大部分的内容都可通过update
完成(使用CBD-UI
创建新的model
时就可以看到) - 接口层
services
,组件的propTypes
等,请编写足够的可读性强的注释,以便于代码维护。 - 对于控制台中打印的
Warnning
信息,如React
出现的duplicate key
,update on an unmounted component
,invalid value for prop xxx
等问题,请务必解决后再提交代码。 - 使用
dva-model
时,请保持namespace
与文件名一致,便于后期维护查找。
0.0.1
3 years ago