Midway-Vue3-SSRAppearance
UI 组件
midway-vue3-ssr 默认集成了 Element Plus UI组件库，并且是完整引入，你可以调整它为自动引入或删除它换成以下其它的组件库。
Element Plus
经典中的经典，基于 Vue 3，面向设计师和开发者的组件库。
安装
pnpm add element-plus
1
完整引入
// 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')
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
自动导入
# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
1
2
2
Ant Design Vue
Ant Design 的 Vue 实现，蚂蚁前端 UI 库，开发和服务于企业级后台产品。
安装
pnpm add ant-design-vue
1
完整引入
// 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');
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
自动导入
# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
1
2
2
Tdesign Vue Next
鹅厂优质 UI 组件，配套工具完整，设计工整，文档清晰。
安装
pnpm add tdesign-vue-next
1
完整引入
// 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')
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
自动导入
# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
1
2
2
Arco Design Vue
字节跳动 UI 组件库开源，大厂逻辑，设计文档完美。
安装
pnpm add @arco-design/web-vue
1
完整引入
// 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');
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
自动导入
# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
1
2
2
Vant
有赞团队开源，轻量、可靠的移动端 Vue 组件库。
安装
pnpm add vant
1
完整引入
// main.ts
import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
const app = createApp();
app.use(Vant);
app.mount('#app');
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
自动导入
# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
1
2
2
Nutui
京东风格的轻量级移动端 Vue 组件库，移动端友好，面向电商业务场景。
Varlet
Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，全面拥抱 Vue3 生态，由社区团队维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化，并提供 VSCode 插件保障良好的开发体验
Naive-UI
宝藏 Vue UI 库，Vue UI 新星，从 Vue 3 起步(比较完整，主题可调，使用 TypeScript，快)