# generator-react-cmri > 使用 [npm](https://www.npmjs.com/) 安装 [Yeoman](http://yeoman.io) 以及 [generator-react-cmri](https://www.npmjs.com/package/generator-react-cmri) 。 ( 我们假定您已安装 [node.js](https://nodejs.org/) ) Latest version **0.0.3** (published 2021-04-22) · 0 weekly downloads ## Install ```sh npm install generator-react-cmri pnpm add generator-react-cmri yarn add generator-react-cmri bun add generator-react-cmri ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.3 | | Published | 2021-04-22 | | First published | 2021-04-01 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 124.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | cmri | | Maintainers | guosj | | Keywords | yeoman-generator | ## Links - npm: https://www.npmjs.com/package/generator-react-cmri - Repository: http://dev.cmri.cn/ai/gitlab/onap/fe/generator-react-cmri - npm.io page: https://npm.io/package/generator-react-cmri ## Dependencies (3) - [chalk](https://npm.io/package/chalk.md) ^2.1.0 - [yosay](https://npm.io/package/yosay.md) ^2.0.1 - [yeoman-generator](https://npm.io/package/yeoman-generator.md) ^2.0.1 ## Recent versions - 0.0.3 (latest) — 2021-04-22 - 0.0.2 — 2021-04-22 - 0.0.1 — 2021-04-01 - 0.0.0 — 2021-04-01 ## README ## 使用 使用 [npm](https://www.npmjs.com/) 安装 [Yeoman](http://yeoman.io) 以及 [generator-react-cmri](https://www.npmjs.com/package/generator-react-cmri) 。 ( 我们假定您已安装 [node.js](https://nodejs.org/) ) ```bash npm install -g yo generator-react-cmri // 下载依赖 yo react-cmri // 构建项目 ``` ## 优势 - 快速启动项目。两行命令即可生成一个可直接开发业务的框架。 - 风格指南已定义。包括代码规范、变量风格、目录结构等。 ## 限制 - 仅支持 React 生态圈。 ## 规划 - 本框架将根据当前正在运行的项目迭代优化。 - 当前不支持 Typescript。如开发同学对 Typescript 掌握不佳，只会增加一些开发成本，无法起到提升代码可读性、可维护性的作用。随 Typescript 普及，后续考虑切换为 Typescript。 - 考虑后续丰富自定义组件以补充 Antd 组件库。同时会关注[MATERIAL-UI](https://material-ui.com/zh/)组件库。 - 会补充一些常用技术点的使用 demo， 比如: Mobx（已有，参考后文）。 - 考虑美化一下首页 ## 文档 ### 项目技术栈 基于 React + React-router + Mobx + Antd + LESS + ECMAScript + Axios + Webpack ### 参考文档 [React 中文](https://zh-hans.reactjs.org/) [React-router 路由](https://reactrouter.com/web/guides/quick-start) [Mobx 状态管理](https://mobx.js.org/README.html) [Antd UI 框架](https://ant.design/docs/react/introduce-cn) ### 目录结构 ``` . ├── 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 // 项目说明 ``` ### 启动项目 1. 下载项目依赖`npm install` 2. 修改代理文件 src/setup-proxy.js，更改 target 为自己的虚拟机地址 3. 执行`npm start`启动项目，在浏览器中打开[http://localhost:3000](http://localhost:3000) 即可 ### 测试 执行`npm test`启动测试
详见[running tests](https://facebook.github.io/create-react-app/docs/running-tests) ### tips - import 尽量使用绝对路径，即 ``` import xxx from '@src/**/*.*' import '@src/**/*.less' ``` - vscode 使用以下插件实现保存时格式化代码 1. editorconfig 2. prettier 3. settings>`"editor.formatOnSave": true` - 变量风格 1. 肉串风格（kebab-case）: 文件夹名、文件名、样式类名、className、url 路由地址 2. 大驼峰（UpperCamelCase）: 组件、类 3. 小驼峰（camelCase）: 方法名 ### Mobx 使用（以 class 组件为例） - 启用装饰器 方式 1. 安装`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 }] ] } ``` 2. 创建 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; ``` 3. 创建 observer 组件 ``` import todosStore from '...'; @observer class Todos extends React.Component { /* ... */ } export default Todos ``` - 不启用装饰器 方式 1. 创建 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; ``` 2. 创建 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 { }) 的语法糖 --- _Source: https://npm.io/package/generator-react-cmri · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._