React大屏可视化脚手架教程示例
目录
- 使用 create-react-app 初始化
- 引入 antd UI库
- 使用 craco 插件来自定义配置
- 自定义 antd 主题,使用 less 作为 css 预处理器
- 修改 craco.config.js 文件
- craco-less .module.less 模拟vue组件中style的scope 功能
- 配置 craco.config.js 文件
- 以上操作版本记录
使用 create-react-app 初始化
# 使用了 create-react-app 的 typescript 模板 yarn create react-app my-big-screen --template typescript # 初始化之后进入 my-big-screen 文件目录下执行 yarn start # localhost:3000 就能看到 react 的 hello 页面了
引入 antd UI库
# 在 根目录 下 yarn add antd
使用 craco 插件来自定义配置
安装 craco
yarn add @craco/craco
修改 package.json 文件如下
# 原本 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" } # 修改之后 "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "craco eject" }
在根目录添加 craco.config.js 文件
module.exports = {}
自定义 antd 主题,使用 less 作为 css 预处理器
安装 craco-antd
yarn add craco-antd
修改 craco.config.js 文件
const CracoAntDesignPlugin = require('craco-antd'); module.exports = { plugins: [ { plugin: CracoAntDesignPlugin, options: { customizeTheme: { '@primary-color': '#1DA57A', }, }, }, ], };
craco-less .module.less 模拟vue组件中style的scope 功能
craco-less 依赖 已经内置在 @craco/craco 依赖中,无需主动安装
配置 craco.config.js 文件
const CracoAntDesignPlugin = require('craco-antd') const CracoLessPlugin = require('craco-less') const { loaderByName } = require('@craco/craco') module.exports = { plugins: [ { plugin: CracoAntDesignPlugin, options: { customizeTheme: { '@primary-color': '#1DA57A' } } }, { plugin: CracoLessPlugin, options: { modifyLessRule(lessRule, context) { // You have to exclude these file suffixes first, // if you want to modify the less module's suffix lessRule.exclude = /\.m\.less$/ return lessRule }, modifyLessModuleRule(lessModuleRule, context) { // Configure the file suffix lessModuleRule.test = /\.m\.less$/ // Configure the generated local ident name. const cssLoader = lessModuleRule.use.find(loaderByName('css-loader')) cssLoader.options.modules = { localIdentName: '[local]_[hash:base64:5]' } return lessModuleRule } } } ] }
配置 * ./src/react-app-env.d.ts * 文件
/// <reference types="react-scripts" /> // 定义在 全局的 变量 然后就可以 window.* 进行访问了 interface Window { __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any AMap: any } declare module "*.module.less" { const classes: { readonly [key: string]: string }; export default classes; }
使用示例(类似vue scope 的效果)
# index.module.less 文件命名 app { font-size: 40px; color: #f00; }
# 在组件中引入 import styles from './index.module.less' <div className={styles['app']}>hello</div>
使用 ESLint Prettier 两个插件来做代码格式校验和自动格式化
以上操作版本记录
{ "name": "xxx", "version": "0.1.0", "private": true, "dependencies": { "@craco/craco": "^6.2.0", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "@types/react-router-dom": "^5.1.8", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "antd": "^4.16.13", "craco-antd": "^1.19.0", "eslint": "^7.32.0", "eslint-config-alloy": "^4.3.0", "eslint-loader": "^4.0.2", "eslint-plugin-react": "^7.25.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-redux": "^7.2.4", "react-router-dom": "^5.2.1", "react-scripts": "4.0.3", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, "scripts": { "start": "set PORT=3090 && craco start", "build": "craco build", "test": "craco test", "eject": "craco eject", "lint": "eslint '{src}/**/*.{ts,tsx,js,jsx}'", "lint_fix": "eslint {src} --ext .ts,.tsx,.js,jsx --fix" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
以上就是React大屏可视化脚手架教程示例的详细内容,更多关于React大屏可视化脚手架的资料请关注我们其它相关文章!
赞 (0)