vue学习第3期 - 集成UI库

congvee2025-08-17 17:01

常用的UI库包括：

Element-Plus

Ant Design

Element-Plus

安装依赖

pnpm install element-plus

按需自动导入

安装插件：

pnpm install -D unplugin-vue-components unplugin-auto-import

配置：

vite.config.ts

javascript 复制代码

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

使用

vue 复制代码

<script setup lang="ts"></script>

<template>
  <ElButton>aaa</ElButton>
</template>

<style scoped></style>

直接使用组件，而且不需要import导入。