React和Antd项目开发

项目要求用less 和 antd 按需加载：

安装node 、 git（登录注册码云先） 、 yarn

1. npx create-react-app xxxxxx (安装node的前提下)

2. git init --> git add . --> git commit -m "Saving before eject" (安装git 且 登录了，有前程仓库的前提下)

3. yarn eject (安装yarn的前提下)

4. yarn add less less-loader antd babel-plugin-import react-router-dom axios
   yarn add jsonp --save
   yarn add redux react-redux redux-devtools-extension --save
   yarn add moment --save (选择性安装)
   yarn add echarts echarts-for-react --save (选择性安装)
   yarn add react-draft-wysiwyg draftjs-to-html --save (选择性安装)

5. yarn start 报错 --> npm install babel-plugin-syntax-jsx --save-dev --> npm run dev --> 报错 --> npm install semver (报错什么百度什么，缺什么npm install 什么，或者yarn add 什么) 最后 yarn start

6. index.js 文件 渲染 <Router/> （import Router from './router';）

7. src文件夹里创建 router.js （import { HashRouter,Switch,Redirect,Link,Route } from 'react-router-dom';import App from './App';import 各种页面）（用HashRouter包着App,App包着Switch,Switch包着Route,除了登录页和其他单页面，主页另加Route并且 render Admin）；src里创建admin.js (用于布局结构)

8. App.js 渲染格式改成 export default class App extends React.Component 且 渲染动态子组件 return <div> { this.props.children } </div>

9.配置package.json 的less 和 按需加载 ：
（1）在index.js 中 import 'antd/dist/antd.less'，admin.js 中 import { Row,Col,Button } from 'antd';
（2）对less-loader 进行降级 yarn remove less-loader --》 yarn add less-loader@5.0.0
（3）配置package.json的babel增加 :
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
]
]
},

image.png
（4）配置eject后自动生成的config文件夹里webpack.config.js：
第一处：
{
test: /.less$/,
use:[
{loader: "style-loader"},
{loader: "css-loader"},
{
loader: "less-loader",
options: {
sourceMap:true,
modifyVars:{
'@primary-color':'#1890ff',
},
javascriptEnabled:true,
},
}
],
},（放在sass的后面 {
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},）
第二处：
//配置less style设置成true!!!!!!
["import", {
"libraryName": "antd",
"style": true // style: true 会加载 less 文件
}],（放在require.resolve('babel-plugin-named-asset-import')的后面 [
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent:
'@svgr/webpack?-svgo,+titleProp,+ref![path]',
},
},
},
],）
图片展示配置修改：
image.png image.png

然后重新yarn start
---------------------以下作为后台管理开发------------------------