react后台管理系统,基于create-react-app搭建,供学习参考。
- 主技术栈:react 17 + typescript + react-router 6 + mobx 6 + antd 4
- 代码校验:eslint + stylelint + husky
# 安装依赖
npm i
# 本地启动
npm start
# 打包
npm run build
- 统一使用 react hook 代码组织方式。
- 页面和组件统一使用 tsx 文件后缀名。
- 组件命名:
组件文件夹
命名使用首字母大写驼峰;组件文件
命名使用首字母小写驼峰。
- 样式隔离:less样式文件通过不同的根类名包裹来实现隔离效果。根类名的命名规则:根据文件目录来拼接,
src/views/
目录下以v
开头,src/components/
目录下以c
开头。- 示例1:文件
src/views/test/index.less
,命名.v-test-index {}
- 示例2:文件
src/components/PageLayout/index.less
,命名.c-PageLayout-index {}
- 示例1:文件
- store状态管理:在页面/组件中使用
src/hooks/storeHook
来获取/同步store数据。
- vscode安装扩展
ESlint
和Stylelint
- vscode设置文件settings.json里配置:
// eslint插件配置
"eslint.validate": [
"html",
"vue",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
// stylelint插件配置
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.validate": [
"css",
"less",
"postcss"
],
// 配置保存时自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},