vue3使用view-ui定制主题-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3使用view-ui定制主题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、按照依赖包

安装view-ui-plus、less、less-loader、style-resources-loader

npm install view-ui-plus --save
npm install less@^2.7.3 --save-dev
npm install less-loader@^6.2.0 --save-dev
npm install style-resources-loader --save-dev

2、配置view-ui

在main.js（mian.ts）中引入viewUI主键和样式

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ViewUIPlus from 'view-ui-plus'//viewui 相关配置
import App from './App.vue'
import router from './router'
import 'view-ui-plus/dist/styles/viewuiplus.css'//viewui 相关配置

import './styles/index.less';

const app = createApp(App)

app.use(createPinia())
app.use(router).use(ViewUIPlus)//viewui 相关配置

app.mount('#app')

3、配置less的加载器

在vite.config.js中配置css的loaderOptions

import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  //关键代码
  css: {
    // // css预处理器
    // preprocessorOptions: {
    //   less: {
    //     charset: false,
    //     additionalData: '@import "./src/styles/index.less";',
    //   },
    // },
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true
        }
      }
    }
  }
})

4、主题配置

首先在项目中先建一个目录，比如 styles，然后在 styles 下建立一个 less 文件 index.less，并写入下面内容：

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

@primary-color: #8c0776;

在main.js（mian.ts）中引入 ./styles/index.less

import './styles/index.less';

或者在vite.config.js中配置css的preprocessorOptions

css: {
    // css预处理器
    preprocessorOptions: {
      less: {
        charset: false,
        additionalData: '@import "./src/styles/index.less";',
      },
    },
}

参照相关文档：

iView 定制主题

vue3.0 使用ant-design-vue 按需加载时报错.bezierEasingMixin()_与BUG战斗的小绵羊的博客-CSDN博客

源码地址：https://gitee.com/huanglgln/vue-sys-manage文章来源地址https://www.toymoban.com/news/detail-407425.html

到了这里，关于vue3使用view-ui定制主题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！