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，并寫入下面內(nèi)容：

// @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戰(zhàn)斗的小綿羊的博客-CSDN博客

源碼地址：https://gitee.com/huanglgln/vue-sys-manage文章來源地址http://www.zghlxwxcb.cn/news/detail-407425.html

到了這里，關于vue3使用view-ui定制主題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！