Nuxt: 安装与项目结构

components/
  ProductCard.vue     → <ProductCard />
  shop/
    ProductList.vue   → <ShopProductList />

# Create new Nuxt 3 project
npx nuxi@latest init megashop

# Or with specific package manager
npx nuxi@latest init megashop --packageManager pnpm

# Step 1: Create project
npx nuxi@latest init megashop

# Step 2: Enter project directory
cd megashop

# Step 3: Install dependencies
npm install

# Step 4: Start dev server
npm run dev
# → Nuxt dev server running at http://localhost:3000

# 命令执行成功

{
  "name": "megashop",
  "private": true,
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxi dev",
    "generate": "nuxi generate",
    "preview": "nuxi preview",
    "postinstall": "nuxi prepare"
  },
  "dependencies": {
    "nuxt": "^3.12.0"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest"
  }
}

{
  "name": "megashop",
  "private": true,
  "scripts": {
    "build": "nuxi build",
    "dev": "nuxi dev",
    "generate": "nuxi generate",
    "preview": "nuxi preview",
    "postinstall": "nuxi prepare"
  },
  "dependencies": {
    "nuxt": "^3.12.0"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest"
  }
}

megashop/
├── app.vue                    # Root component
├── nuxt.config.ts             # Project config
├── pages/
│   ├── index.vue              # Homepage
│   ├── products/
│   │   ├── index.vue          # Product list
│   │   └── [id].vue           # Product detail
│   ├── categories/
│   │   └── [slug].vue         # Category page
│   ├── cart.vue               # Shopping cart
│   └── about.vue              # About page
├── components/
│   ├── AppHeader.vue          # → <AppHeader />
│   ├── AppFooter.vue          # → <AppFooter />
│   └── product/
│       ├── ProductCard.vue    # → <ProductProductCard /> ①
│       └── ProductList.vue    # → <ProductProductList /> ①
├── composables/
│   ├── useCart.ts             # → auto-imported
│   └── usePriceFormat.ts      # → auto-imported
├── server/
│   └── api/
│       ├── products/
│       │   └── index.get.ts   # GET /api/products
│       └── cart/
│           └── index.post.ts  # POST /api/cart
├── layouts/
│   ├── default.vue            # Default layout
│   └── sidebar.vue            # Sidebar layout
├── middleware/
│   └── auth.ts                # Named middleware
├── plugins/
│   └── stripe.client.ts       # Client-only plugin
├── assets/
│   └── css/
│       └── main.css           # Global styles
└── public/
    ├── favicon.ico
    └── robots.txt

执行成功

// nuxt.config.ts
export default defineNuxtConfig({
  // Global SSR setting
  ssr: true,

  // App metadata
  app: {
    head: {
      title: 'MegaShop - Premium E-Commerce',
      meta: [
        { name: 'description', content: 'Millions of products, shipped worldwide' }
      ]
    }
  },

  // Runtime config (server-only secrets)
  runtimeConfig: {
    // Private - server only
    databaseUrl: process.env.DATABASE_URL,
    stripeSecretKey: process.env.STRIPE_SECRET_KEY,
    // Public - exposed to client
    public: {
      apiBase: process.env.API_BASE || 'http://localhost:3000/api',
      stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY
    }
  },

  // Modules
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss'
  ],

  // Component path prefix setting
  components: [
    { path: '~/components', pathPrefix: false }
  ]
})

// 执行成功

// nuxt.config.ts - route-level rendering rules
export default defineNuxtConfig({
  routeRules: {
    // Homepage: pre-render at build time
    '/': { prerender: true },
    // Product list: ISR with 60s revalidation
    '/products': { swr: 60 },
    // Product detail: ISR with 3600s revalidation
    '/products/**': { swr: 3600 },
    // Admin dashboard: client-side only
    '/admin/**': { ssr: false },
    // API: CORS headers
    '/api/**': { cors: true }
  }
})

// 执行成功

// composables/usePriceFormat.ts
// No need to import - auto-imported by Nuxt
export function usePriceFormat(price: number, currency: string = 'USD'): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency
  }).format(price)
}

// In any component - use directly
// const formatted = usePriceFormat(2999.99) → "$2,999.99"

// 执行成功

<!-- pages/index.vue -->
<template>
  <!-- All components auto-imported, no import statement needed -->
  <div>
    <AppHeader />
    <ProductCard :product="featured" />
    <AppFooter />
  </div>
</template>

<script setup lang="ts">
// All composables auto-imported
const { data: featured } = await useFetch('/api/products/featured')
const price = usePriceFormat(featured.value?.price || 0)
</script>

// 执行成功

# ============================================
# MegaShop Project Initialization
# Complete setup from zero to running dev server
# ============================================

# 1. Create project
npx nuxi@latest init megashop
cd megashop

# 2. Install core dependencies
npm install @pinia/nuxt @nuxtjs/tailwindcss

# 3. Create directory structure
mkdir -p pages/products pages/categories
mkdir -p components/product
mkdir -p composables
mkdir -p server/api/products server/api/cart
mkdir -p layouts
mkdir -p middleware
mkdir -p plugins
mkdir -p assets/css
mkdir -p public

# 4. Initialize Git repository
git init
git add .
git commit -m "feat: initialize MegaShop with Nuxt 3"

# 5. Start development server
npm run dev