Nuxt3实战系列之集成ElementPlus UINuxt3集成ElementPlus UI。当静下心，好好看一些书籍

环境依赖

 "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "element-plus": "^2.8.7",
    "nuxt": "^3.13.2",
    "vue": "^3.5.12",
  },
  "devDependencies": {
    "@element-plus/nuxt": "^1.1.0",
    "sass": "1.80.4"
  }

前置准备

用 pnpm 包管理工具pnpm官网
注意： 如果使用pnpm包管理工具,请在Nuxt3项目根目录创建一个.npmrc文件, 内容如下

# 为什么设置这个属性，详情请参考 https://www.npmjs.com/package/@element-plus/nuxt
shamefully-hoist=true

如何引入

安装依赖

# 安装Element-Plus 和 icon图标 依赖
pnpm add @element-plus/icons-vue element-plus -S

# 安装 Element-Plus 的 Nuxt 模块
pnpm add @element-plus/nuxt

# 安装 sass; 原因：Element-Plus 使用的sass 的css预处理器
pnpm add sass -D

配置nuxt.confit.ts文件

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    '@element-plus/nuxt'
  ],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/styles/element/index.scss" as element;`, // 参考：https://cn.vitejs.dev/config/shared-options.html#css-preprocessoroptions-extension-additionaldata
          api: 'modern-compiler'
        },
      },
    },
  },
  elementPlus: {
    icon: 'ElIcon',
    importStyle: 'scss',
    themes: ['dark'],
  },
})

创建assets/styles/element/index.scss内容如下: 为了后期扩展Element-Plus样式

$-colors: (
  'primary': (
    'base': #2B72FE,
  )
);

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

恭喜你，Element-Plus 和 @element-plus/icons-vue 已经支持自动导入了

使用方式

调整 app.vue 文件内容如下

<template>
  <el-button type="primary">nihao </el-button>
  <el-icon><el-icon-plus /></el-icon>
  <el-icon><Document /></el-icon>
</template>

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

运行效果

FAQ

icon 全局使用为什么名字变成了 <el-icon-plus />
- 答: 前缀是由 nuxt.config.ts 文件中的 elementPlus属性中的icon设置的。默认就是 ElIcon。当然你可以自定义名字
在使用element-plus的时候碰到了一个问题
- 答: 我这边的解决方案是将sass的版本号固定为: "sass": "1.80.4"

参考资源

github.com/element-plu…

结语

祝您：开心快乐每一天。这个很重要~