Element Plus Nuxt
适用于 Nuxt 的 Element Plus 模块
特性
- 按需自动导入组件和样式。
- 按需自动导入指令和样式。
- 自动从 @element-plus/icons-vue 导入图标。
- 自动导入 ElMessage、ElNotification 等方法。
- 自动将 ID_INJECTION_KEY 和 ZINDEX_INJECTION_KEY 注入到 Vue 中。
- 自动将传送门标记注入到最终页面 HTML 中的正确位置。
安装
！警告 由于 element-plus 内部使用的 dayjs 不是 JavaScript 模块，为了确保它在启动前可以转换为 JavaScript 模块，您需要在项目的根目录中添加一个
.npmrc文件并添加以下配置shamefully-hoist=true或者单独安装
dayjs依赖项。
npx nuxi@latest module add element-plus
# or
npm i element-plus @element-plus/nuxt -D
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>
选项
importStyle
- 类型：
'css' | 'scss' | boolean - 默认值：
css
使用组件导入样式 css 或 sass(scss)，使用 false 禁用自动导入样式。
themes
- 类型：
array
需要自动导入样式的主题列表。
例如：['dark']
icon
- 类型：
string | false - 默认值：
ElIcon
图标前缀名称，使用 false 禁用自动导入图标。
namespace
- 类型：
string - 默认值：
el
当您更改全局命名空间时，您也必须在此处更改它。
defaultLocale
- 类型：
string
替换默认语言环境，您可以在 此处 找到语言环境列表
例如：'zh-cn'
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']
],
noStylesComponents
- 类型：
array
当组件错误地加载样式时，您需要在此处添加组件名称。
include
- 类型：
array - 默认值：
[ /\.vue$/, /\.vue\?vue/, /\.vue\?v=/, /\.((c|m)?j|t)sx?$/]
包含需要自动导入样式的文件。
exclude
- 类型：
array - 默认值：
[/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
排除不需要自动导入样式的文件。
模板
开发
- 运行
pnpm i以安装依赖项。 - 运行
pnpm dev:prepare以生成类型存根。 - 运行
pnpm dev以在开发模式下启动示例。 - 运行
pnpm dev:build以构建示例。 - 运行
pnpm dev:start以本地预览示例。 - 运行
pnpm build以构建此项目。