元素加纳克特

元素加号 模块 坚果

特征

• 按需自动导入组件和样式 .
• 按需自动导入指令和样式 .
• 自动导入图标 @element-plus/icons-vue。 。 。 .
• 自动导入 ElMessage, El Notification等方法.
• 自动将ID INJECTION KEY和ZINDEQINJECTION KEY注入Vue.
• 自动将 Teleport 标记输入到 HTML 页面的正确位置.

安装

[尖叫声] 自从 日数 由元素加在内部使用不是 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

配置

[尖叫声] 目前,该方法不能自动获得上下文,您需要手动配置 安装方法 在选项中.

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 文档 财务报告和审定财务报表 游乐场 使用时.

选项

导入样式

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

导入带有组件的样式 cs 或 sass( scs), 禁用自动导入样式 false。 。 。 .

主题

• 类型 : array

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

譬如说. ['dark']

图标

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

图标前缀名称, 禁用自动导入图标 false。 。 。 .

安装方法

• 类型 : array

需要安装的方法清单.

譬如说. ['ElLoading', 'ElMessage', 'ElMessageBox', 'ElNotification']

命名空间

• 类型 : string
• 默认 : el

当您改变全球命名空间时, 您也必须在这里更改它 .

默认本地

• 类型 : string

替换默认区域, 您可以找到区域列表 这里

譬如说. 'zh-cn'

缓存

• 类型 : boolean
• 默认 : false

是否缓存元素加组件和指令 . 只在开发模式中有效。 。 。 .

如果您启用了此功能, 您将会在开发模式中获得更快的加载速度 .

主题

• 类型 : object

配置 SCSS 变量生成自定义主题 . 只有在 importStyle 实值 scss。 。 。 .

譬如说.

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

全局配置

• 类型 : object

设置全局配置, 如修改默认 size 财务报告和审定财务报表 z-index 构成部分.

譬如说. { size: 'small', zIndex: 3000 }

注射标识

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

自动将 ID INJECTION KEY 输入 Vue .

注射 Zindex 数据

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

自动将 Z INDEQINJECTION KEY 注入 Vue.

附录

• 类型 : array

当你修改 append-to 全部基于 ElTooltip 组件的道具, 您需要在此添加值 .

组件

• 类型 : array

如果有组件没有从 Element Plus 自动导入, 您需要在此添加组件名称 .

譬如说. ['ElSubMenu']

子组件

• 类型 : object

子组件定义文件在其母组件中的组件映射.

指令

• 类型 : object

如果有指令不是自动从 Element Plus 导入, 您需要在此添加指令名称 .

进口

• 类型 : array

如果您想要从 Element Plus 中自动导入内容, 您可以在此添加 .

譬如说.

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

基础导入

• 类型 : array

是否禁用自动导入将导入的列表 .

无样式组件

• 类型 : array

当组件错误地加载样式时,需要在此添加组件名称.

包含

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

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

排除

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

不包括不需要自动导入样式的文件.

模板

元素加- nuxt 启动器

发展

• 运行 pnpm i 以安装依赖.
• 运行 pnpm dev:prepare 生成类型根.
• 运行 pnpm dev 在开发模式中开始操场.
• 运行 pnpm dev:build 建造游乐场.
• 运行 pnpm dev:start 到本地预览游乐场.
• 运行 pnpm build 建造这个项目.