@yh-ui/nuxt 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +32 -176
- package/package.json +6 -5
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,209 +1,65 @@
|
|
|
1
1
|
# @yh-ui/nuxt
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
<img src="https://raw.githubusercontent.com/1079161148/yh-ui/main/docs/public/logo.svg" width="100" height="100" alt="YH-UI Logo">
|
|
5
|
-
</p>
|
|
3
|
+
YH-UI 的 Nuxt 3/4 模块。它负责注册组件、自动导入 Hooks 和全局方法、注入发布后的 CSS，并处理 Nuxt SSR 下常见的样式、ID 和依赖转译问题。
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
[Nuxt Guide](https://1079161148.github.io/yh-ui/guide/nuxt) | [GitHub](https://github.com/1079161148/yh-ui)
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
开箱即用的 Nuxt 3/4 集成 · 组件自动导入 · SSR/Hydration 完全兼容 · 零配置启用
|
|
11
|
-
</p>
|
|
7
|
+
## Highlights
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</a>
|
|
20
|
-
<a href="https://github.com/1079161148/yh-ui/blob/main/LICENSE">
|
|
21
|
-
<img src="https://img.shields.io/npm/l/@yh-ui/nuxt.svg?style=flat-square" alt="license">
|
|
22
|
-
</a>
|
|
23
|
-
</p>
|
|
9
|
+
- 零手写导入：`YhButton`、`YhTable`、`YhAiChat` 等组件可以直接在页面和组件中使用。
|
|
10
|
+
- Composable 自动导入：`useNamespace`、`useZIndex`、`useLocale`、`useVirtualScroll`、`useAiChat`、`useSKU` 等自动可用。
|
|
11
|
+
- 全局方法自动导入：`YhMessage`、`YhNotification`、`YhMessageBox`、`YhLoading`、`useAddressParser` 等常用能力直接调用。
|
|
12
|
+
- SSR 友好：运行时插件隔离请求状态，依赖自动 transpile，样式通过发布 CSS 入口注入。
|
|
13
|
+
- 可配置前缀：默认使用 `Yh` 前缀，也可以通过 `prefix` 调整组件注册名。
|
|
14
|
+
- 支持 Nuxt `^3.11.0` 和 `^4.0.0-rc.1`。
|
|
24
15
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
## ✨ 特性
|
|
28
|
-
|
|
29
|
-
- ✅ **完整 SSR 支持** — 工业级验证，解决所有 Hydration Mismatch 问题
|
|
30
|
-
- 🔄 **组件自动导入** — 所有 YhXxx 组件无需手动 `import`，开箱即用
|
|
31
|
-
- 🪝 **Composable 自动导入** — `useNamespace`、`useLocale`、`useZIndex` 等自动可用
|
|
32
|
-
- 🎨 **样式自动注入** — 主题样式在正确的时机注入，避免 FOUC
|
|
33
|
-
- 🌍 **i18n 配置** — 一行配置默认语言，支持 67 种语言
|
|
34
|
-
- 🔒 **TypeScript 完整类型** — 模块配置选项均有类型提示
|
|
35
|
-
- ⚡ **Nuxt 3 & 4 兼容** — 支持最新 Nuxt 4.x RC
|
|
36
|
-
|
|
37
|
-
---
|
|
38
|
-
|
|
39
|
-
## 📦 安装
|
|
16
|
+
## Install
|
|
40
17
|
|
|
41
18
|
```bash
|
|
42
19
|
pnpm add @yh-ui/nuxt
|
|
43
|
-
|
|
44
|
-
# npm
|
|
45
|
-
npm install @yh-ui/nuxt
|
|
46
20
|
```
|
|
47
21
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
---
|
|
51
|
-
|
|
52
|
-
## 🔨 快速开始
|
|
53
|
-
|
|
54
|
-
### 第 1 步：注册模块
|
|
22
|
+
## Setup
|
|
55
23
|
|
|
56
24
|
```ts
|
|
57
|
-
// nuxt.config.ts
|
|
58
25
|
export default defineNuxtConfig({
|
|
59
26
|
modules: ['@yh-ui/nuxt'],
|
|
60
|
-
|
|
61
27
|
yhUI: {
|
|
62
|
-
importStyle: true,
|
|
63
|
-
|
|
28
|
+
importStyle: true,
|
|
29
|
+
buildTranspile: true,
|
|
30
|
+
prefix: 'Yh',
|
|
31
|
+
ssrOptimization: {
|
|
32
|
+
componentCache: true
|
|
33
|
+
}
|
|
64
34
|
}
|
|
65
35
|
})
|
|
66
36
|
```
|
|
67
37
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
### 第 2 步：直接使用组件
|
|
71
|
-
|
|
72
|
-
注册模块后，**所有 YhXxx 组件和 composable 自动导入**，无需任何额外配置：
|
|
38
|
+
## Use Components Directly
|
|
73
39
|
|
|
74
40
|
```vue
|
|
75
|
-
<!-- pages/index.vue -->
|
|
76
41
|
<template>
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<YhTable :data="tableData" :columns="columns" />
|
|
81
|
-
</div>
|
|
42
|
+
<YhButton type="primary">Create</YhButton>
|
|
43
|
+
<YhInput v-model="keyword" clearable placeholder="Search" />
|
|
44
|
+
<YhTable :data="rows" :columns="columns" />
|
|
82
45
|
</template>
|
|
83
46
|
|
|
84
47
|
<script setup lang="ts">
|
|
85
|
-
// 无需 import！
|
|
86
48
|
const keyword = ref('')
|
|
87
|
-
const
|
|
88
|
-
const columns = [{ prop: 'name', label: '
|
|
49
|
+
const rows = ref([{ id: 1, name: 'YH-UI' }])
|
|
50
|
+
const columns = [{ prop: 'name', label: 'Name' }]
|
|
89
51
|
</script>
|
|
90
52
|
```
|
|
91
53
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
```vue
|
|
95
|
-
<script setup lang="ts">
|
|
96
|
-
// 以下 composable 均无需 import，直接使用
|
|
97
|
-
const ns = useNamespace('my-component') // BEM 类名
|
|
98
|
-
const id = useId() // Vue/Nuxt 原生稳定唯一 ID
|
|
99
|
-
const yhId = useYhId() // YH-UI hooks 别名导入
|
|
100
|
-
const { nextZIndex } = useZIndex() // z-index 管理
|
|
101
|
-
const { t } = useLocale() // i18n 翻译
|
|
102
|
-
</script>
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
### 使用全局方法
|
|
106
|
-
|
|
107
|
-
```vue
|
|
108
|
-
<script setup lang="ts">
|
|
109
|
-
const showSuccess = () => {
|
|
110
|
-
YhMessage.success('操作成功！')
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
const showNotification = () => {
|
|
114
|
-
YhNotification({
|
|
115
|
-
title: '系统通知',
|
|
116
|
-
message: '您有一条新消息',
|
|
117
|
-
type: 'info'
|
|
118
|
-
})
|
|
119
|
-
}
|
|
120
|
-
</script>
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
---
|
|
124
|
-
|
|
125
|
-
## ⚙️ 配置选项
|
|
126
|
-
|
|
127
|
-
```ts
|
|
128
|
-
// nuxt.config.ts
|
|
129
|
-
export default defineNuxtConfig({
|
|
130
|
-
modules: ['@yh-ui/nuxt'],
|
|
131
|
-
yhUI: {
|
|
132
|
-
importStyle: true, // 是否自动注入 CSS 样式；默认 true
|
|
133
|
-
locale: 'zh-CN' // 默认语言代码
|
|
134
|
-
}
|
|
135
|
-
})
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
| 选项 | 类型 | 默认值 | 说明 |
|
|
139
|
-
| ------------- | --------- | --------- | --------------------------- |
|
|
140
|
-
| `importStyle` | `boolean` | `true` | 是否自动注入 YH-UI CSS 样式 |
|
|
141
|
-
| `locale` | `string` | `'zh-CN'` | 默认语言代码（67 种可选） |
|
|
142
|
-
|
|
143
|
-
`importStyle` 为 `true` 时，模块会直接向 `nuxt.options.css` 注入 `@yh-ui/components/style.css`。
|
|
144
|
-
|
|
145
|
-
---
|
|
146
|
-
|
|
147
|
-
## 🌐 SSR 问题说明
|
|
148
|
-
|
|
149
|
-
本模块已系统性地处理 Nuxt SSR 中的常见问题：
|
|
150
|
-
|
|
151
|
-
| 问题 | 解决方案 |
|
|
152
|
-
| -------------------------------- | -------------------------------------------------- |
|
|
153
|
-
| ID 不一致导致 Hydration Mismatch | 使用 Vue 3.5 原生 `useId()`，服务端/客户端生成一致 |
|
|
154
|
-
| z-index 状态污染 | 通过 provide/inject 为每个请求隔离计数器 |
|
|
155
|
-
| DOM 操作在服务端报错 | 所有 DOM 访问均使用 `isClient` 防护 |
|
|
156
|
-
| 样式注入时机不对（FOUC） | 在 Nuxt 正确的生命周期钩子注入样式 |
|
|
157
|
-
|
|
158
|
-
---
|
|
159
|
-
|
|
160
|
-
## 🔄 自动导入的组件（部分）
|
|
161
|
-
|
|
162
|
-
以下组件开箱即用，无需手动 `import`：
|
|
163
|
-
|
|
164
|
-
```
|
|
165
|
-
YhButton YhInput YhInputNumber YhInputTag
|
|
166
|
-
YhSelect YhOption YhCascader YhCascaderPanel
|
|
167
|
-
YhCheckbox YhCheckboxGroup YhRadio YhRadioGroup
|
|
168
|
-
YhSwitch YhRate YhSlider YhDatePicker
|
|
169
|
-
YhTimePicker YhColorPicker YhUpload YhTransfer
|
|
170
|
-
YhTreeSelect YhForm YhFormItem YhFormSchema
|
|
171
|
-
YhTable YhTree YhList YhCard
|
|
172
|
-
YhBadge YhTag YhAvatar YhImage
|
|
173
|
-
YhDialog YhDrawer YhTooltip YhPopover
|
|
174
|
-
YhPopconfirm YhMessage YhNotification YhAlert
|
|
175
|
-
YhProgress YhSkeleton YhLoading YhPagination
|
|
176
|
-
YhMenu YhTabs YhBreadcrumb YhSteps
|
|
177
|
-
YhRow YhCol YhDivider YhSpace
|
|
178
|
-
YhIcon YhConfigProvider YhChart YhGantt
|
|
179
|
-
YhAiBubble YhAiSender YhAiProvider ... 共 77+ 个
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
## 🪝 自动导入的 Composable
|
|
183
|
-
|
|
184
|
-
```
|
|
185
|
-
useNamespace useYhId useZIndex useLocale
|
|
186
|
-
useFormItem useConfig useCache useClickOutside
|
|
187
|
-
useEventListener useScrollLock useCountdown useSKU
|
|
188
|
-
useVirtualScroll useAI
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
---
|
|
192
|
-
|
|
193
|
-
## ⚠️ 注意事项
|
|
194
|
-
|
|
195
|
-
1. **样式引入顺序**：若与其他 CSS 框架共存，注意样式的加载顺序，避免优先级冲突
|
|
196
|
-
2. **Flow 组件**：`@yh-ui/flow` 流程图组件依赖浏览器 Canvas API，需用 `<ClientOnly>` 包裹
|
|
197
|
-
3. **Nuxt 4 兼容**：Nuxt 4.x 对 `auto-imports` 规则有变化，本模块已做对应适配
|
|
198
|
-
|
|
199
|
-
---
|
|
200
|
-
|
|
201
|
-
## 🔗 相关资源
|
|
54
|
+
## Module Options
|
|
202
55
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
56
|
+
| Option | Type | Default | Description |
|
|
57
|
+
| -------------------------------- | --------- | ------- | ----------------------------------------- |
|
|
58
|
+
| `importStyle` | `boolean` | `true` | Inject `@yh-ui/components/style.css` |
|
|
59
|
+
| `buildTranspile` | `boolean` | `true` | Add YH-UI packages to Nuxt transpile list |
|
|
60
|
+
| `prefix` | `string` | `'Yh'` | Component name prefix |
|
|
61
|
+
| `ssrOptimization.componentCache` | `boolean` | `true` | Enable SSR component cache hints |
|
|
206
62
|
|
|
207
|
-
##
|
|
63
|
+
## License
|
|
208
64
|
|
|
209
|
-
MIT
|
|
65
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yh-ui/nuxt",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"description": "Nuxt module for YH-UI",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/module.cjs",
|
|
@@ -11,16 +11,17 @@
|
|
|
11
11
|
"types": "./dist/module.d.ts",
|
|
12
12
|
"import": "./dist/module.mjs",
|
|
13
13
|
"require": "./dist/module.cjs"
|
|
14
|
-
}
|
|
14
|
+
},
|
|
15
|
+
"./package.json": "./package.json"
|
|
15
16
|
},
|
|
16
17
|
"files": [
|
|
17
18
|
"dist"
|
|
18
19
|
],
|
|
19
20
|
"dependencies": {
|
|
20
21
|
"@nuxt/kit": "^3.11.0 || ^4.0.0",
|
|
21
|
-
"@yh-ui/components": "^1.0.
|
|
22
|
-
"@yh-ui/hooks": "^1.0.
|
|
23
|
-
"@yh-ui/theme": "^1.0.
|
|
22
|
+
"@yh-ui/components": "^1.0.8",
|
|
23
|
+
"@yh-ui/hooks": "^1.0.8",
|
|
24
|
+
"@yh-ui/theme": "^1.0.8"
|
|
24
25
|
},
|
|
25
26
|
"devDependencies": {
|
|
26
27
|
"@nuxt/schema": "^3.11.0 || ^4.0.0",
|