Vue3常用的UI框架

码客说

发布于 2024-08-03 09:28:58

1490

发布于 2024-08-03 09:28:58

文章被收录于专栏：码客

前言

基于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提供了一种新的设置主题的方式。

安装和引用

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

引用

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 的主题，以下是将配置主题示例：

<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。

安装和引用

安装

npm install view-ui-plus --save

main.js中引用

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。

并写入下面内容：

@import '~view-ui-plus/src/styles/index.less';

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

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

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

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

Element Plus

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

概要

CSS预处理器为Scss。示例为TS+组合式API。

安装和使用

npm install element-plus --save

使用

// 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 的变量。

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);

引用的地方修改如下

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)

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-08-02，如有侵权请联系 cloudcommunity@tencent.com 删除