使用 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大屏可视化脚手架的资料请关注Devmax其它相关文章！