React项目中UI库的使用
一.安装antd
移动端UI库: npm install antd-mobile --save PC端UI库: npm install antd --save
二.引入
**全局引入**
在react的入口文件 index.js 里引入
import 'antd/dist/antd.css'
,在组件里引入组件就可以使用了,例如组件里使用 button
import { Button } from 'antd'; <Button type="primary">xxx</Button>
逆战班
按需加载
1、yarn add react-app-rewired customize-cra
react-app-rewired 不用弹射就可以配置webpack
customize-cra 自定义脚手架环境
2、package.json
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }
3、项目的根目录建立一个配置文件
**config-overrides.js**
4、yarn add babel-plugin-import 下载babel插件,在编译过程中将import的写法自动转换成按需引入的方式
5、config-overrides.js 文件里
const { override, fixBabelImports } = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css', }), );
6、可以自定义主题 less less-loader (如果嫌麻烦可以无视此行代码)
7、可以配置装饰器
7-1)安装:
npm install --save-dev @babel/plugin-proposal-decorators
7-2)在根目录下的config-overrides.js里修改配置
const { addDecoratorsLegacy } = require('customize-cra');addDecoratorsLegacy(), //装饰器语法
相关推荐:react教程
以上就是react怎么使用ui库?的详细内容,更多请关注0133技术站其它相关文章!