【Vue】Vue与UI框架（Element Plus、Ant Design Vue、Vant）
个人主页：Guiat
归属专栏：Vue
文章目录
- 1. Vue UI 框架概述
- 1.1 主流Vue UI框架简介
- 1.2 选择UI框架的考虑因素
- 2. Element Plus详解
- 2.1 Element Plus基础使用
- 2.1.1 安装与引入
- 2.1.2 基础组件示例
- 2.2 Element Plus主题定制
- 2.3 Element Plus的优缺点分析
- 3. Ant Design Vue详解
- 3.1 Ant Design Vue基础使用
- 3.1.1 安装与引入
- 3.1.2 基础组件示例
- 3.2 Ant Design Vue主题定制
- 3.3 Ant Design Vue的优缺点分析
- 4. Vant详解
- 4.1 Vant基础使用
- 4.1.1 安装与引入
- 4.1.2 基础组件示例
- 4.2 Vant主题定制
- 4.3 Vant的优缺点分析
- 5. 三大框架性能对比
- 5.1 包体积对比
- 5.2 渲染性能对比
- 5.3 按需加载优化
- 6. 项目实践中的框架选择
- 6.1 不同业务场景下的选择建议
- 6.2 混合使用多个框架
- 7. 实战案例
- 7.1 使用Element Plus开发后台管理系统
- 7.2 使用Vant开发移动端商城页面
- 8. 总结与最佳实践
- 8.1 框架选择建议
- 8.2 提升开发效率的最佳实践
- 8.3 未来发展趋势
正文
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框架需要考虑以下几个关键因素：
- 应用场景：桌面端或移动端
- 组件丰富度：是否提供所需的全部组件
- 活跃度：维护频率和社区支持
- 定制性：易于主题定制的程度
- 性能：包体积和渲染性能
- 兼容性：与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 框架选择建议
-
基于项目需求选择：
- 中后台管理系统 → Element Plus 或 Ant Design Vue
- 移动端应用 → Vant
- 设计风格要求高 → Ant Design Vue
- 简洁快速开发 → Element Plus
-
考虑团队熟悉度：
- 已有Element使用经验 → Element Plus
- 熟悉Ant Design → Ant Design Vue
- 移动端开发经验 → Vant
8.2 提升开发效率的最佳实践
- 按需加载组件：使用自动导入插件减少手动引入的工作
- 封装通用组件：基于UI框架二次封装业务组件
- 主题定制：统一设计变量，创建一致的品牌体验
- VS Code插件支持：使用相应组件库的代码提示插件
- 结合状态管理：配合Pinia或Vuex管理复杂组件状态
8.3 未来发展趋势
- 组件库更加轻量化：按需引入和Tree Shaking优化
- Composition API支持增强：更好地支持Vue 3特性
- TypeScript集成深化：类型定义更加完善
- 设计系统生态完善：更强大的设计工具和资源
- 跨框架组件：同时支持Vue、React等多框架的组件库崛起
结语
感谢您的阅读！期待您的一键三连！欢迎指正！
