# qy-create-react > 基于 React 和 Antd 的一套中后台集成框架, 只需通过配置即可完成后台管理端的开发 Latest version **1.5.0** (published 2022-06-05) · ISC license · 0 weekly downloads ## Install ```sh npm install qy-create-react pnpm add qy-create-react yarn add qy-create-react bun add qy-create-react ``` Provides the command `react-script`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.5.0 | | Published | 2022-06-05 | | First published | 2020-03-28 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 39 | | Unpacked size | 141.3 KB | | Known vulnerabilities | 0 (+6 in 1 direct dependencies) | | Install scripts | no | | Maintainers | qianyin925 | ## Links - npm: https://www.npmjs.com/package/qy-create-react - npm.io page: https://npm.io/package/qy-create-react ## Dependencies (39) - [antd](https://npm.io/package/antd.md) ^4.16.2 - [sass](https://npm.io/package/sass.md) ^1.34.1 - [chalk](https://npm.io/package/chalk.md) ^4.1.1 - [react](https://npm.io/package/react.md) ^18.1.0 - [redux](https://npm.io/package/redux.md) ^4.1.0 - [eslint](https://npm.io/package/eslint.md) ^7.30.0 - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [qy-norm](https://npm.io/package/qy-norm.md) ^2.4.0 - [webpack](https://npm.io/package/webpack.md) ^5.38.1 - [react-dom](https://npm.io/package/react-dom.md) ^18.1.0 - [css-loader](https://npm.io/package/css-loader.md) ^5.2.6 - [raw-loader](https://npm.io/package/raw-loader.md) ^4.0.2 - [redux-saga](https://npm.io/package/redux-saga.md) ^1.1.3 - [url-loader](https://npm.io/package/url-loader.md) ^4.1.1 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.14.5 - [file-loader](https://npm.io/package/file-loader.md) ^6.2.0 - [react-redux](https://npm.io/package/react-redux.md) ^7.2.4 - [sass-loader](https://npm.io/package/sass-loader.md) ^12.1.0 - [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.7.2 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.2.6 - [babel-eslint](https://npm.io/package/babel-eslint.md) ^10.0.3 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.2 - [redux-logger](https://npm.io/package/redux-logger.md) ^3.0.6 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^6.1.0 - [path-browserify](https://npm.io/package/path-browserify.md) ^1.0.1 - [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0 - [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.14.5 - [styled-components](https://npm.io/package/styled-components.md) ^5.3.0 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^3.11.2 - [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.14.5 - [babel-plugin-import](https://npm.io/package/babel-plugin-import.md) ^1.13.3 - [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^9.0.0 - [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.24.0 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.3.1 - [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.23.4 - [eslint-webpack-plugin](https://npm.io/package/eslint-webpack-plugin.md) ^3.0.1 - [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^1.6.0 - [eslint-friendly-formatter](https://npm.io/package/eslint-friendly-formatter.md) ^4.0.1 - [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) ^4.2.0 ## Recent versions - 1.5.0 (latest) — 2022-06-05 - 1.4.0 — 2022-06-05 - 1.3.0 — 2022-06-05 - 1.2.0 — 2022-06-05 - 1.1.20 — 2021-06-20 - 1.1.19 — 2020-10-25 - 1.1.18 — 2020-09-03 - 1.1.17 — 2020-09-03 - 1.1.16 — 2020-08-31 - 1.1.15 — 2020-08-25 - 1.1.14 — 2020-08-24 - 1.1.13 — 2020-08-18 - 1.1.12 — 2020-06-09 - 1.1.11 — 2020-06-09 - 1.1.10 — 2020-04-21 - … 18 more at https://npm.io/package/qy-create-react/versions ## README # qy-create-react 基于 React 和 Antd　的一套中后台集成框架, 只需通过配置即可完成后台管理端的开发 ## 基本使用方法 ### 一、 初始化项目并安装依赖 ```shll npm init -y npm i qy-create-react ``` ### 二、 修改 npm 脚本 ```diff "scripts": { + "start": "react-script start", + "build": "react-script build", }, ``` ### 三、 添加文件 .qyrc.js 并进行配置 位于项目目录下 ```js import Home from './src/pages/Home'; export default { name: 2222, webpackFinal: config => config, logo: { // logo 配置 img: void 0, // logo 配置图片: require('*/**/*.png') title: '测试标题', // 标题 }, footer: () => ('footer'), // footer 组件 header: () => ('header'), // header 组件 iconFont: '//at.alicdn.com/t/font_1141137_lyeqynh5bq.js', // iconFont 外链 menu: [ // 菜单配置 { key: 'home', title: '首页', icon: 'AndroidOutlined', url: '/', routers: [ { exact: true, path: '/', component: Home, }, ], }, { key: 'canvas', title: 'canvas', icon: 'icon-dingdanjine', children: [ { key: 'particle', title: 'particle', icon: 'icon-rili', children: [ { key: 'particle_1', title: 'particle_1', icon: 'AndroidOutlined', url: '/canvas/particle/1', routers: [ { exact: true, path: '/canvas/particle/1', component: () => ('particle_1'), }, ], } ] }, ], }, ], }; ``` ## 四、 webpackFinal 配置文件说明 1. 该文件导出一个方法 2. 该方法接收一个参数为 webpack 配置(Object) 3. 该方法返回 webpack 配置(Object) 4. 配置文件位置位于项目根目录下 ```js const MonacoEditor = require('monaco-editor-webpack-plugin'); module.exports = config => { config.plugins.push(new MonacoEditor()); return config; } ``` ## .eslintrc.js 配置文件 创建文件 `.vscode/settings.json` ```js const path = require("path"); module.exports = { extends: [path.resolve(__dirname, "./node_modules/qy-norm/.eslintrc.js")], }; ``` ## vscode eslint 格式化配置 ```json { // -----------统一配置-------------- "editor.codeActionsOnSave": { // 代码自动格式配置 "source.fixAll.eslint": true, // 根据 eslint 配置进行格式化, 需要安装 eslint 插件 "source.fixAll.stylelint": true // 根据 eslint 配置进行格式化, 需要安装 stylelint 插件 } } ``` --- _Source: https://npm.io/package/qy-create-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._