# 模型创建使用 NuxtJS 4 (Vue) 或 Next.js (React) 以及 TypeScript 和 TailwindCSS v4 创建精美的交互式 UI 模型和原型。 ## 概述通过以下方式快速创建生产质量的模型： **NuxtJS 4（Vue）：** * **Vue 3 Composition API** 与 TypeScript * **Vite** 捆绑器（内置） * **自动导入**组件和可组合项 * **零配置 TypeScript** 具有自动生成的类型 * **来自页面/目录的基于文件的路由** **Next.js（反应）：** * **React 19** 与 TypeScript v5.1.0+ * **Turbopack** 捆绑器（默认，比 Webpack 更快） * **应用程序路由器** 与服务器/客户端组件 * **内置 TypeScript** 零配置 * **来自应用程序/目录的基于文件的路由** **共同特点：** * **TailwindCSS v4** 具有现代工具 * **组件驱动架构** * **服务器端渲染 (SSR)** 或静态站点生成 (SSG) * **互动反应** * **生产就绪优化** ## 快速入门 ### 选项 A：NuxtJS 4（基于 Vue） ### 选项 A：NuxtJS 4（基于 Vue） #### 1\.初始化项目 # 创建 NuxtJS 4 项目（默认启用 TypeScript） npx nuxi@latest init my-mockup cd 我的样机 npm 安装 #### 2\.安装和配置 TailwindCSS **安装 TailwindCSS v4 和 Vite 插件：** npm install -D tailwindcss @tailwindcss/vite **配置nuxt.config.ts：** // https://nuxt.com/docs/4.x/api/configuration/nuxt-config 从“@tailwindcss/vite”导入 tailwindcss 导出默认的defineNuxtConfig({ 开发工具：{启用：true}，打字稿：{ 严格：真实，类型检查：true }, // 自动导入组件和可组合项组成部分：[ { 路径：'~/组件'，路径前缀：假， }, ], // 应用配置应用程序：{ 头：{ 字符集：'utf-8'，视口：'宽度=设备宽度，初始比例=1'，标题：“我的模型”，元：[ { name: 'description', content: '我的模型描述' } ], } }, // 使用 TailwindCSS v4 进行 Vite 配置投票：{ 插件：[ 尾风CSS() ], CSS：{ devSourcemap：true } } }) **创建CSS文件并导入TailwindCSS（例如assets/css/main.css）：** @导入“tailwindcss”； **在app.vue或nuxt.config.ts中导入CSS：** // 在 nuxt.config.ts 中，添加配置：导出默认的defineNuxtConfig({ css: ['~/assets/css/main.css'], // ...配置的其余部分 }) #### 3\.开始开发 npm 运行开发 # 打开 http://localhost:3000 ### 选项 B：Next.js（基于 React） #### 1\.初始化项目 # 创建 Next.js 项目（使用 TypeScript 和 TailwindCSS 的推荐默认值） npx create-next-app@latest my-mockup --是 cd 我的样机 **或使用自定义选项：** npx create-next-app@latest my-mockup # 选择：TypeScript：是，TailwindCSS：是，App Router：是 #### 2\.验证 TailwindCSS v4 设置 **Next.js 默认包含 TailwindCSS。升级到 v4：** npm install -D tailwindcss@next @tailwindcss/postcss@next **更新 tailwind.config.ts：** 从 'tailwindcss' 导入类型 { Config } 导出默认值{ 内容：[ './app/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', ], } 满足配置 **更新 postcss.config.mjs:** 导出默认值{ 插件：{ '@tailwindcss/postcss': {}, }, } **更新app/globals.css：** @导入“tailwindcss”； #### 3\.开始开发 npm 运行开发 # 打开 http://localhost:3000 ## 工作流程 ### 1\.定义结构确定模型要求： * 布局类型（单页、仪表板、多页） * 需要的部分（标题、英雄、功能、页脚、侧边栏） * 响应式断点（移动设备、平板电脑、桌面设备） * 交互元素（表单、模式、下拉菜单） ### 2\.创建组件架构 **NuxtJS (Vue) 自动导入自：** 我的样机/ ├── 组件/ │ ├── layout/ # 页眉、页脚、侧边栏（自动导入） │ ├── ui/ # 按钮、卡片、模态、输入（自动导入） │ └──sections/ # 英雄、特色、感言（自动导入） ├──pages/ # 基于文件的路由（自动路由） ├── composables/ # 共享逻辑（自动导入） ├── layouts/ # 布局模板（default.vue、dashboard.vue） └── types/ # TypeScript 接口 **Next.js（React）结构：** 我的样机/ ├── 应用程序/ │ ├──layout.tsx # 根布局（必填） │ ├── page.tsx # 主页 │ ├── 仪表盘/ │ │ └── page.tsx # /仪表板路线 │ └── globals.css # TailwindCSS 导入 ├── 组件/ │ ├── 布局/ # 页眉、页脚、侧边栏 │ ├── ui/ # 按钮、卡片、模态、输入 │ └── 章节/ # 英雄、特色、感言 ├── lib/ # 实用程序和共享逻辑 └── types/ # TypeScript 接口 ### 3\.构建组件 **NuxtJS (Vue) 示例：类型安全按钮组件 (components/ui/Button.vue)** <脚本设置lang =“ts”> // 无需导入 'compulated' - 由 Nuxt 自动导入接口道具 { 变体？： '主要' | '次要' | ‘大纲’ 尺寸？： 'sm' | 'md' | 'LG' } const props = withDefaults(defineProps(), { 变体：“主要”，尺寸：'md' }) const ButtonClasses = 计算(() => { 常量变体 = { 主要：'bg-blue-600 文本白色悬停：bg-blue-700'，次要：'bg-gray-600 文本白色悬停：bg-gray-700'，大纲：'border-2 border-blue-600 text-blue-600悬停：bg-blue-50' } 常量大小 = { sm: 'px-3 py-1.5 文本-sm', md: 'px-4 py-2 文本库', lg: 'px-6 py-3 文本-lg' } 返回 `font-semibold rounded-lg 过渡 ${variants[props.variant]} ${size[props.size]}` }) <模板> <按钮：class =“按钮类”> <槽位/> **pages/index.vue 中的用法：** <模板>

开始使用

**Next.js (React) 示例：类型安全按钮组件 (components/ui/Button.tsx)** 从 'react' 导入 { ButtonHTMLAttributes } 接口 ButtonProps 扩展 ButtonHTMLAttributes { 变体？： '主要' | '次要' | ‘大纲’ 尺寸？： 'sm' | 'md' | 'LG' 子级：React.ReactNode } 导出函数按钮({ 变体='主要'，大小='md'，孩子们，类名 = '', ...道具 }: 按钮属性) { 常量变体 = { 主要：'bg-blue-600 文本白色悬停：bg-blue-700'，次要：'bg-gray-600 文本白色悬停：bg-gray-700'，大纲：'border-2 border-blue-600 text-blue-600悬停：bg-blue-50' } 常量大小 = { sm: 'px-3 py-1.5 文本-sm', md: 'px-4 py-2 文本库', lg: 'px-6 py-3 文本-lg' } const buttonClasses = `font-semibold rounded-lg 过渡 ${variants[variant]} ${sizes[size]} ${className}` 返回（ <按钮类名={buttonClasses} {...props}> {孩子} ） } **在 app/page.tsx 中的用法：** 从 '@/components/ui/Button' 导入 { Button } 导出默认函数 Home() { 返回（

<按钮变体=“主要”大小=“lg”> 开始使用

） } ### 4\.应用响应式设计使用 TailwindCSS 断点： * `sm:` (640px)、`md:` (768px)、`lg:` (1024px)、`xl:` (1280px)、`2xl:` (1536px) **NuxtJS (Vue) 响应式网格示例：** <模板>

<脚本设置lang =“ts”> 常量项 = ref([...]) **Next.js (React) 响应式网格示例：** 从 '@/components/ui/Card' 导入 { Card } 导出默认函数 FeaturesSection() { 常量项 = [ { id: 1, 标题: '功能 1', 描述: '...' }, // ... ] 返回（

{items.map((item) => ( <卡密钥={item.id} 数据={item} /> ))}

） } ### 5\.添加互动性 **NuxtJS (Vue) 可组合模式 (composables/useModal.ts)：** // 由 Nuxt 自动导入 - 无需导入 'ref' 导出函数 useModal() { const isOpen = ref(假) const open = () => { isOpen.value = true } const close = () => { isOpen.value = false } 返回 { isOpen, 打开, 关闭 } } **在任何 Vue 组件中的使用：** <脚本设置lang =“ts”> // 自动导入 - 无需导入语句 const { isOpen, 打开, 关闭 } = useModal() **Next.js (React) 自定义钩子模式 (lib/hooks/useModal.ts):** 从 'react' 导入 { useState } 导出函数 useModal() { const [isOpen, setIsOpen] = useState(false) const open = () => setIsOpen(true) const close = () => setIsOpen(false) 返回 { isOpen, 打开, 关闭 } } **在任何 React 组件中的使用：** 'use client' // 标记为用于交互的客户端组件从 '@/lib/hooks/useModal' 导入 { useModal } 导出默认函数 MyComponent() { const { isOpen, 打开, 关闭 } = useModal() 返回（

{isOpen && }

） } ### 6\.为生产而构建 **NuxtJS：** npm run build # 为生产构建 (.output/) npm run Preview # 预览生产版本 npm rungenerate # 生成静态站点（SSG） **下一个.js：** npm run build # 为生产构建 (.next/) npm run start # 启动生产服务器（SSR） # 对于静态导出（SSG），添加到 next.config.js： # 输出：'导出' ## 常见模式 ### 登陆页面 (NuxtJS) **创建布局（layouts/default.vue）：** <模板>

<布局标题/> <主类=“flex-1”> <槽位/> <布局页脚/>

**创建页面（pages/index.vue）：** <模板>

<章节英雄/> <部分功能/>

### 登陆页面 (Next.js) **创建布局（app/layout.tsx）：** 从 '@/components/layout/Header' 导入 { Header } 从 '@/components/layout/Footer' 导入 { Footer } 导入'./globals.css' 导出默认函数 RootLayout({ 孩子们， }：{ 子级：React.ReactNode }) { 返回（ <标题/>

{子项}

<页脚/> ） } **创建页面（app/page.tsx）：** 从 '@/components/sections/Hero' 导入 { Hero } 从“@/components/sections/Features”导入{功能} 导出默认函数 Home() { 返回（

<英雄/> <特点/>

） } ### 仪表板布局 (NuxtJS) **创建仪表板布局（layouts/dashboard.vue）：** <模板>

<槽位/>

**在页面中使用（pages/dashboard/index.vue）：** <脚本设置lang =“ts”> 定义页面元数据({ 布局：“仪表板” }) <模板>

### 仪表板布局 (Next.js) **创建仪表板布局（app/dashboard/layout.tsx）：** 从 '@/components/layout/Sidebar' 导入 { Sidebar } 从 '@/components/layout/TopBar' 导入 { TopBar } 导出默认函数 DashboardLayout({ 孩子们， }：{ 子级：React.ReactNode }) { 返回（

{孩子}

） } **在页面（app/dashboard/page.tsx）中使用：** 导出默认函数 DashboardPage() { 返回（

{/* 仪表板内容 */}

） } ## 设计系统 ### 颜色 * 主要：`blue-600`，次要：`gray-600` * 成功：`green-600`，警告：`yellow-600`，错误：`red-600` * 中性：“gray-100”至“gray-900” ### 间距使用一致的比例：`p-1` (4px)、`p-2` (8px)、`p-4` (16px)、`p-6` (24px)、`p-8` (32px) ### 版式 * 标题：`text-4xl`、`text-3xl`、`text-2xl`、`text-xl` * 正文：`基于文本` (16px) * 粗细：`font-normal`、`font-medium`、`font-semibold`、`font-bold` ## 高级指南详细实现： * **[组件库]()** \- 使用 TypeScript 完成可重用的 Vue 组件 * **[TailwindCSS v4 模式]()** \- 高级样式（适用于两个框架） * **[NuxtJS 可组合项]()** \- 状态管理和自动导入（特定于 Vue） * **[React Hooks]()** \- 自定义挂钩和状态管理（特定于 React） * **[动画]()** \- Vue 过渡和 TailwindCSS 动画 * **[示例]()** \- 完整的 Vue/NuxtJS 模型示例 * **[部署]()** \- 两个框架的构建和托管指南 ## 脚本 `scripts/` 中提供了帮助程序脚本（Bash 和 PowerShell 版本）： **create-component.sh / .ps1** \- 使用 TypeScript 样板生成组件 # Linux/macOS - Vue 组件 ./scripts/create-component.sh 组件名称 ui vue # Linux/macOS - React 组件 ./scripts/create-component.sh 组件名称 ui 反应 # Windows - Vue 组件 .\scripts\create-component.ps1 -ComponentName 组件名称 -Type ui -Framework vue # Windows - React 组件 .\scripts\create-component.ps1 -ComponentName ComponentName -Type ui -Framework React **build-deploy.sh / .ps1** \- 构建并准备部署 # Linux/macOS ./scripts/build-deploy.sh # 窗口 .\scripts\build-deploy.ps1 **NuxtJS CLI 命令：** npx nuxi add component ComponentName # 添加新组件 npx nuxi add page pageName # 添加新页面 npx nuxi addlayoutlayoutName # 添加新布局 **Next.js CLI 命令：** # 组件没有内置 CLI，请使用上面的脚本 # 或者在app/或components/中手动创建文件 ## 故障排除 ### NuxtJS (Vue) **TailwindCSS v4 无法工作：** * nuxt.config.ts 更改后重新启动开发服务器 * 验证 CSS 文件中的 `@import "tailwindcss";` * 确保 `@tailwindcss/vite` 插件位于 vite.plugins 数组中 * 检查 nuxt.config.ts 或 app.vue 中是否导入了 CSS 文件 * 运行`npx nuxiprepare`来重新生成类型 **打字稿错误：** * 安装 Volar 扩展（不是 Vetur） * 运行`npx nuxiprepare`来生成类型 * 在 VS Code 中重新启动 TypeScript 服务器 **自动导入不起作用：** rm -rf .nuxt npx nuxi 准备 npm 运行开发 **HMR 问题：** rm -rf .nuxt node_modules/.cache npm 运行开发 **大捆尺寸：** * 使用延迟加载： `defineAsyncComponent(() => import('./Component.vue'))` * 分析：`npx nuxianalyze` ### Next.js（反应） **TailwindCSS 不工作：** * 检查 `tailwind.config.ts` 是否有正确的内容路径 * 验证 app/globals.css 中的 `@import "tailwindcss";` * 配置更改后重新启动开发服务器 * 清除`.next`文件夹：`rm -rf .next && npm run dev` **打字稿错误：** * 确保 tsconfig.json 配置正确 * 运行“npm run build”以查看完整的类型检查 * 在 VS Code 中重新启动 TypeScript 服务器 **服务器与客户端组件：** * 在交互式组件的文件顶部使用“use client”指令 * 服务器组件（默认）不能使用钩子或事件处理程序 * 客户端组件可以使用useState、useEffect、onClick等 **构建错误：** rm -rf .next node_modules/.cache npm 安装 npm 运行构建 **大捆尺寸：** * 使用动态导入：`const Component =dynamic(() => import('./Component'))` * 分析：`npm run build`（显示包大小） ## 最佳实践 ### 通用（两种框架） 1. **组件设计**：小型、单一用途、可重复使用 2. **TypeScript**：道具和组件 API 的清晰接口 3. **TailwindCSS** ：更喜欢实用程序而不是自定义 CSS 4. **响应式**：移动优先方法 5. **性能**：适当时使用SSR/SSG，延迟加载大型组件 6. **辅助功能**：ARIA 标签和键盘导航 7. **代码组织**：将相关组件分组，命名一致 ### NuxtJS (Vue) 特定 8. **可组合项**：提取共享逻辑（自动导入） 9. **自动导入**：利用 Nuxt 的组件和可组合项自动导入系统 10. **基于文件的路由** ：使用pages/目录进行自动路由 11. **布局**：创建可重用的布局以获得一致的 UI 结构 12. **SEO** ：使用 `useHead()` 和 `useSeoMeta()` 作为元标记 ### Next.js (React) 特定 8. **服务器组件**：默认为服务器组件，仅在需要时使用客户端组件 9. **数据获取**：使用异步服务器组件进行数据获取 10. **元数据 API** ：使用 `generateMetadata()` 来生成动态 SEO 标签 11. **图像优化** : 使用 Next.js `` 组件进行自动优化 12. **Route Handlers** ：使用route.ts作为app/api/中的API端点

模型创建

包含技能