Vue3 element-plus按需引入和主题配置

小半 • 2024年3月2日下午6:00 • 前端开发 • 阅读 269

安装

 npm install element-plus --save

引入

全局引入

在main.js中配置：

...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)

app.mount('#app')

按需引入

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

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

在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()],
    }),
  ],
})

自定义主题

通过SCSS变量更换主题色新建一个css文件 assetscsstheme.scss

/* 只需要重写你需要的变量即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #534686,
    ),
  ),
);
// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
// @use "element-plus/theme-chalk/src/index.scss" as *;

在vite.config.js中配置

如果你正在使用vite，并且你想在按需导入时自定义主题。

使用 scss.additionalData 来编译所有应用 scss 变量的组件。

在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({
          // 自动引入修改主题色添加这一行，使用预处理样式
          importStyle: "sass",
        })],
      }),
      Components({
        resolvers: [ElementPlusResolver({
          // 自动引入修改主题色添加这一行，使用预处理样式
          importStyle: "sass",
        })]
      })
  ],
   css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/assets/css/theme.scss" as *;`,
      },
    },
  },
}