在 Nuxt3 中按需导入 Element Plus

Element Plus 现在提供一个 nuxt 模块 用于在 Nuxt3 中按需导入组件、指令、样式、图标、函数。

安装

在你的 Nuxt3 + Element Plus 项目中增加 @element-plus/nuxt。

npm i @element-plus/nuxt -D

然后在 nuxt 的配置文件中增加配置。

export default defineNuxtConfig({
  modules: [
    '@element-plus/nuxt'
  ],
  elementPlus: { /** Options */ }
})

查看 完整配置

使用

然后就可以在项目中直接使用组件、指令、图标、方法函数等内容了。

<template>
  <el-button @click="ElMessage('hello')">button</el-button>
  <ElButton type="success">button</ElButton>
  <LazyElButton type="warning">lazy button</LazyElButton>
</template>

注意事项

1. el-button 和 ElButton 两种写法是等效的。
2. 在组件名称前增加 Lazy 将惰性加载组件。
3. 无需手动从 element-plus 中导入组件、指令等内容。如果手动导入，将影响样式的自动导入。
4. 为了避免图标名称和组件冲突，图标默认前缀值是 ElIcon，你可以通过配置修改它。
5. 默认只有 ElLoading ElMessage ElMessageBox ElNotification 函数会自动导入，你可以在配置中增加需要自动导入的函数。
6. 一些使用注意事项参考 Nuxt 文档。
7. 关于 Teleport 的 SSR 注意事项参考 Element Plus 文档。