Skip to content

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

自动导入

# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
1
2

详细内容请查看 官方文档Github

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

自动导入

# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
1
2

详细内容请查看 官方文档Github

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

自动导入

# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
1
2

详细内容请查看 官方文档Github

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

自动导入

# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
1
2

详细内容请查看 官方文档Github

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

自动导入

# 需要安装以下插件
pnpm add -D unplugin-vue-components unplugin-auto-import
1
2

详细内容请查看 官方文档Github

Nutui

京东风格的轻量级移动端 Vue 组件库,移动端友好,面向电商业务场景。

详细内容请查看 官方文档Github

Varlet

Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库,全面拥抱 Vue3 生态,由社区团队维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化,并提供 VSCode 插件保障良好的开发体验

详细内容请查看 官方文档Github

Naive-UI

宝藏 Vue UI 库,Vue UI 新星,从 Vue 3 起步(比较完整,主题可调,使用 TypeScript,快)

详细内容请查看 官方文档Github

Released under the MIT License.