Element Plus Nuxt
Element Plus 为 Nuxt 提供的模块
特性
- 按需自动导入组件和样式。
- 按需自动导入指令和样式。
- 自动导入来自 @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>
参考 Nuxt 文档 和 playground 的使用方法。
选项
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以开发模式启动 playground。 - 运行
pnpm dev:build构建 playground。 - 运行
pnpm dev:start在本地预览 playground。 - 运行
pnpm build构建此项目。