@maxtan/ez-ui-nuxt

@maxtan/ez-ui-nuxt

ez-ui 的 Nuxt 模块：自动导入全部 Ez 组件与常用反馈类组合式方法，并按需注入 element-plus / ez-ui / normalize 样式。

内嵌 @element-plus/nuxt（经 moduleDependencies 自动安装），已关闭其样式与图标注入，样式统一由本模块编排，避免双重引入。

安装

全部依赖均可直接从 npm 公服安装：

pnpm add element-plus @maxtan/ez-ui @maxtan/normalize @maxtan/ez-ui-nuxt

配置

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@maxtan/ez-ui-nuxt']
})

默认开启全部能力，无需额外配置。如需调整：

export default defineNuxtConfig({
  modules: ['@maxtan/ez-ui-nuxt'],
  ezui: {
    normalize: true,       // 注入 @maxtan/normalize 基础样式
    importStyle: true,     // 注入 element-plus + ez-ui 全量样式
    importComposable: true // 自动导入反馈类组合式方法
  }
})

配置项

样式顺序与主题定制

最终样式顺序为：normalize → 项目自身 css → element-plus → ez-ui（后两者追加在 nuxt.config 的 css 数组之后）。

若项目需要深度定制 --ez-* 主题变量或与 Tailwind Prefetch 等全局样式共存，建议关闭本模块的样式注入，按 Vite 项目方式自行引入并覆写：

ezui: { importStyle: false, normalize: false }

工作区内的 play 沙盒即采用 importStyle: false（配合 Tailwind 使用）。

自动导入

Ez 组件（13 个）——模板直接使用，无需 import（组件说明见根 README 组件清单或组件文档）：

• 基础：EzIcon
• 表单：EzRadio EzCheckbox EzSelect EzDatePicker EzImageUpload EzDynamicForm EzFormItem
• 数据：EzPagination EzTable
• 反馈：EzDialog
• 高级：EzQueryPanel EzFastTable

element-plus 组件——由内嵌的 @element-plus/nuxt 自动导入（el-button、el-table 等）。

组合式方法——importComposable 开启时自动导入：

<script setup lang="ts">
// 无需 import，直接使用
const message = useElMessage()
const notify = useElNotification()

const onSave = () => message.success('保存成功')
</script>

使用示例

<template>
  <div>
    <el-button type="primary" @click="flag = !flag">Dialog</el-button>
    <ez-dialog v-model="flag">
      <div>dialog content</div>
    </ez-dialog>
  </div>
</template>

组件 API 与国际化（雪花 key 词条 / 中文兜底）说明见组件文档。

SSR

当前验证路径为 ssr: false（SPA），Nuxt 工程统一采用该配置；SSR 场景未验证。

工作区内开发

工作区内屏蔽 install 相关的钩子函数，按以下步骤构建：

# 工作区根目录：安装依赖（自动链接工作区内项目）
pnpm i

# 本项目根目录：生成 .nuxt 目录（类型推导、自动注入配置）
pnpm run init

# 构建产物：工作区根目录执行，或本项目根目录执行
pnpm run build:nuxt   # 工作区根目录
pnpm run build        # 本项目根目录

集成验证使用 play 沙盒（工作区根目录 pnpm play）。