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 (注入 ID)
- 类型:
object - 默认值:
{ prefix: 1024, current: 0 }
自动将 ID_INJECTION_KEY 注入 Vue。
injectionZIndex (注入 Z-Index)
- 类型:
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[\\/]/]
不需要自动导入样式的文件。
模板
开发
- 运行
pnpm i安装依赖。 - 运行
pnpm dev:prepare以生成类型存根。 - 运行
pnpm dev在开发模式下启动 playground。 - 运行
pnpm dev:build构建 playground。 - 运行
pnpm dev:start本地预览 playground。 - 运行
pnpm build构建此项目。