在Vue3的vite之中使用element-plus自定义个主题配置你还不会？

❤在Vue3的vite之中使用element-plus自定义个主题配置你还不会？

1、安装

登录后复制

yarn add element-plus

• 1.

2、引入和使用

• 完整引入

这里我们直接整个引入就可以了，后期项目比较庞大的时候可以按需优化

在main.ts文件之中进行引入：

登录后复制

完整引入// 引入ElementPlus组件 st
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue' //element-plus icons
// 引入ElementPlus组件 end

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

简单写个按钮看看效果

登录后复制

<el-button type="primary">Primary</el-button>

• 1.

ok！ 引入和使用就已经完成了

3、主题使用

接下来我们尝试自定义一套主题，主题方面我们主要使用的element-plus的主题配置

先来看看官方对于主题色方面的介绍 ：

Element Plus 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。 但是如果需要大规模替换样式，例如： 将主题颜色从蓝色改为橙色或绿色，也许一个个将其覆盖起来不是一个好主意。

官方还给我们提供了四种方法来改变样式变量，这里因为我们是全局样式颜色都要进行改变 ！

4、完整导入element-plus样式的更改

方式一 样式覆盖

这里我们先尝试采用以下官方推荐给我们的样式覆盖的方式进行更换我们的主题颜色:(其实本质就是下面的样式替代上上面的样式)

👉在我们的根目录文件 => src下面=> assets文件里面 => element.scss

👉在这里我们需要引入官方给我们推荐的部分

登录后复制

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

// 这句非常重要 
@use "element-plus/theme-chalk/src/index.scss" as *;

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.

这里重要的部分我们着重标记一下：

@use "element-plus/theme-chalk/src/index.scss" as *;

👉 安装scss用于解析scss文件

登录后复制

npm i sass-D
或者
yarn add sass -D

• 1.
• 2.
• 3.

然后去刚刚引入官方的地方把样式替换成我们自己的，这里我理解就是做了一层中间作用！

👉 然后在你的项目入口文件中，导入这个样式文件以替换 Element Plus 内置的 CSS

登录后复制

import 'element-plus/dist/index.css'   // 官方样式路径 

上面的替换成下面这个

import './assets/styles/element.scss'  // 这是我的样式路径

• 1.
• 2.
• 3.
• 4.
• 5.

👉再次启动

这个时候以后我们会发现，好像生效了，但是没生效，其实是需要把这句话放出来 ![]

这句非常的重要

登录后复制

@use"element-plus/theme-chalk/src/index.scss" as *;

• 1.

再次把我们之前的部分给放出来进行查看，这里我们已经成功了！

全部导入部分就成功了！

5、按需导入element-plus样式的更改

局部导入按需加载部分和我们的全局加载部分略有不同，这里我们就以项目未vue3+vite配置的项目为主简单来看一下

局部引入也是需要我们先安装对应部分的插件

登录后复制

yarn add-D unplugin-vue-components unplugin-auto-import

• 1.

然后需要去我们的vite之中进行配置

注意我说的需要配置的地方

登录后复制

vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()], 
    }),
    Components({
      resolvers: [ElementPlusResolver()], //这里记得需要添加一个配置
    }),
  ],
})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.

看一下对比我的配置

👉 然后接下来我们按需引入页面尝试一下导入和使用

登录后复制

<template>
  <el-button>我是 ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.

这里看看我们的效果

然后更改我们的主题样式，这里我依然还是用的官方给我推荐的那一套代码

注意最后一行只是在全局的时候才使用！！!!!

👉 这里可以直接求官方地址粘贴，然后我贴个图

 element-plus.org/zh-CN/guide…

👉 完善一下vite.config.ts文件配置

登录后复制

Components({
      resolvers: [ElementPlusResolver(),importStyle:"sass"],
 }),

• 1.
• 2.
• 3.

👉 这是我配置的自己的vite.config.ts，注意这部分自己加上主题的配置和上面的vite.config.ts文件配置

注意自己其他的部分，这部分只是真对主题配置添加，添加进去就可以了！！！

登录后复制

// Element局部按需引入配置 

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 导入对应包
import ElementPlus from 'unplugin-element-plus/vite'



export default defineConfig({
    base: '/',
    plugins: [
        vue(),


        // 按需引入配置
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver({ importStyle: "sass" })],
        }),
        // 按需定制主题配置
        ElementPlus({
          useSource: true,
        }),


    ],
    resolve: {
        // 解决公共路径问题
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@use "@/assets/styles/element.scss" as *; `,
            },
        },
    },
    
})

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.
• 43.
• 44.
• 45.
• 46.

6、处理和解决问题 (按需加载未生效！！！)

这里我们尝试了一下，竟然没生效(其实这里有个小小的坑 ！！！)

高能预警！！！！！！！！

上面官方介绍开头说需要导入一个插件

👉 很多人就是一直没导入这个插件

• 安装

登录后复制

yarn add unplugin-element-plus --dev

• 1.

• 然后在vite.config.ts文件配置

登录后复制

// 导入对应包
import ElementPlus from 'unplugin-element-plus/vite'

// 按需定制主题配置
ElementPlus({
  useSource: true,
}),

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

启动查看，完美，这里已经成功了！

附上我自己的配置主题部分！

👉 重新启动记得 ！