Vue3常用的UI框架

发表于 | 分类于
Vue3常用的UI框架

前言

基于Vue的UI框架比较推荐的有

  • Ant Design Vue
  • iView
  • Element Plus(之前叫Element UI)

这三者中Ant Design Vue和iView使用的是Less。

Element Plus使用的是Sass。

Ant Design Vue

https://www.antdv.com/docs/vue/getting-started-cn

概要

CSS预处理器为Less。

示例为TS+组合式API。

Ant Design 和 iView都是不错的UI框架，这里更推荐使用Ant Design，最大的原因是：

虽然Ant Design 和 iView都是使用的Less，但是Ant Design提供了一种新的设置主题的方式。

安装和引用

1
npm i --save ant-design-vue@4.x

引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {createApp} from 'vue'
import {createPinia} from 'pinia'

import App from './App.vue'
import router from './router'

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(Antd)

app.mount('#app')

修改主题

https://www.antdv.com/docs/vue/customize-theme-cn

修改主题变量

通过在 ConfigProvider 中传入 theme，可以配置主题。

在升级 v4 后，将默认使用 v4 的主题，以下是将配置主题示例：

1
2
3
4
5
6
7
8
9
10
11
<template>
  <a-config-provider
    :theme="{
      token: {
        colorPrimary: '#00b96b',
      },
    }"
  >
    <a-button />
  </a-config-provider>
</template>

iView

https://www.iviewui.com/view-ui-plus/guide/introduce

概要

CSS预处理器为Less。

示例为JS+选项式API。

安装和引用

安装

1
npm install view-ui-plus --save

main.js中引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import "@/assets/css/_common.scss"

import {createApp} from 'vue'
import {createPinia} from 'pinia'

import App from './App.vue'
import router from './router'

import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ViewUIPlus)

app.mount('#app')

自定义主题

如果你的项目使用了 webpack/vite 工程，可以通过变量覆盖的方式来实现主题定制。

创建文件/assets/css/my-theme/index.less。

并写入下面内容：

1
2
3
4
@import '~view-ui-plus/src/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #FA7E31;

完整的变量列表可以查看 默认样式变量。

然后在入口文件 main.js 内导入这个 less 文件即可：

1
import '@/assets/css/my-theme/index.less';

Element Plus

https://element-plus.org/zh-CN/guide/design.html

概要

CSS预处理器为Scss。

示例为TS+组合式API。

安装和使用

1
npm install element-plus --save

使用

1
2
3
4
5
6
7
8
9
10
11
// main.ts
import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

自定义主题

https://element-plus.org/zh-CN/guide/theming.html

创建一个 styles/element/index.scss 文件来合并你的变量和 element-plus 的变量。

1
2
3
4
5
6
7
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);

引用的地方修改如下

1
2
3
4
5
6
7
8
import { createApp } from 'vue'
import App from './App.vue'

import './styles/element/index.scss'
import ElementPlus from 'element-plus'

const app = createApp(App)
app.use(ElementPlus)