Ant Design Vue

ant-design-vue UI库的引入与使用

• ~~element-plus~~：https://element-plus.gitee.io/zh-CN/（该UI库用过，换用一个新的UI库使用）
• ant-design-vue UI库：https://antdv.com/docs/vue/introduce-cn/（老版本）

最新版本：https://next.antdv.com/components/overview-cn[

](https://element-plus.gitee.io/zh-CN/)
ant-design-vue UI库的引入和使用

全局引入的方式

在main.ts文件中如下修改：

/*
 * @Descripttion:
 * @Date: 2021-12-07 10:05:32
 * @LastEditTime: 2022-01-10 10:18:18
 */
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
// 全局引入全部组件及样式 ant-design-vue UI库(但是官网不推推荐，影响性能)
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
createApp(App).use(Antd).use(router).mount('#app')

**TODO**: 全局引入会打包所有UI组件，所以采用局部引用的方式来使用

icon图标的使用

需要先下载 相应的包

cnpm install --save @ant-design/icons-vue

然后使用到icon的时候，按需导入，上面的组件如果按需导入也是用这种方式，但是组件使用情况比icon实用得多，所以全局使用UI组件但不全局使用icon。

<template>
    <div class="icons-list">
      <span>icon组件</span>
      <up-circle-two-tone />
      <home-outlined />
      <setting-filled />
      <smile-outlined />
      <sync-outlined spin />
      <smile-outlined :rotate="180" />
      <loading-outlined />
    </div>
</template>
<script lang="ts">
import {
  UpCircleTwoTone,
  HomeOutlined,
  SettingFilled,
  SmileOutlined,
  SyncOutlined,
  LoadingOutlined,
} from '@ant-design/icons-vue'
</script>
<style scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>

定制主题

参考：

• https://www.jianshu.com/p/a42f58fc3f92
• https://juejin.cn/post/6962078064364748808