UI组件库的使用

关于ui组件库的使用

1. 如果是个人开发项目，一是自己用起来很熟练的，二是使用用的人多的项目，这样有问题可以方便在issue里面找到解决方案
2. 如果是企业里面，通常情况下你没有选择，项目里面是啥ui组件库就用啥

刚开始学习的时候，可以在它的官网组件库里面每个都点开看看，自己知道都有哪些组件可以用，用法大致是什么样的，这样在遇到对应场景的时候才能想起来

学会其中一个ui组件库之后，其他的ui组件库都是相通的

Iconfont引入

官网：https://www.iconfont.cn/

里面有很多好看的图标，做项目经常会用到

ArcoDesign组件库使用

官网：https://arco.design/vue

目前我最常用的ui组件库

不过这个快一年没更新了，看自己使用情况决定要不要用这个吧

npm install -D @arco-design/web-vue

按需加载

主流 UI 组件库（如 Element Plus、Vant）都包含大量组件（Element Plus 有 100+ 组件，Vant 有 60+），如果用 “全局引入” 的方式（把所有组件都导入）

会导致两个核心问题：

1. 打包体积暴涨：哪怕你只用到 1 个按钮（ElButton），打包后也会包含 Element Plus 所有组件的代码和样式，比如 Element Plus 全量引入会增加～500KB（压缩后）的体积；
2. 首屏加载变慢：浏览器需要下载更大的 JS/CSS 文件，导致页面白屏时间变长（尤其是移动端 / 低网速场景）；
3. 性能冗余：未使用的组件代码会被打包到项目中，占用内存，轻微影响运行性能。

全量引入

import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';

const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');

打包之后的体积

局部引入，手动操作

<template>
  <div>
    <Button>xx</Button>
  </div>
</template>

<script setup>
import {Button} from "@arco-design/web-vue";
import "@arco-design/web-vue/lib/button/style/css.js"
</script>

打包之后的体积如下

自动按需引入

之前局部引入的时候，会发现很麻烦，可以使用vite插件的方式自动导入

npm i -D @arco-plugins/vite-vue

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { vitePluginForArco } from '@arco-plugins/vite-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vitePluginForArco({
      style: 'css'
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

打包之后的体积

AntDesgin 组件库使用

官网：https://www.antdv.com/docs/vue/introduce-cn

一样的，快一年没更新了

ElementUIPlus组件库使用

官网：https://element-plus.org/zh-CN/guide/design

这个更新很频繁，基本上每月一更