【Vue】Vue与UI框架（Element Plus、Ant Design Vue、Vant）

个人主页：Guiat
归属专栏：Vue

正文

1. Vue UI 框架概述

1.1 主流Vue UI框架简介

Vue生态系统中有多个优秀的UI组件库，帮助开发者快速构建美观、一致且功能丰富的用户界面。以下是三个最受欢迎的框架：

• Element Plus：基于Vue 3的桌面端组件库，适用于中后台系统
• Ant Design Vue：阿里巴巴推出的企业级UI组件库，基于Ant Design设计规范
• Vant：有赞前端团队开源的移动端组件库，专注于移动应用开发

这些框架的市场份额如下：

// Vue UI框架流行度数据模拟
const frameworkPopularity = {"Element Plus": 38,"Ant Design Vue": 32,"Vant": 22,"其他": 8
};

1.2 选择UI框架的考虑因素

选择合适的UI框架需要考虑以下几个关键因素：

1. 应用场景：桌面端或移动端
2. 组件丰富度：是否提供所需的全部组件
3. 活跃度：维护频率和社区支持
4. 定制性：易于主题定制的程度
5. 性能：包体积和渲染性能
6. 兼容性：与Vue版本的兼容性

2. Element Plus详解

2.1 Element Plus基础使用

Element Plus是基于Vue 3的组件库，提供了丰富的桌面端UI组件。

2.1.1 安装与引入

# 使用npm安装
npm install element-plus# 使用yarn安装
yarn add element-plus

完整引入方式：

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

按需引入方式：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { ElButton, ElSelect } from 'element-plus'
import 'element-plus/es/components/button/style/css'
import 'element-plus/es/components/select/style/css'const app = createApp(App)
app.component(ElButton.name, ElButton)
app.component(ElSelect.name, ElSelect)
app.mount('#app')

2.1.2 基础组件示例

<template><div class="container"><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><el-form :model="form" label-width="120px"><el-form-item label="用户名"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="上海" value="shanghai"></el-option><el-option label="北京" value="beijing"></el-option></el-select></el-form-item></el-form></div>
</template><script setup>
import { reactive } from 'vue'const form = reactive({name: '',region: ''
})
</script>

2.2 Element Plus主题定制

Element Plus支持通过CSS变量快速定制主题：

/* 在:root作用域下定义CSS变量 */
:root {--el-color-primary: #6b48ff;--el-color-success: #67c23a;--el-color-warning: #e6a23c;--el-color-danger: #f56c6c;--el-color-info: #909399;--el-font-size-base: 14px;
}

也可以通过SCSS变量进行深度定制：

// styles/element-variables.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ('base': #6b48ff,),),
);// 导入Element Plus样式
@use "element-plus/theme-chalk/src/index.scss" as *;

2.3 Element Plus的优缺点分析

优点：

• 组件丰富，覆盖大部分中后台场景
• 文档详尽，案例丰富
• 社区活跃度高，更新频繁
• 基于Vue 3，支持Composition API
• 支持TypeScript和国际化

缺点：

• 默认样式偏向简约，设计感不如Ant Design
• 部分组件在移动端适配不佳
• 完整引入包体积较大
• 高级定制需要较深的SCSS知识

3. Ant Design Vue详解

3.1 Ant Design Vue基础使用

Ant Design Vue是蚂蚁金服设计规范的Vue实现，提供了企业级UI设计语言和高质量组件。

3.1.1 安装与引入

# 使用npm安装
npm install ant-design-vue@next# 使用yarn安装
yarn add ant-design-vue@next

完整引入：

// main.js
import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import App from './App.vue'const app = createApp(App)
app.use(Antd)
app.mount('#app')

按需引入：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { Button, Select } from 'ant-design-vue'
import 'ant-design-vue/es/button/style/css'
import 'ant-design-vue/es/select/style/css'const app = createApp(App)
app.component(Button.name, Button)
app.component(Select.name, Select)
app.mount('#app')

3.1.2 基础组件示例

<template><div class="container"><a-row><a-button>默认按钮</a-button><a-button type="primary">主要按钮</a-button><a-button type="dashed">虚线按钮</a-button><a-button type="danger">危险按钮</a-button></a-row><a-form :model="formState" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }"><a-form-item label="用户名"><a-input v-model:value="formState.username" /></a-form-item><a-form-item label="部门"><a-select v-model:value="formState.department" placeholder="请选择部门"><a-select-option value="技术部">技术部</a-select-option><a-select-option value="市场部">市场部</a-select-option></a-select></a-form-item></a-form></div>
</template><script setup>
import { reactive } from 'vue'const formState = reactive({username: '',department: undefined
})
</script>

3.2 Ant Design Vue主题定制

Ant Design Vue支持通过Less变量进行主题定制：

// vue.config.js
module.exports = {css: {loaderOptions: {less: {lessOptions: {modifyVars: {'primary-color': '#1DA57A','link-color': '#1DA57A','border-radius-base': '2px',},javascriptEnabled: true,},},},},
};

3.3 Ant Design Vue的优缺点分析

优点：

• 企业级设计语言，设计感强
• 组件丰富且质量高
• 设计规范完整，一致性好
• 提供完善的设计资源（Sketch、Figma）
• 大厂背景，质量有保障

缺点：

• 学习曲线相对较陡
• 包体积较大
• 定制主题比Element Plus复杂
• 有些组件使用方式与Vue风格不太一致
• Less依赖使配置略显繁琐

4. Vant详解

4.1 Vant基础使用

Vant是有赞前端团队推出的移动端UI组件库，专为移动应用场景设计。

4.1.1 安装与引入

# 使用npm安装
npm i vant# 使用yarn安装
yarn add vant

完整引入：

// main.js
import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
import App from './App.vue';const app = createApp(App);
app.use(Vant);
app.mount('#app');

按需引入（推荐，配合unplugin-vue-components自动导入）：

// vite.config.js
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';export default {plugins: [vue(),Components({resolvers: [VantResolver()],}),],
};

4.1.2 基础组件示例

<template><div class="container"><van-button type="default">默认按钮</van-button><van-button type="primary">主要按钮</van-button><van-button type="success">成功按钮</van-button><van-button type="danger">危险按钮</van-button><van-form @submit="onSubmit"><van-cell-group inset><van-fieldv-model="username"name="用户名"label="用户名"placeholder="请输入用户名":rules="[{ required: true, message: '请填写用户名' }]"/><van-fieldv-model="password"type="password"name="密码"label="密码"placeholder="请输入密码":rules="[{ required: true, message: '请填写密码' }]"/></van-cell-group><div style="margin: 16px;"><van-button round block type="primary" native-type="submit">提交</van-button></div></van-form></div>
</template><script setup>
import { ref } from 'vue';
import { showToast } from 'vant';const username = ref('');
const password = ref('');
const onSubmit = (values) => {showToast('提交成功');
};
</script>

4.2 Vant主题定制

Vant提供了CSS变量方式进行主题定制：

:root {--van-primary-color: #1989fa;--van-success-color: #07c160;--van-danger-color: #ee0a24;--van-warning-color: #ff976a;--van-text-color: #323233;--van-border-radius: 4px;
}

4.3 Vant的优缺点分析

优点：

• 专为移动端设计，移动端适配完美
• 组件轻量化，性能出色
• 中文文档详尽，上手容易
• 组件风格统一，符合移动端交互习惯
• 更新频繁，跟进Vue版本快

缺点：

• 主要针对移动端，桌面端使用有限
• 定制化程度不如桌面端框架
• 企业级组件相对较少
• 设计风格固定，对于特殊UI要求的项目不够灵活

5. 三大框架性能对比

5.1 包体积对比

不同框架的包体积大小（完整引入版本）：

// 包体积大小(KB)
const packageSizes = {"Element Plus": 2580,"Ant Design Vue": 3150,"Vant": 1620
};

5.2 渲染性能对比

基于1000个组件同时渲染的场景下的平均渲染时间（毫秒）：

// 渲染性能(毫秒，越低越好)
const renderPerformance = {"Element Plus": 380,"Ant Design Vue": 420,"Vant": 210
};

5.3 按需加载优化

三个框架都支持组件按需加载，可有效减少生产环境的包体积：

// 按需加载后的包体积减少百分比
const lazyLoadImprovement = {"Element Plus": "65%","Ant Design Vue": "70%","Vant": "60%"
};

6. 项目实践中的框架选择

6.1 不同业务场景下的选择建议

• 中后台管理系统：Element Plus 或 Ant Design Vue
• 企业级应用：Ant Design Vue
• 移动端应用：Vant
• 轻量级桌面应用：Element Plus
• 快速原型开发：Element Plus
• 设计驱动的项目：Ant Design Vue

6.2 混合使用多个框架

在某些特殊场景下，可能需要混合使用多个UI框架。例如在一个同时包含管理后台和H5页面的项目中：

// main.js - 桌面端入口
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')// mobile.js - 移动端入口
import { createApp } from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
import MobileApp from './MobileApp.vue'const mobileApp = createApp(MobileApp)
mobileApp.use(Vant)
mobileApp.mount('#mobile-app')

但混合使用会造成包体积增大，建议使用动态导入和路由懒加载优化：

// router.js
const Desktop = () => import('./views/Desktop.vue')
const Mobile = () => import('./views/Mobile.vue')const routes = [{path: '/admin',component: Desktop,// 动态加载Element PlusbeforeEnter: (to, from, next) => {import('element-plus').then(module => {app.use(module.default)next()})}},{path: '/mobile',component: Mobile,// 动态加载VantbeforeEnter: (to, from, next) => {import('vant').then(module => {app.use(module.default)next()})}}
]

7. 实战案例

7.1 使用Element Plus开发后台管理系统

<template><el-container><el-header><div class="logo">管理系统</div><el-menu mode="horizontal" :router="true" class="nav-menu"><el-menu-item index="/dashboard">首页</el-menu-item><el-menu-item index="/users">用户管理</el-menu-item><el-menu-item index="/products">产品管理</el-menu-item></el-menu><div class="user-info"><el-dropdown><span class="el-dropdown-link">管理员 <el-icon><arrow-down /></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>退出登录</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></el-header><el-container><el-aside width="200px"><el-menu default-active="1" class="side-menu"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>导航一</span></template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-sub-menu><el-menu-item index="2"><el-icon><document /></el-icon><span>导航二</span></el-menu-item></el-menu></el-aside><el-main><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="姓名" width="180" /><el-table-column prop="address" label="地址" /><el-table-column fixed="right" label="操作" width="120"><template #default><el-button type="text" size="small">编辑</el-button><el-button type="text" size="small">删除</el-button></template></el-table-column></el-table><el-paginationlayout="prev, pager, next":total="100"@current-change="handlePageChange"/></el-main></el-container></el-container>
</template><script setup>
import { ref } from 'vue'
import { ArrowDown, Location, Document } from '@element-plus/icons-vue'const tableData = ref([{date: '2023-01-01',name: '张三',address: '北京市朝阳区'},{date: '2023-01-02',name: '李四',address: '上海市浦东新区'}
])const handlePageChange = (page) => {console.log('当前页:', page)
}
</script><style scoped>
.el-header {display: flex;align-items: center;background-color: #409EFF;color: #fff;
}
.logo {font-size: 20px;font-weight: bold;margin-right: 20px;
}
.nav-menu {flex: 1;background-color: transparent;
}
.user-info {margin-left: 20px;
}
.el-dropdown-link {color: #fff;cursor: pointer;
}
.side-menu {height: 100%;
}
</style>

7.2 使用Vant开发移动端商城页面

<template><div class="app"><van-nav-bar title="商品列表" left-arrow @click-left="onBack" /><van-search v-model="searchValue" placeholder="请输入搜索关键词" /><van-pull-refresh v-model="refreshing" @refresh="onRefresh"><van-listv-model:loading="loading":finished="finished"finished-text="没有更多了"@load="onLoad"><van-cardv-for="item in goodsList":key="item.id":price="item.price":desc="item.desc":title="item.title":thumb="item.thumb"><template #footer><van-button size="mini">加入购物车</van-button><van-button size="mini" type="primary">立即购买</van-button></template></van-card></van-list></van-pull-refresh><van-tabbar v-model="activeTabbar"><van-tabbar-item icon="home-o">首页</van-tabbar-item><van-tabbar-item icon="search">分类</van-tabbar-item><van-tabbar-item icon="cart-o" badge="2">购物车</van-tabbar-item><van-tabbar-item icon="user-o">我的</van-tabbar-item></van-tabbar></div>
</template><script setup>
import { ref } from 'vue';
import { showToast } from 'vant';const searchValue = ref('');
const activeTabbar = ref(0);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const goodsList = ref([]);const onBack = () => {showToast('返回上一页');
};const onLoad = () => {// 模拟异步请求setTimeout(() => {const lastItem = goodsList.value.length;for (let i = 0; i < 10; i++) {goodsList.value.push({id: lastItem + i,title: `商品${lastItem + i + 1}`,desc: '商品描述信息',price: '199.99',thumb: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',});}loading.value = false;// 判断是否已加载完成if (goodsList.value.length >= 40) {finished.value = true;}}, 1000);
};const onRefresh = () => {// 重置列表状态finished.value = false;loading.value = true;goodsList.value = [];// 重新加载数据onLoad();refreshing.value = false;
};
</script><style>
.app {min-height: 100vh;padding-bottom: 50px;box-sizing: border-box;
}
</style>

8. 总结与最佳实践

8.1 框架选择建议

1. 基于项目需求选择：

   • 中后台管理系统 → Element Plus 或 Ant Design Vue
   • 移动端应用 → Vant
   • 设计风格要求高 → Ant Design Vue
   • 简洁快速开发 → Element Plus

2. 考虑团队熟悉度：

   • 已有Element使用经验 → Element Plus
   • 熟悉Ant Design → Ant Design Vue
   • 移动端开发经验 → Vant

8.2 提升开发效率的最佳实践

1. 按需加载组件：使用自动导入插件减少手动引入的工作
2. 封装通用组件：基于UI框架二次封装业务组件
3. 主题定制：统一设计变量，创建一致的品牌体验
4. VS Code插件支持：使用相应组件库的代码提示插件
5. 结合状态管理：配合Pinia或Vuex管理复杂组件状态

8.3 未来发展趋势

1. 组件库更加轻量化：按需引入和Tree Shaking优化
2. Composition API支持增强：更好地支持Vue 3特性
3. TypeScript集成深化：类型定义更加完善
4. 设计系统生态完善：更强大的设计工具和资源
5. 跨框架组件：同时支持Vue、React等多框架的组件库崛起

结语
感谢您的阅读！期待您的一键三连！欢迎指正！