添加ant-design简单使用

.babelrc.js

@@ -13,5 +13,13 @@ module.exports = {
     ],
     ['@babel/preset-react', { useBuiltIns: true }],
   ],
-  plugins: [],
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'antd',
+        style: true,
+      },
+    ],
+  ],
 }

package.json

@@ -13,6 +13,7 @@
   "author": "zhouxhere",
   "license": "ISC",
   "dependencies": {
+    "antd": "^4.18.5",
     "axios": "^0.24.0",
     "core-js": "^3.20.2",
     "moment": "^2.29.1",
@@ -32,6 +33,7 @@
     "@babel/preset-react": "^7.16.7",
     "@svgr/webpack": "^6.1.2",
     "babel-loader": "^8.2.3",
+    "babel-plugin-import": "^1.13.3",
     "babel-preset-react-app": "^10.0.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "css-loader": "^6.5.1",

src/App.js

@@ -1,8 +1,19 @@
+import { ConfigProvider } from 'antd'
 import React from 'react'
 import Router from './router'
+import zh_CN from 'antd/lib/locale/zh_CN'
+import moment from 'moment'
+import 'moment/locale/zh-cn'
+import 'antd/dist/antd'
+
+moment.locale('zh-cn')
 
 const App = () => {
-  return <Router />
+  return (
+    <ConfigProvider locale={zh_CN}>
+      <Router />
+    </ConfigProvider>
+  )
 }
 
 export default App

src/page/home/index.js

@@ -1,3 +1,4 @@
+import { Button } from 'antd'
 import React, { useCallback } from 'react'
 import { useDispatch } from 'react-redux'
 
@@ -15,8 +16,8 @@ const Home = () => {
   return (
     <div>
       <h3>home page</h3>
-      <button onClick={addCount}>add</button>
-      <button onClick={delCount}>del</button>
+      <Button onClick={addCount}>add</Button>
+      <Button onClick={delCount}>del</Button>
     </div>
   )
 }

webpack.common.js

@@ -100,7 +100,14 @@ module.exports = {
             },
           },
           require.resolve('postcss-loader'),
-          require.resolve('less-loader'),
+          {
+            loader: require.resolve('less-loader'),
+            options: {
+              lessOptions: {
+                javascriptEnabled: true,
+              },
+            },
+          },
         ],
         sideEffects: true,
       },
@@ -116,7 +123,14 @@ module.exports = {
             },
           },
           require.resolve('postcss-loader'),
-          require.resolve('less-loader'),
+          {
+            loader: require.resolve('less-loader'),
+            options: {
+              lessOptions: {
+                javascriptEnabled: true,
+              },
+            },
+          },
         ],
       },
     ],