集成 Element Plus 到 Nuxt

#安装依赖

• package.json

$ pnpm install -D @element-plus/nuxt element-plus unplugin-element-plus

#配置文件

• nuxt.config.ts

import ElementPlus from "unplugin-element-plus/vite";

export default defineNuxtConfig({
  vite: {
    plugins: [
      ElementPlus({
        useSource: true,
      }),
    ],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @use "@/assets/element-plus.scss" as element;
          `,
        },
      },
    },
  },
  modules: ["@element-plus/nuxt"],
  elementPlus: {
    importStyle: "scss",
  },
});

#引入 Element Plus 样式文件

• element-plus.scss

// 1. 引入 element-plus 样式
@import "element-plus/theme-chalk/dark/css-vars.css";

// 2. 按需自定义覆盖样式
$-colors: (
  "primary": (
    "base": #303133,
  ),
);

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: $-colors
);

.el-avatar {
  background: transparent;
  cursor: pointer;
}

#使用例子

• demo.vue

<script lang="ts" setup>
import { Select } from "@element-plus/icons-vue";

defineProps(["imgSrc"]);
</script>

<template>
  <ElImage :src="imgSrc" fit="cover" lazy>
    <template #placeholder>
      <ElIcon><Select /></ElIcon>
    </template>
  </ElImage>
</template>