使用命令引入UI组件库 npm install antd --save

使用命令安装ant的图标库 npm install --save @ant-design/icons 注意这里的@后面是一个ant没有单词d!

配置Antd Design样式按需自动引入

npm install vite-plugin-style-import@1.4.1 -D使用该命令导入插件自动引入组件的样式,不用自己在写引入css样式,并且现在的版本antd里面也没有这个css样式文件了。

然后在vite.config.ts中进行配置:

plugins: [
react(),
styleImport({
resolves: [
AntdResolve()
]
}),
],

直接引入使用:

界面展示:

React后台管理系统05 引入UI组件库的更多相关文章

  1. uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...

  2. react的ant design的UI组件库

    PC官网:https://ant.design/ 移动端网址:https://mobile.ant.design/docs/react/introduce-cn antd-mobile :是 Ant ...

  3. React后台管理系统-商品管理列表组件

    1.商品列表页面结构 <div id="page-wrapper">              <PageTitle title="商品列表" ...

  4. angular-cli 引入ui组件库

    该例中使用的admin-lte以及bootstrap 1.使用npm 安装admin-lte命令: npm install admin-lte --save  (--save的意思是将该以来写入到pa ...

  5. react_app 项目开发 (4)_ React UI 组件库 ant-design 的基本使用

    最流行的开源 React UI 组件库 material-ui 国外流行(安卓手机的界面效果)文档 ant-design 国内流行 (蚂蚁金服 设计,一套 PC.一套移动端的____下拉菜单.分页.. ...

  6. React工程化实践之UI组件库

    分享日期: 2022-11-08 分享内容: 组件不是 React 特有的概念,但是 React 将组件化的思想发扬光大,可谓用到了极致.良好的组件设计会是良好的应用开发基础,这一讲就让我们谈一谈Re ...

  7. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

  8. 【转】前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...

  9. 前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...

  10. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

随机推荐

  1. [Linux]Vmwaer创建CENTOS7虚拟机

    1 前期准备 CENTOS系统镜像 本实验版本: CENTOS 7.9 安装 VMware Workstation 本实验版本: VMware Workstation Pro 15.0 2 VMwar ...

  2. [JavaScript]Base64 ←→ 图像

    1 Base64 → 图像 [demo1] document.getElementById('img').setAttribute( 'src', 'data:image/png;base64,iVB ...

  3. 数据泵:19c PDB数据泵迁入

    1.问题描述 用数据泵进行pdb的迁入迁出,模拟测试将其他库的数据导入到19cpdb中 2.环境介绍 source:12.2.0.1.0 target:19.0.0.0.0 3.源端制造数据 创建表空 ...

  4. YII2.0使用ActiveForm表单

    Controller控制器层代码 <?php namespace frontend\controllers; use frontend\models\UserForm; class UserCo ...

  5. Linux:管道命令与文本处理三剑客(grep、sed、awk)

    1 管道命令(pipe)介绍 众所周知,bash命令执行的时候会输出信息,但有时这些信息必须要经过几次处理之后才能得到我们想要的格式,此时应该如何处置?这就牵涉到 管道命令(pipe) 了.管道命令使 ...

  6. 使用select需要注意的细节

    使用select需要注意的细节 在学校的时候就使用过select,但是在项目中使用的时候却犯了个错误. select如何使用就不进行总结了,网上教程太多,以下是项目中我写的一小段代码,便于总结. in ...

  7. react异常 Each child in a list should have a unique “key” prop

    react异常警告:Each child in a list should have a unique "key" prop 原因:Dom在渲染数组时,需要一个key,不然嵌套数组 ...

  8. C++ Primer 5th 阅读笔记:变量和基本类型

    一些语言的公共特性 内建类型,如整型,字符型等: 变量,为值绑定的一个名字: 表达式和语句,操作值. 分支和循环,允许我们条件执行和重复执行: 函数,定义抽象计算单元. 扩展语言的方式 自定义类型: ...

  9. 2022-10-31:以下go语言代码输出什么?A:map[];B:nil;C:Panic;D:编译错误。 package main import “fmt“ func main() {

    2022-10-31:以下go语言代码输出什么?A:map[]:B:nil:C:Panic:D:编译错误. package main import "fmt" func main( ...

  10. 2022-07-30:以下go语言代码输出什么?A:[]byte{} []byte;B:[]byte{} []uint8;C:[]uint8{} []byte;D:[]uin8{} []uint8。

    2022-07-30:以下go语言代码输出什么?A:[]byte{} []byte:B:[]byte{} []uint8:C:[]uint8{} []byte:D:[]uin8{} []uint8. ...