react怎么使用ui库?

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库?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏