react
环境搭建
1、安装 app 环境
npx create-react-app my-democd my-demo-
yarn eject
在.gitignore 中增加
/node_modules
node_modules/
/.pnp
.pnp.js
testing
/coverage
production
/build
misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
- 终端控制台执行
git add .
git commit -m "1" 或者 git commit -m "xx"
2、安装 antd 环境
-
yarn add antd -S在 yarn2+ 版本中已经不支持-S这个参数 -
yarn add @craco/craco -D在 yarn2+ 版本中已经不支持-D这个参数 -
yarn add craco-less -D在 yarn2+ 版本中已经不支持-D这个参数
3、将package.json里的script改为：
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}
4、在项目目录下新建一个
craco.config.js文件
const CracoLessPlugin = require("craco-less");
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: {
"primary-color": "#1DA57A",
"link-color": "#1DA57A",
"success-color": "#52C41A",
"warning-color": "#FAAD14",
"error-color": "#F5222D",
},
#### 外置 start ####
或者此处 可以新建一个 theme.config.js 然后再theme.config.js里引入：
module.export ={
"primary-color": "#1DA57A",
"link-color": "#1DA57A",
"success-color": "#52C41A",
"warning-color": "#FAAD14",
"error-color": "#F5222D",
}
然后在craco.config.js里引入 const themeConfig = require('./theme.config');
在lessOptions: 里的modifyVars 改为 modifyVars:themeConfig,
#### 外置 end ####
javascriptEnabled: true,
},
},
},
},
],
};
4、在yarn start 启动的时候可能遇到的问题 Error: Cannot find module 'react-scripts/package.json'...
yarn add react-scripts -D
5、自定义主题
按照配置主题的要求，自定义主题需要用到类似less-loader提供的less变量覆盖功能。
1、首先把src/App.css 文件修改为 src/App.less;
2、然后在src/App.js 里将原来的 import './App.css' 改为 import './App.less';
3、在src/App.less 第一行 增加引入 @import '~antd/dist/antd.less';
新版本的引入为 @import '~antd/dist/antd.less'; 没有 '~'符号；
4、如果引入之后 yarn start 启动依然报错：
@import 'antd/dist/antd.less';
^
Less resolver error:
'antd/dist/antd.less' wasn't found. Tried - D:\vue\1006\my-demo\src\antd\dist\antd.less,npm://antd\dist\antd.less,antd\dist\antd.less
...
的话执行如下命令：
cd D:\vue\1006\my-demo
rm -rf node_modules yarn.lock package-lock.json
yarn add antd@4
yarn
然后再执行 yarn start页面就会好了
7、安装tailwindcss
npx tailwindcss init- 避坑：tailwind.config.js里的module.exports： 添加 purge: ['./src/*/.{js,jsx,ts,tsx}','./public/index.html'],
- App.less中最前面添加
@tailwind base;
@tailwind components;
@tailwind utilities;
8、测试tailwindcss是否生效，在App.js文件中将
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
加上className ='text-red-500' 变成：
<p className="text-red-500">
Edit <code>src/App.js</code> and save to reload.
</p>
然后启动后再看这里的文字颜色是否有改变，是否从黑色变成了红色，如果改变了颜色，那么就生效了。
9、安装 react-router-dom
10、安装 react-redux redux
11、 加路由加界面
import './App.less';
import { HashRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/home/Index';
import Login from './pages/login/Index';
import Dashboard from './pages/home/dashbord/Index';
function App() {
return (
<HashRouter>
<Routes>
<Route path="/home" element={<Home />} >
<Route path="dashboard" element={<Dashboard />} />
</Route>
<Route path="/login" element={<Login />} ></Route>
</Routes>
</HashRouter>
);
}
export default App;
记住，当页面上一片空白但是F12时却报错如下的错时:
Uncaught Error: Absolute route path "/dashboard" nested under path "/home" is not valid.
An absolute child route path must start with the combined path of all its parent routes.
要修改子路由：
在 react-router-dom v6 及以上，嵌套路由的 path 不能以 / 开头，否则会被当作“绝对路径”，而不是“相对父路由的路径”。
把子路由的 path 改成不带 / 例如：<Route path="dashboard" element={<Dashboard />} />
这样再yarn start 一下分别输入：
http://localhost:3002/#/home
http://localhost:3002/#/login
http://localhost:3002/#/home/dashboard
就可以分别看到自己所画的界面了；
