@neatui/nuxt 1.0.0 → 1.0.2

package/IMPORT_GUIDE.md

@@ -0,0 +1,142 @@
+# 组件导入指南
+
+## 🚀 解决导入错误
+
+如果遇到 `Module '"@neatui/nuxt"' has no exported member 'Textarea'` 错误，请使用以下方式：
+
+### ✅ 正确的导入方式
+
+#### 方式1: 自动导入 (推荐)
+```vue
+<template>
+  <!-- 配置模块后直接使用，无需导入 -->
+  <NeatTextarea v-model="content" />
+  <NeatInput v-model="name" />
+  <NeatSelect v-model="city" :options="cities" />
+</template>
+
+<script setup>
+// 无需导入，组件自动可用
+const content = ref('')
+const name = ref('')
+const city = ref('')
+</script>
+```
+
+#### 方式2: 手动导入
+```vue
+<template>
+  <!-- 使用原组件名 -->
+  <Textarea v-model="content" />
+  <Input v-model="name" />
+  <Select v-model="city" :options="cities" />
+</template>
+
+<script setup>
+// 直接从包导入，就像普通Vue组件库一样
+import { Textarea, Input, Select } from '@neatui/nuxt'
+
+const content = ref('')
+const name = ref('')
+const city = ref('')
+</script>
+```
+
+### ❌ 错误的导入方式
+
+```vue
+<script setup>
+// 🚫 错误：不能从根路径直接导入组件
+import { Textarea } from '@neatui/nuxt'
+
+// 🚫 错误：默认导入方式
+import Textarea from '@neatui/nuxt'
+</script>
+```
+
+## 📋 可用组件列表
+
+### 表单组件
+```js
+import {
+  Input,           // 输入框
+  Textarea,        // 文本域
+  Select,          // 选择器
+  Switch,          // 开关
+  Checkbox,        // 复选框
+  DatePicker,      // 日期选择
+  DateView,        // 日期显示
+  TimePicker,      // 时间选择
+  Upload,          // 文件上传
+  ImgUpload,       // 图片上传
+  Cascader,        // 级联选择
+  PageSelect,      // 分页选择
+  MoreSelect,      // 更多选择
+  SelectTags,      // 标签选择
+  // ... 更多组件
+} from '@neatui/nuxt'
+```
+
+### 加载器组件
+```js
+import {
+  FormLoader,      // 表单构建器
+  TableLoader,     // 表格加载器
+  ViewLoader,      // 视图加载器
+  LimitLoader,     // 限制加载器
+  MoveLoader,      // 移动加载器
+  LayerLoader,     // 层级加载器
+} from '@neatui/nuxt'
+```
+
+### 工具组件
+```js
+import {
+  FormVerifyView,  // 表单验证视图
+  FormDraftsView,  // 表单草稿视图
+  MoreTools,       // 更多工具
+  Pagination,      // 分页组件
+} from '@neatui/nuxt'
+```
+
+## 🔧 配置说明
+
+### nuxt.config.ts
+```ts
+export default defineNuxtConfig({
+  modules: ['@neatui/nuxt'],
+  neatui: {
+    prefix: 'Neat',      // 自动导入时的前缀
+    autoImport: true,    // 是否启用自动导入
+    exclude: []          // 排除的组件
+  }
+})
+```
+
+### package.json 导出配置
+```json
+{
+  "exports": {
+    ".": "./src/module.ts",           // Nuxt模块
+    "./components": "./src/index.ts"  // 组件导出
+  }
+}
+```
+
+## 💡 使用建议
+
+1. **优先使用自动导入**: 配置模块后直接使用 `<NeatTextarea>`
+2. **按需手动导入**: 只在需要时从 `/components` 导入
+3. **统一命名**: 自动导入使用前缀，手动导入使用原名
+4. **TypeScript支持**: 两种方式都有完整的类型提示
+
+## 🐛 常见问题
+
+**Q: 为什么不能直接从 '@neatui/nuxt' 导入组件？**
+A: '@neatui/nuxt' 是Nuxt模块，用于配置。组件需要从 '@neatui/nuxt/components' 导入。
+
+**Q: 自动导入的组件没有类型提示？**
+A: 确保安装了 '@nuxt/kit' 依赖，并重启TypeScript服务。
+
+**Q: 可以混合使用两种方式吗？**
+A: 可以，但建议保持一致性，避免混乱。

package/USAGE.md

@@ -24,7 +24,11 @@ export default defineNuxtConfig({
 
 ## 🎯 基础使用
 
-### 表单组件
+### 方式1: 自动导入 (推荐)
+
+配置模块后，组件会自动注册，直接在模板中使用：
+
+#### 表单组件
 
 ```vue
 <template>
@@ -165,6 +169,33 @@ const formConfig = [
 </script>
 ```
 
+### 方式2: 手动导入
+
+如果不想使用自动导入，可以直接导入组件：
+
+```vue
+<template>
+  <div>
+    <Textarea v-model="content" placeholder="请输入内容" />
+    <Input v-model="name" placeholder="请输入姓名" />
+    <Select v-model="city" :options="cities" />
+  </div>
+</template>
+
+<script setup>
+// 直接从包导入组件
+import { Textarea, Input, Select } from '@neatui/nuxt'
+
+const content = ref('')
+const name = ref('')
+const city = ref('')
+const cities = [
+  { label: '北京', value: 'beijing' },
+  { label: '上海', value: 'shanghai' }
+]
+</script>
+```
+
 ## 🎨 主题定制
 
 ### 使用CSS变量

package/package.json

@@ -1,16 +1,9 @@
 {
   "name": "@neatui/nuxt",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "NeatUI component library for Nuxt 3",
-  "main": "./src/module.ts",
-  "types": "./src/module.ts",
-  "exports": {
-    ".": {
-      "types": "./src/module.ts",
-      "import": "./src/module.ts",
-      "require": "./src/module.ts"
-    }
-  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "license": "MIT",
   "author": "xiaojunbo",
   "keywords": ["nuxt", "nuxt-module", "vue", "ui", "components"],

package/src/index.ts

@@ -1,10 +1,13 @@
-// 数据
-export * from './store/frame';
-export * from './utils/theme';
+// Nuxt模块 (默认导出)
+export { default } from './module'
 
-// 组件
+// 组件导出
 export * from './components/basic';
 export * from './components/display';
 export * from './components/form';
 export * from './components/loader';
 export * from './components/tools';
+
+// 数据和工具
+export * from './store/frame';
+export * from './utils/theme';