Element Plus Nuxt

Element Plus 模块，适用于 Nuxt

功能

• 按需自动导入组件和样式。
• 按需自动导入指令和样式。
• 自动从 @element-plus/icons-vue 导入图标。
• 自动导入 ElMessage、ElNotification 和其他方法。
• 自动将 ID_INJECTION_KEY 和 ZINDEX_INJECTION_KEY 注入 Vue。
• 自动将 teleport 标记注入到最终页面 HTML 中的正确位置。

安装

!警告 由于 element-plus 内部使用的 dayjs 不是 JavaScript 模块，为了确保它能在启动前转换为 JavaScript 模块，你需要在项目的根目录添加一个 .npmrc 文件并添加以下配置

shamefully-hoist=true
node-linker=hoisted

或者单独安装 dayjs 依赖。

npx nuxi@latest module add element-plus
# or
npm i element-plus @element-plus/nuxt -D

配置

!警告 目前，该方法无法自动获取上下文，你需要手动在选项中配置 installMethods。

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

使用

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

参考 Nuxt 文档 和 playground 使用。

选项

importStyle

• 类型: 'css' | 'scss' | boolean
• 默认值: css

通过组件导入 CSS 或 Sass (SCSS) 样式，使用 false 禁用自动导入样式。

themes

• 类型: array

需要自动导入样式的主题列表。

例如: ['dark']

icon

• 类型: string | false
• 默认值: ElIcon

图标前缀名称，使用 false 禁用自动导入图标。

installMethods

• 类型: array

需要安装的方法列表。

例如: ['ElLoading', 'ElMessage', 'ElMessageBox', 'ElNotification']

namespace

• 类型：string
• 默认值: el

当您更改全局命名空间时，也必须在此处更改。

defaultLocale

• 类型：string

替换默认语言环境，您可以在此处找到语言环境列表

例如: 'zh-cn'

缓存

• 类型：boolean
• 默认值：false

是否缓存 element-plus 组件和指令。仅在开发模式下有效。

如果启用此功能，您将在开发模式下获得更快的加载速度。

themeChalk

• 类型: object

配置用于生成自定义主题的 SCSS 变量。仅当 importStyle 为 scss 时有效。

例如:

{
  $colors: {
    primary: { base: 'rgba(107,33,168, 1)' }
  },
  dark: {
    $colors: {
      primary: { base: 'rgb(242, 216, 22)' }
    }
  }
}

globalConfig

• 类型: object

设置全局配置，例如修改组件的默认 size 和 z-index。

例如: { size: 'small', zIndex: 3000 }

injectionID

• 类型: object
• 默认值: { prefix: 1024, current: 0 }

自动将 ID_INJECTION_KEY 注入 Vue。

injectionZIndex

• 类型: object
• 默认值: { current: 0 }

自动将 Z_INDEX_INJECTION_KEY 注入 Vue。

appendTo

• 类型: array

当您修改所有基于 ElTooltip 组件中的 append-to 属性时，需要在此处添加该值。

components

• 类型: array

如果有一些未从 Element Plus 自动导入的组件，您需要在此处添加组件名称。

例如: ['ElSubMenu']

subComponents

• 类型: object

子组件定义文件在其父组件中的组件映射。

directives

• 类型: object

如果有一些未从 Element Plus 自动导入的指令，您需要在此处添加指令名称。

imports (导入)

• 类型: array

如果您希望从 Element Plus 添加自动导入内容，您可以在此处添加。

例如:

[
  ['useLocale', 'es/hooks/use-locale/index.mjs'],
  [['castArray', 'unique'], 'es/utils/arrays.mjs']
],

baseImports

• 类型: array

即使禁用 autoImports，也会导入的导入列表。

noStylesComponents

• 类型: array

当组件错误加载样式时，您需要在此处添加组件名称。

包含

• 类型: array
• 默认值: [ /\.vue$/, /\.vue\?vue/, /\.vue\?v=/, /\.((c|m)?j|t)sx?$/]

包含需要自动导入样式的文件。

exclude

• 类型: array
• 默认值: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]

排除不需要自动导入样式的文件。

模板

element-plus-nuxt-starter

开发

• 运行 pnpm i 安装依赖项。
• 运行 pnpm dev:prepare 以生成类型存根。
• 运行 pnpm dev 在开发模式下启动 playground。
• 运行 pnpm dev:build 构建 playground。
• 运行 pnpm dev:start 在本地预览 playground。
• 运行 pnpm build 构建此项目。