UI组件
UI组件库,是开发项目必不可少的一项,你可以自己开发一套,也可以用开源项目。
本项目为了容易扩展与二次开发,没有集成UI组件库,你可以自己集成以下开源组件库。
Vant
有赞团队开源,轻量、可靠的移动端 Vue 组件库。
一、安装
sh
pnpm add vant
二、完整引入
ts
// main.ts
import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
const app = createApp();
app.use(Vant);
app.mount('#app');
三、自动导入
sh
# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
四、二开样列
Element Plus
经典中的经典,基于 Vue 3,面向设计师和开发者的组件库。
一、安装
sh
pnpm add element-plus
二、完整引入
ts
// main.ts
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')
三、自动导入
sh
# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
四、二开样列
Ant Design Vue
Ant Design 的 Vue 实现,蚂蚁前端 UI 库,开发和服务于企业级后台产品。
一、安装
sh
pnpm add ant-design-vue
二、完整引入
ts
// main.ts
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
const app = createApp(App);
app.use(Antd).mount('#app');
三、自动导入
sh
# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
四、二开样列
Tdesign Vue Next
鹅厂优质 UI 组件,配套工具完整,设计工整,文档清晰。
一、安装
sh
pnpm add tdesign-vue-next
二、完整引入
ts
// main.ts
import { createApp } from 'vue';
import TDesign from 'tdesign-vue-next';
import App from './app.vue';
// 引入组件库全局样式资源
import 'tdesign-vue-next/es/style/index.css';
const app = createApp(App);
app.use(TDesign);
app.mount('#app')
三、自动导入
sh
# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
Arco Design Vue
字节跳动 UI 组件库开源,大厂逻辑,设计文档完美。
一、安装
sh
pnpm add @arco-design/web-vue
二、完整引入
ts
// main.ts
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');
三、自动导入
sh
# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
Nutui
京东风格的轻量级移动端 Vue 组件库,移动端友好,面向电商业务场景。
Varlet
Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库,全面拥抱 Vue3 生态,由社区团队维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化,并提供 VSCode 插件保障良好的开发体验
Naive-UI
宝藏 Vue UI 库,Vue UI 新星,从 Vue 3 起步(比较完整,主题可调,使用 TypeScript,快)