vue3按需引入element-plus并修改主题颜色

最新推荐文章于 2024-09-19 05:53:59 发布

小志哥斯拉

最新推荐文章于 2024-09-19 05:53:59 发布

阅读量323

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_55510188/article/details/141633904

版权

Vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

1、安装element-plus

# NPM
$ npm install element-plus --save

2、element-plus按需引入

快速开始 | Element Plus (element-plus.org)

需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。

npm install -D unplugin-vue-components unplugin-auto-import

vite配置文件添加以下代码：

// vite.config.js
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()],
    }),
  ],
})

完成按需引入。

3、element-plus图标引入

Icon 图标 | Element Plus (element-plus.org)

为了能够像官方文档的用例那样直接使用图标，需要全局注册组件。

安装：

# NPM
npm install @element-plus/icons-vue

全局注册：

// main.js

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

完成图标的全局注册，可以直接使用了。

若遇到全局注册的图标不生效的地方，可以直接引入图标使用：

<script setup>
import { Search } from '@element-plus/icons-vue'

</script>

<template>
  <div class="login">
                <el-form-item prop="username">
                  <el-input
                    v-model="loginForm.username"
                    placeholder="用户名"
                    :prefix-icon="Search"
                  />
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    v-model="loginForm.password"
                    placeholder="密码"
                    :prefix-icon="Search"
                  />
                </el-form-item>
  </div>
</template>

4、修改主题颜色

主题 | Element Plus (element-plus.org)

新建文件styles/element/index.scss，修改element主题色&全局预定义scss变量就在这个文件。

// styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);

// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
// @use "element-plus/theme-chalk/src/index.scss" as *;

vite配置文件添加以下代码：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


// vite.config.js
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver({
        // 注意
        importStyle: 'sass'
      })]
    }),
    Components({
      resolvers: [ElementPlusResolver({
        // 注意
        importStyle: 'sass'
      })]
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 修改element主题色 & 全局预定义scss变量 在这个文件
        additionalData: `@use "@/styles/element/index.scss" as *;`,
      },
    },
  },
})

完成主题颜色修改，需要注意按需导入的地方配置importStyle: 'sass'，修改主题否则无效。