6. Vue开源三方UI组件库

lyyl啊辉2026-02-19 10:45

目前Vue主流UI组件库由Element-Pus、Ant Design、Native UI等等，使用UI组件库可以提升开发与设计效率、保证产品界面的一致性，并实现跨团队协作的标准化；

下面以使用ElementPlus作为示例，介绍使用UI组件库的方法

步骤1：安装ElementPlus

复制代码

npm install element-plus --save

步骤2：引入ElementPlus

TypeScript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

步骤3：使用ElementPlus组件，参考官方文档

A Vue 3 UI Framework | Element Plus (element-plus.org)

TypeScript 复制代码

<template>
    <div class="mb-4">
        <el-button>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
    </div>
</template>

<!-- vue3写法 -->
<script lang="ts" setup >
    import { ElButton } from 'element-plus';
</script>

<style>
</style>

Ant Design Vue( https://www.antdv.com/docs/vue/getting-started-cn ) 经典⽼框架
Native UI( https://www.naiveui.com/zh-CN/light ) 仅⽀持 Vue3 的⼀个新的 UI 库
Tdesign( https://tdesign.tencent.com/ ) 腾讯开源的前端 UI 框架包含桌⾯与移动端
NutUI( https://nutui.jd.com/#/ ) 京东开源的前端 UI 框架
uvuewui( https://www.uviewui.com/ ) 适合移动端 uni-app 开发