html怎样使用ui套件,react怎么使用ui库?

5f40d1dd10d16942.jpg

React项目中UI库的使用

一.安装antd移动端UI库: npm install antd-mobile --save

PC端UI库: npm install antd --save

二.引入**全局引入**

在react的入口文件 index.js 里引入 import 'antd/dist/antd.css',在组件里引入组件就可以使用了,例如组件里使用 buttonimport { Button } from 'antd';

xxx

逆战班

按需加载

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(), //装饰器语法

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值