0.0.3 • Published 3 years ago
generator-react-cmri v0.0.3
使用
使用 npm 安装 Yeoman 以及 generator-react-cmri 。
( 我们假定您已安装 node.js )
npm install -g yo generator-react-cmri // 下载依赖
yo react-cmri // 构建项目
优势
- 快速启动项目。两行命令即可生成一个可直接开发业务的框架。
- 风格指南已定义。包括代码规范、变量风格、目录结构等。
限制
- 仅支持 React 生态圈。
规划
- 本框架将根据当前正在运行的项目迭代优化。
- 当前不支持 Typescript。如开发同学对 Typescript 掌握不佳,只会增加一些开发成本,无法起到提升代码可读性、可维护性的作用。随 Typescript 普及,后续考虑切换为 Typescript。
- 考虑后续丰富自定义组件以补充 Antd 组件库。同时会关注MATERIAL-UI组件库。
- 会补充一些常用技术点的使用 demo, 比如: Mobx(已有,参考后文)。
- 考虑美化一下首页
文档
项目技术栈
基于 React + React-router + Mobx + Antd + LESS + ECMAScript + Axios + Webpack
参考文档
目录结构
.
├── config // webpack配置
├── public // 项目公开目录
├── scripts
├── src // src开发目录
│ ├── app
│ │ ├── modules // 子模块目录(目录结构递归)
│ │ │ ├── modules-a
│ │ │ │ ├── modules
│ │ │ │ ├── components
│ │ │ │ ├── routers
│ │ │ │ ├── stores
│ │ │ │ ├── modules-a.jsx // 不建议使用"index.jsx", 在编辑器中不易区分文件
│ │ │ │ └── modules-a.less
│ │ │ ├── modules-b
│ │ │ └── modules-c
│ │ ├── components // 组件
│ │ ├── routers // 路由
│ │ ├── stores // mobx store
│ │ ├── app.jsx // 入口首页
│ │ └── app.less
│ ├── common // 公共文件夹
│ │ ├── assets // 公共静态资源
│ │ ├── components // 公共组件
│ │ ├── components // 公共常量
│ │ ├── services // 公共接口请求、服务等
│ │ ├── stores // 公共mobx store
│ │ ├── styles // 公共样式
│ │ └── utils // 工具库/通用函数
│ ├── index.js // 项目入口文件
│ ├── index.less
│ └── setup-proxy.js // 开发环境代理配置文件
├── .editorconfig // 项目格式配置
├── .eslintignore // ESLint 忽略配置
├── .gitignore // git 忽略配置
├── jsconfig.json // js配置
├── package-lock.json
├── package.json // 依赖包配置
└── README.md // 项目说明
启动项目
- 下载项目依赖
npm install
- 修改代理文件 src/setup-proxy.js,更改 target 为自己的虚拟机地址
- 执行
npm start
启动项目,在浏览器中打开http://localhost:3000 即可
测试
执行npm test
启动测试
详见running tests
tips
- import 尽量使用绝对路径,即
import xxx from '@src/**/*.*' import '@src/**/*.less'
vscode 使用以下插件实现保存时格式化代码
- editorconfig
- prettier
- settings>
"editor.formatOnSave": true
变量风格
- 肉串风格(kebab-case): 文件夹名、文件名、样式类名、className、url 路由地址
- 大驼峰(UpperCamelCase): 组件、类
- 小驼峰(camelCase): 方法名
Mobx 使用(以 class 组件为例)
启用装饰器 方式
- 安装
npm install @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators
,并配置.bebelrc
文件
{ "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose": false }] ] }
- 创建 observable, action 属性
import { action, observable, makeAutoObservable } from 'mobx' class TodosStore { constructor() { makeAutoObservable(this); // mobx6.0以上必须加这个,不然store更新了,但是页面不重新渲染 } @observable todos = []; @action createTodo = (todoObj) => { this.todos.unshift(todoObj); }; } const todosStore = new TodosStore(); export default todosStore;
- 创建 observer 组件
import todosStore from '...'; @observer class Todos extends React.Component { /* ... */ } export default Todos
- 安装
不启用装饰器 方式
- 创建 observable, action 属性
import { makeAutoObservable } from 'mobx' class TodosStore { constructor() { makeAutoObservable(this); // mobx6.0以上必须加这个,不然store更新了,但是页面不重新渲染 } todos = []; createTodo = (todoObj) => { this.todos.unshift(todoObj); }; } const todosStore = new TodosStore(); export default todosStore;
- 创建 observer 组件
import todosStore from '...'; const Todos = observer(class Todos extends React.Component { /* ... */ }) export default Todos
mobx 包中的 observer 函数/装饰器用来将 react 组件转变为 observer 组件。 @observer class ComponentName {} 只是 const ComponentName = observer(class { }) 的语法糖