mockup-creation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mockup Creation

Mockup 与交互式UI原型创建

Create polished, interactive UI mockups and prototypes using NuxtJS 4 (Vue) or Next.js (React) with TypeScript and TailwindCSS v4.

使用NuxtJS 4（Vue）或Next.js（React）搭配TypeScript和TailwindCSS v4，创建精致、交互式的UI原型与Mockup。

Overview

概述

Rapid creation of production-quality mockups with:

NuxtJS 4 (Vue):

Vue 3 Composition API with TypeScript
Vite bundler (built-in)
Auto-imports for components and composables
Zero-config TypeScript with auto-generated types
File-based routing from pages/ directory

Next.js (React):

React 19 with TypeScript v5.1.0+
Turbopack bundler (default, faster than Webpack)
App Router with Server/Client Components
Built-in TypeScript with zero configuration
File-based routing from app/ directory

Common Features:

TailwindCSS v4 with modern tooling
Component-driven architecture
Server-side rendering (SSR) or static site generation (SSG)
Interactive reactivity
Production-ready optimizations

可快速创建具备生产环境质量的原型，支持以下技术栈：

NuxtJS 4 (Vue):

搭配TypeScript的Vue 3 Composition API
内置Vite打包工具
组件与组合式函数的自动导入功能
零配置TypeScript，自动生成类型定义
基于pages/目录的文件式路由

Next.js (React):

搭配TypeScript v5.1.0+的React 19
默认使用Turbopack打包工具（比Webpack更快）
支持Server/Client组件的App Router
内置零配置TypeScript
基于app/目录的文件式路由

通用特性：

搭配现代工具链的TailwindCSS v4
组件驱动架构
服务端渲染（SSR）或静态站点生成（SSG）
交互式响应能力
生产环境级优化

Quick Start

快速开始

Option A: NuxtJS 4 (Vue-based)

选项A：NuxtJS 4（基于Vue）

Option A: NuxtJS 4 (Vue-based)

选项A：NuxtJS 4（基于Vue）

1. Initialize Project

1. 初始化项目

bash

undefined

bash

undefined

Create NuxtJS 4 project (TypeScript enabled by default)

npx nuxi@latest init my-mockup cd my-mockup npm install

undefined

npx nuxi@latest init my-mockup cd my-mockup npm install

undefined

2. Install and Configure TailwindCSS

2. 安装并配置TailwindCSS

Install TailwindCSS v4 with Vite plugin:

bash

npm install -D tailwindcss @tailwindcss/vite

Configure nuxt.config.ts:

typescript

// https://nuxt.com/docs/4.x/api/configuration/nuxt-config
import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  devtools: { enabled: true },
  
  typescript: {
    strict: true,
    typeCheck: true
  },
  
  // Auto-import components and composables
  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
  ],
  
  // App configuration
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      title: 'My Mockup',
      meta: [
        { name: 'description', content: 'My mockup description' }
      ],
    }
  },
  
  // Vite configuration with TailwindCSS v4
  vite: {
    plugins: [
      tailwindcss()
    ],
    css: {
      devSourcemap: true
    }
  }
})

Create CSS file and import TailwindCSS (e.g., assets/css/main.css):

css

@import "tailwindcss";

Import CSS in app.vue or nuxt.config.ts:

typescript

// In nuxt.config.ts, add to the config:
export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  // ... rest of config
})

安装搭配Vite插件的TailwindCSS v4：

bash

npm install -D tailwindcss @tailwindcss/vite

配置nuxt.config.ts：

typescript

// https://nuxt.com/docs/4.x/api/configuration/nuxt-config
import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  devtools: { enabled: true },
  
  typescript: {
    strict: true,
    typeCheck: true
  },
  
  // Auto-import components and composables
  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
  ],
  
  // App configuration
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      title: 'My Mockup',
      meta: [
        { name: 'description', content: 'My mockup description' }
      ],
    }
  },
  
  // Vite configuration with TailwindCSS v4
  vite: {
    plugins: [
      tailwindcss()
    ],
    css: {
      devSourcemap: true
    }
  }
})

创建CSS文件并导入TailwindCSS（例如：assets/css/main.css）：

css

@import "tailwindcss";

在app.vue或nuxt.config.ts中导入CSS：

typescript

// In nuxt.config.ts, add to the config:
export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  // ... rest of config
})

3. Start Development

3. 启动开发服务

bash

npm run dev

bash

npm run dev

Opens http://localhost:3000

undefined

undefined

Option B: Next.js (React-based)

选项B：Next.js（基于React）

1. Initialize Project

1. 初始化项目

bash

undefined

bash

undefined

Create Next.js project (uses recommended defaults with TypeScript and TailwindCSS)

npx create-next-app@latest my-mockup --yes cd my-mockup


**Or with custom options:**

```bash
npx create-next-app@latest my-mockup

npx create-next-app@latest my-mockup --yes cd my-mockup


**或使用自定义选项：**

```bash
npx create-next-app@latest my-mockup

Choose: TypeScript: Yes, TailwindCSS: Yes, App Router: Yes

undefined

undefined

2. Verify TailwindCSS v4 Setup

2. 验证TailwindCSS v4配置

Next.js includes TailwindCSS by default. To upgrade to v4:

bash

npm install -D tailwindcss@next @tailwindcss/postcss@next

Update tailwind.config.ts:

typescript

import type { Config } from 'tailwindcss'

export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
} satisfies Config

Update postcss.config.mjs:

javascript

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Update app/globals.css:

css

@import "tailwindcss";

Next.js默认包含TailwindCSS。如需升级到v4：

bash

npm install -D tailwindcss@next @tailwindcss/postcss@next

更新tailwind.config.ts：

typescript

import type { Config } from 'tailwindcss'

export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
} satisfies Config

更新postcss.config.mjs：

javascript

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

更新app/globals.css：

css

@import "tailwindcss";

3. Start Development

3. 启动开发服务

bash

npm run dev

bash

npm run dev

Opens http://localhost:3000

undefined

undefined

Workflow

工作流程

1. Define Structure

1. 定义结构

Identify mockup requirements:

Layout type (single page, dashboard, multi-page)
Sections needed (header, hero, features, footer, sidebar)
Responsive breakpoints (mobile, tablet, desktop)
Interactive elements (forms, modals, dropdowns)

明确原型需求：

布局类型（单页、仪表盘、多页）
所需模块（页眉、Hero区、功能区、页脚、侧边栏）
响应式断点（移动端、平板、桌面端）
交互式元素（表单、模态框、下拉菜单）

2. Create Component Architecture

2. 创建组件架构

NuxtJS (Vue) auto-imports from:

my-mockup/
├── components/
│   ├── layout/        # Header, Footer, Sidebar (auto-imported)
│   ├── ui/            # Button, Card, Modal, Input (auto-imported)
│   └── sections/      # Hero, Features, Testimonials (auto-imported)
├── pages/             # File-based routing (auto-routed)
├── composables/       # Shared logic (auto-imported)
├── layouts/           # Layout templates (default.vue, dashboard.vue)
└── types/             # TypeScript interfaces

Next.js (React) structure:

my-mockup/
├── app/
│   ├── layout.tsx     # Root layout (required)
│   ├── page.tsx       # Home page
│   ├── dashboard/
│   │   └── page.tsx   # /dashboard route
│   └── globals.css    # TailwindCSS imports
├── components/
│   ├── layout/        # Header, Footer, Sidebar
│   ├── ui/            # Button, Card, Modal, Input
│   └── sections/      # Hero, Features, Testimonials
├── lib/               # Utilities and shared logic
└── types/             # TypeScript interfaces

NuxtJS（Vue）自动导入以下目录中的内容：

my-mockup/
├── components/
│   ├── layout/        # Header, Footer, Sidebar (auto-imported)
│   ├── ui/            # Button, Card, Modal, Input (auto-imported)
│   └── sections/      # Hero, Features, Testimonials (auto-imported)
├── pages/             # File-based routing (auto-routed)
├── composables/       # Shared logic (auto-imported)
├── layouts/           # Layout templates (default.vue, dashboard.vue)
└── types/             # TypeScript interfaces

Next.js（React）项目结构：

my-mockup/
├── app/
│   ├── layout.tsx     # Root layout (required)
│   ├── page.tsx       # Home page
│   ├── dashboard/
│   │   └── page.tsx   # /dashboard route
│   └── globals.css    # TailwindCSS imports
├── components/
│   ├── layout/        # Header, Footer, Sidebar
│   ├── ui/            # Button, Card, Modal, Input
│   └── sections/      # Hero, Features, Testimonials
├── lib/               # Utilities and shared logic
└── types/             # TypeScript interfaces

3. Build Components

3. 构建组件

NuxtJS (Vue) Example: Type-safe Button Component (components/ui/Button.vue)

vue

<script setup lang="ts">
// No need to import 'computed' - auto-imported by Nuxt
interface Props {
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'sm' | 'md' | 'lg'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md'
})

const buttonClasses = computed(() => {
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-600 text-white hover:bg-gray-700',
    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50'
  }
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  }
  return `font-semibold rounded-lg transition ${variants[props.variant]} ${sizes[props.size]}`
})
</script>

<template>
  <button :class="buttonClasses">
    <slot />
  </button>
</template>

Usage in pages/index.vue:

vue

<template>
  <div>
    <!-- Auto-imported as UiButton from components/ui/Button.vue -->
    <UiButton variant="primary" size="lg">
      Get Started
    </UiButton>
  </div>
</template>

Next.js (React) Example: Type-safe Button Component (components/ui/Button.tsx)

typescript

import { ButtonHTMLAttributes } from 'react'

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'sm' | 'md' | 'lg'
  children: React.ReactNode
}

export function Button({ 
  variant = 'primary', 
  size = 'md', 
  children,
  className = '',
  ...props 
}: ButtonProps) {
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-600 text-white hover:bg-gray-700',
    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50'
  }
  
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  }
  
  const buttonClasses = `font-semibold rounded-lg transition ${variants[variant]} ${sizes[size]} ${className}`
  
  return (
    <button className={buttonClasses} {...props}>
      {children}
    </button>
  )
}

Usage in app/page.tsx:

typescript

import { Button } from '@/components/ui/Button'

export default function Home() {
  return (
    <div>
      <Button variant="primary" size="lg">
        Get Started
      </Button>
    </div>
  )
}

NuxtJS（Vue）示例：类型安全的Button组件（components/ui/Button.vue）

vue

<script setup lang="ts">
// No need to import 'computed' - auto-imported by Nuxt
interface Props {
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'sm' | 'md' | 'lg'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md'
})

const buttonClasses = computed(() => {
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-600 text-white hover:bg-gray-700',
    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50'
  }
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  }
  return `font-semibold rounded-lg transition ${variants[props.variant]} ${sizes[props.size]}`
})
</script>

<template>
  <button :class="buttonClasses">
    <slot />
  </button>
</template>

在pages/index.vue中使用：

vue

<template>
  <div>
    <!-- Auto-imported as UiButton from components/ui/Button.vue -->
    <UiButton variant="primary" size="lg">
      Get Started
    </UiButton>
  </div>
</template>

Next.js（React）示例：类型安全的Button组件（components/ui/Button.tsx）

typescript

import { ButtonHTMLAttributes } from 'react'

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'sm' | 'md' | 'lg'
  children: React.ReactNode
}

export function Button({ 
  variant = 'primary', 
  size = 'md', 
  children,
  className = '',
  ...props 
}: ButtonProps) {
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-600 text-white hover:bg-gray-700',
    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50'
  }
  
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  }
  
  const buttonClasses = `font-semibold rounded-lg transition ${variants[variant]} ${sizes[size]} ${className}`
  
  return (
    <button className={buttonClasses} {...props}>
      {children}
    </button>
  )
}

在app/page.tsx中使用：

typescript

import { Button } from '@/components/ui/Button'

export default function Home() {
  return (
    <div>
      <Button variant="primary" size="lg">
        Get Started
      </Button>
    </div>
  )
}

4. Apply Responsive Design

4. 应用响应式设计

Use TailwindCSS breakpoints:

```
sm:
```
(640px),
```
md:
```
(768px),
```
lg:
```
(1024px),
```
xl:
```
(1280px),
```
2xl:
```
(1536px)

NuxtJS (Vue) Responsive Grid Example:

vue

<template>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Auto-imported as UiCard from components/ui/Card.vue -->
    <UiCard v-for="item in items" :key="item.id" :data="item" />
  </div>
</template>

<script setup lang="ts">
const items = ref([...])
</script>

Next.js (React) Responsive Grid Example:

typescript

import { Card } from '@/components/ui/Card'

export default function FeaturesSection() {
  const items = [
    { id: 1, title: 'Feature 1', description: '...' },
    // ...
  ]
  
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {items.map((item) => (
        <Card key={item.id} data={item} />
      ))}
    </div>
  )
}

使用TailwindCSS断点：

```
sm:
```
(640px),
```
md:
```
(768px),
```
lg:
```
(1024px),
```
xl:
```
(1280px),
```
2xl:
```
(1536px)

NuxtJS（Vue）响应式网格示例：

vue

<template>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Auto-imported as UiCard from components/ui/Card.vue -->
    <UiCard v-for="item in items" :key="item.id" :data="item" />
  </div>
</template>

<script setup lang="ts">
const items = ref([...])
</script>

Next.js（React）响应式网格示例：

typescript

import { Card } from '@/components/ui/Card'

export default function FeaturesSection() {
  const items = [
    { id: 1, title: 'Feature 1', description: '...' },
    // ...
  ]
  
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {items.map((item) => (
        <Card key={item.id} data={item} />
      ))}
    </div>
  )
}

5. Add Interactivity

5. 添加交互功能

NuxtJS (Vue) Composable Pattern (composables/useModal.ts):

typescript

// Auto-imported by Nuxt - no need to import 'ref'
export function useModal() {
  const isOpen = ref(false)
  const open = () => { isOpen.value = true }
  const close = () => { isOpen.value = false }
  return { isOpen, open, close }
}

Usage in any Vue component:

vue

<script setup lang="ts">
// Auto-imported - no import statement needed
const { isOpen, open, close } = useModal()
</script>

Next.js (React) Custom Hook Pattern (lib/hooks/useModal.ts):

typescript

import { useState } from 'react'

export function useModal() {
  const [isOpen, setIsOpen] = useState(false)
  const open = () => setIsOpen(true)
  const close = () => setIsOpen(false)
  return { isOpen, open, close }
}

Usage in any React component:

typescript

'use client' // Mark as Client Component for interactivity

import { useModal } from '@/lib/hooks/useModal'

export default function MyComponent() {
  const { isOpen, open, close } = useModal()
  
  return (
    <div>
      <button onClick={open}>Open Modal</button>
      {isOpen && <Modal onClose={close} />}
    </div>
  )
}

NuxtJS（Vue）组合式函数模式（composables/useModal.ts）：

typescript

// Auto-imported by Nuxt - no need to import 'ref'
export function useModal() {
  const isOpen = ref(false)
  const open = () => { isOpen.value = true }
  const close = () => { isOpen.value = false }
  return { isOpen, open, close }
}

在任意Vue组件中使用：

vue

<script setup lang="ts">
// Auto-imported - no import statement needed
const { isOpen, open, close } = useModal()
</script>

Next.js（React）自定义Hook模式（lib/hooks/useModal.ts）：

typescript

import { useState } from 'react'

export function useModal() {
  const [isOpen, setIsOpen] = useState(false)
  const open = () => setIsOpen(true)
  const close = () => setIsOpen(false)
  return { isOpen, open, close }
}

在任意React组件中使用：

typescript

'use client' // Mark as Client Component for interactivity

import { useModal } from '@/lib/hooks/useModal'

export default function MyComponent() {
  const { isOpen, open, close } = useModal()
  
  return (
    <div>
      <button onClick={open}>Open Modal</button>
      {isOpen && <Modal onClose={close} />}
    </div>
  )
}

6. Build for Production

6. 构建生产环境版本

NuxtJS:

bash

npm run build      # Build for production (.output/)
npm run preview    # Preview production build
npm run generate   # Generate static site (SSG)

Next.js:

bash

npm run build      # Build for production (.next/)
npm run start      # Start production server (SSR)

NuxtJS：

bash

npm run build      # Build for production (.output/)
npm run preview    # Preview production build
npm run generate   # Generate static site (SSG)

Next.js：

bash

npm run build      # Build for production (.next/)
npm run start      # Start production server (SSR)

For static export (SSG), add to next.config.js:

output: 'export'

undefined

undefined

Common Patterns

常见模式

Landing Page (NuxtJS)

落地页（NuxtJS）

Create layout (layouts/default.vue):

vue

<template>
  <div class="min-h-screen flex flex-col">
    <LayoutHeader />
    <main class="flex-1">
      <slot />
    </main>
    <LayoutFooter />
  </div>
</template>

Create page (pages/index.vue):

vue

<template>
  <div>
    <SectionsHero />
    <SectionsFeatures />
  </div>
</template>

创建布局（layouts/default.vue）：

vue

<template>
  <div class="min-h-screen flex flex-col">
    <LayoutHeader />
    <main class="flex-1">
      <slot />
    </main>
    <LayoutFooter />
  </div>
</template>

创建页面（pages/index.vue）：

vue

<template>
  <div>
    <SectionsHero />
    <SectionsFeatures />
  </div>
</template>

Landing Page (Next.js)

落地页（Next.js）

Create layout (app/layout.tsx):

typescript

import { Header } from '@/components/layout/Header'
import { Footer } from '@/components/layout/Footer'
import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-1">{children}</main>
        <Footer />
      </body>
    </html>
  )
}

Create page (app/page.tsx):

typescript

import { Hero } from '@/components/sections/Hero'
import { Features } from '@/components/sections/Features'

export default function Home() {
  return (
    <div>
      <Hero />
      <Features />
    </div>
  )
}

创建布局（app/layout.tsx）：

typescript

import { Header } from '@/components/layout/Header'
import { Footer } from '@/components/layout/Footer'
import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-1">{children}</main>
        <Footer />
      </body>
    </html>
  )
}

创建页面（app/page.tsx）：

typescript

import { Hero } from '@/components/sections/Hero'
import { Features } from '@/components/sections/Features'

export default function Home() {
  return (
    <div>
      <Hero />
      <Features />
    </div>
  )
}

Dashboard Layout (NuxtJS)

仪表盘布局（NuxtJS）

Create dashboard layout (layouts/dashboard.vue):

vue

<template>
  <div class="flex h-screen bg-gray-100">
    <LayoutSidebar class="w-64 bg-white shadow-lg" />
    <div class="flex-1 flex flex-col">
      <LayoutTopBar class="bg-white shadow-sm" />
      <main class="flex-1 overflow-y-auto p-6">
        <slot />
      </main>
    </div>
  </div>
</template>

Use in page (pages/dashboard/index.vue):

vue

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

<template>
  <div>
    <!-- Dashboard content -->
  </div>
</template>

创建仪表盘布局（layouts/dashboard.vue）：

vue

<template>
  <div class="flex h-screen bg-gray-100">
    <LayoutSidebar class="w-64 bg-white shadow-lg" />
    <div class="flex-1 flex flex-col">
      <LayoutTopBar class="bg-white shadow-sm" />
      <main class="flex-1 overflow-y-auto p-6">
        <slot />
      </main>
    </div>
  </div>
</template>

在页面中使用（pages/dashboard/index.vue）：

vue

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

<template>
  <div>
    <!-- Dashboard content -->
  </div>
</template>

Dashboard Layout (Next.js)

仪表盘布局（Next.js）

Create dashboard layout (app/dashboard/layout.tsx):

typescript

import { Sidebar } from '@/components/layout/Sidebar'
import { TopBar } from '@/components/layout/TopBar'

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex h-screen bg-gray-100">
      <Sidebar className="w-64 bg-white shadow-lg" />
      <div className="flex-1 flex flex-col">
        <TopBar className="bg-white shadow-sm" />
        <main className="flex-1 overflow-y-auto p-6">
          {children}
        </main>
      </div>
    </div>
  )
}

Use in page (app/dashboard/page.tsx):

typescript

export default function DashboardPage() {
  return (
    <div>
      {/* Dashboard content */}
    </div>
  )
}

创建仪表盘布局（app/dashboard/layout.tsx）：

typescript

import { Sidebar } from '@/components/layout/Sidebar'
import { TopBar } from '@/components/layout/TopBar'

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex h-screen bg-gray-100">
      <Sidebar className="w-64 bg-white shadow-lg" />
      <div className="flex-1 flex flex-col">
        <TopBar className="bg-white shadow-sm" />
        <main className="flex-1 overflow-y-auto p-6">
          {children}
        </main>
      </div>
    </div>
  )
}

在页面中使用（app/dashboard/page.tsx）：

typescript

export default function DashboardPage() {
  return (
    <div>
      {/* Dashboard content */}
    </div>
  )
}

Design System

设计系统

Colors

颜色

Primary:
```
blue-600
```
, Secondary:
```
gray-600
```
Success:
```
green-600
```
, Warning:
```
yellow-600
```
, Error:
```
red-600
```
Neutral:
```
gray-100
```
to
```
gray-900
```

主色：
```
blue-600
```
，辅助色：
```
gray-600
```
成功色：
```
green-600
```
，警告色：
```
yellow-600
```
，错误色：
```
red-600
```
中性色：
```
gray-100
```
至
```
gray-900
```

Spacing

间距

Use consistent scale:

p-1

(4px),

p-2

(8px),

p-4

(16px),

p-6

(24px),

p-8

(32px)

使用统一的间距尺度：

p-1

（4px）、

p-2

（8px）、

p-4

（16px）、

p-6

（24px）、

p-8

（32px）

Typography

排版

Headings:
```
text-4xl
```
,
```
text-3xl
```
,
```
text-2xl
```
,
```
text-xl
```
Body:
```
text-base
```
(16px)

Weights:

font-normal

font-medium

font-semibold

font-bold

标题：
```
text-4xl
```
、
```
text-3xl
```
、
```
text-2xl
```
、
```
text-xl
```
正文：
```
text-base
```
（16px）

字重：

font-normal

、

font-medium

、

font-semibold

、

font-bold

Advanced Guides

进阶指南

For detailed implementations:

Component Library - Complete reusable Vue components with TypeScript
TailwindCSS v4 Patterns - Advanced styling (works with both frameworks)
NuxtJS Composables - State management and auto-imports (Vue-specific)
React Hooks - Custom hooks and state management (React-specific)
Animations - Vue transitions and TailwindCSS animations
Examples - Complete Vue/NuxtJS mockup examples
Deployment - Build and hosting guides for both frameworks

如需详细实现方案，请参考：

Component Library - 完整的TypeScript可复用Vue组件库
TailwindCSS v4 Patterns - 进阶样式方案（支持两种框架）
NuxtJS Composables - 状态管理与自动导入（Vue专属）
React Hooks - 自定义Hook与状态管理（React专属）
Animations - Vue过渡效果与TailwindCSS动画
Examples - 完整的Vue/NuxtJS原型示例
Deployment - 两种框架的构建与部署指南

Scripts

脚本工具

Helper scripts available in

scripts/

(Bash and PowerShell versions):

create-component.sh / .ps1 - Generate components with TypeScript boilerplate

bash

undefined

scripts/

目录下提供了辅助脚本（包含Bash和PowerShell版本）：

create-component.sh / .ps1 - 生成带TypeScript模板的组件

bash

undefined

Linux/macOS - Vue component

./scripts/create-component.sh ComponentName ui vue

Linux/macOS - React component

./scripts/create-component.sh ComponentName ui react

Windows - Vue component

.\scripts\create-component.ps1 -ComponentName ComponentName -Type ui -Framework vue

Windows - React component

.\scripts\create-component.ps1 -ComponentName ComponentName -Type ui -Framework react


**build-deploy.sh / .ps1** - Build and prepare for deployment

```bash

.\scripts\create-component.ps1 -ComponentName ComponentName -Type ui -Framework react


**build-deploy.sh / .ps1** - 构建并准备部署

```bash

Linux/macOS

./scripts/build-deploy.sh

Windows

.\scripts\build-deploy.ps1


**NuxtJS CLI commands:**

```bash
npx nuxi add component ComponentName  # Add new component
npx nuxi add page pageName            # Add new page
npx nuxi add layout layoutName        # Add new layout

Next.js CLI commands:

bash

undefined

.\scripts\build-deploy.ps1


**NuxtJS CLI命令：**

```bash
npx nuxi add component ComponentName  # Add new component
npx nuxi add page pageName            # Add new page
npx nuxi add layout layoutName        # Add new layout

Next.js CLI命令：

bash

undefined

No built-in CLI for components, use scripts above

Or manually create files in app/ or components/

undefined

undefined

Troubleshooting

故障排除

NuxtJS (Vue)

NuxtJS（Vue）

TailwindCSS v4 not working:

Restart dev server after nuxt.config.ts changes
Verify
```
@import "tailwindcss";
```
in your CSS file
Ensure
```
@tailwindcss/vite
```
plugin is in vite.plugins array
Check CSS file is imported in nuxt.config.ts or app.vue
Run
```
npx nuxi prepare
```
to regenerate types

TypeScript errors:

Install Volar extension (not Vetur)
Run
```
npx nuxi prepare
```
to generate types
Restart TypeScript server in VS Code

Auto-imports not working:

bash

rm -rf .nuxt
npx nuxi prepare
npm run dev

HMR issues:

bash

rm -rf .nuxt node_modules/.cache
npm run dev

Large bundle size:

Use lazy loading:

defineAsyncComponent(() => import('./Component.vue'))

Analyze with:
```
npx nuxi analyze
```

TailwindCSS v4无法正常工作：

修改nuxt.config.ts后重启开发服务
验证CSS文件中是否包含
```
@import "tailwindcss";
```
确保
```
@tailwindcss/vite
```
插件已添加到vite.plugins数组中
检查CSS文件是否已在nuxt.config.ts或app.vue中导入
运行
```
npx nuxi prepare
```
重新生成类型定义

TypeScript错误：

安装Volar扩展（不要使用Vetur）
运行
```
npx nuxi prepare
```
生成类型定义
在VS Code中重启TypeScript服务

自动导入功能失效：

bash

rm -rf .nuxt
npx nuxi prepare
npm run dev

热模块替换（HMR）问题：

bash

rm -rf .nuxt node_modules/.cache
npm run dev

包体积过大：

使用懒加载：

defineAsyncComponent(() => import('./Component.vue'))

使用
```
npx nuxi analyze
```
分析包结构

Next.js (React)

Next.js（React）

TailwindCSS not working:

Check
```
tailwind.config.ts
```
has correct content paths
Verify
```
@import "tailwindcss";
```
in app/globals.css
Restart dev server after config changes
Clear
```
.next
```
folder:
```
rm -rf .next && npm run dev
```

TypeScript errors:

Ensure tsconfig.json is properly configured
Run
```
npm run build
```
to see full type checking
Restart TypeScript server in VS Code

Server vs Client Components:

Use
```
'use client'
```
directive at top of file for interactive components
Server Components (default) cannot use hooks or event handlers
Client Components can use useState, useEffect, onClick, etc.

Build errors:

bash

rm -rf .next node_modules/.cache
npm install
npm run build

Large bundle size:

Use dynamic imports:

const Component = dynamic(() => import('./Component'))

Analyze with:
```
npm run build
```
(shows bundle sizes)

TailwindCSS无法正常工作：

检查
```
tailwind.config.ts
```
中的content路径是否正确
验证app/globals.css中是否包含
```
@import "tailwindcss";
```
修改配置后重启开发服务
清除
```
.next
```
文件夹：
```
rm -rf .next && npm run dev
```

TypeScript错误：

确保tsconfig.json配置正确
运行
```
npm run build
```
进行完整类型检查
在VS Code中重启TypeScript服务

Server组件与Client组件问题：

交互式组件需在文件顶部添加
```
'use client'
```
指令
默认使用Server组件，仅在需要时使用Client组件
Client组件可使用useState、useEffect、onClick等API

构建错误：

bash

rm -rf .next node_modules/.cache
npm install
npm run build

包体积过大：

使用动态导入：

const Component = dynamic(() => import('./Component'))

运行
```
npm run build
```
查看包体积分析

Best Practices

最佳实践

Common (Both Frameworks)

通用（两种框架）

Component Design: Small, single-purpose, reusable
TypeScript: Clear interfaces for props and component APIs
TailwindCSS: Prefer utilities over custom CSS
Responsive: Mobile-first approach
Performance: Use SSR/SSG when appropriate, lazy load large components
Accessibility: ARIA labels and keyboard navigation
Code Organization: Group related components, consistent naming

组件设计：保持组件小巧、单一职责、可复用
TypeScript：为Props和组件API定义清晰的接口
TailwindCSS：优先使用工具类而非自定义CSS
响应式设计：采用移动端优先的设计思路
性能优化：合理使用SSR/SSG，懒加载大型组件
可访问性：添加ARIA标签与键盘导航支持
代码组织：按功能分组组件，保持命名一致

NuxtJS (Vue) Specific

NuxtJS（Vue）专属

Composables: Extract shared logic (auto-imported)
Auto-imports: Leverage Nuxt's auto-import system for components and composables
File-based Routing: Use pages/ directory for automatic routing
Layouts: Create reusable layouts for consistent UI structure
SEO: Use
```
useHead()
```
and
```
useSeoMeta()
```
for meta tags

组合式函数：提取共享逻辑（支持自动导入）
自动导入：充分利用Nuxt的组件与组合式函数自动导入功能
文件式路由：使用pages/目录实现自动路由
布局系统：创建可复用布局以保持UI一致性
SEO优化：使用
```
useHead()
```
和
```
useSeoMeta()
```
设置元标签

Next.js (React) Specific

Next.js（React）专属

Server Components: Default to Server Components, use Client Components only when needed
Data Fetching: Use async Server Components for data fetching
Metadata API: Use
```
generateMetadata()
```
for dynamic SEO tags
Image Optimization: Use Next.js
```
<Image>
```
component for automatic optimization
Route Handlers: Use route.ts for API endpoints in app/api/

Server组件：默认使用Server组件，仅在必要时使用Client组件
数据获取：使用异步Server组件进行数据获取
元数据API：使用
```
generateMetadata()
```
设置动态SEO标签
图片优化：使用Next.js
```
<Image>
```
组件实现自动图片优化
路由处理：在app/api/目录下使用route.ts创建API端点