十五、react三方组件库

一、Ant-Design

官网：Ant-Design、Ant-Design-Mobile

安装（PC端是antd）

1 npm i -S antd-mobile

使用：参考官网

1 npm i -D customize-cra react-app-rewired
  • 修改package.json
1 "scripts": {
2   "start": "react-app-rewired start",
3   "build": "react-app-rewired build",
4   "test": "react-app-rewired test",
5   "eject": "react-scripts eject"
6 }
  • 安装babel-plugin-import
1 npm i -S babel-plugin-import
  • 根目录下新建文件config-overrides.js，样式按需引入
 1 const {
 2   override,
 3   addDecoratorsLegacy,
 4   disableEsLint,
 5   addBundleVisualizer,
 6   addWebpackAlias,
 7   adjustWorkbox,
 8     // 新增fixBabelImports
 9   fixBabelImports
10 } = require("customize-cra");
11 const path = require("path");
12 
13 module.exports = override(
14   // 在webpack中禁用eslint
15   disableEsLint(),
16 
17   // 添加webpack别名
18   addWebpackAlias({
19     ["@"]: path.resolve("./src"),
20   }),
21 
22   // 按需加载样式&组件代码
23   fixBabelImports("import", {
24     libraryName: "antd-mobile",
25     style: "css",
26   })
27 );

 

 

 

posted @ 2021-07-12 16:34  大米饭盖饭  阅读(112)  评论(0)    收藏  举报