Nuxt MCP服务端功能全面测评

# 1. 创建新的Nuxt项目（如已有项目可跳过）
npx nuxi@latest init my-project
cd my-project

# 2. 安装nuxt-mcp模块
pnpm add -D nuxt-mcp

# 3. 配置nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-mcp'],
  
  mcp: {
    enabled: true,
    // 可选：设置允许访问的目录
    allowedPaths: ['~/components', '~/utils'],
    // 启用实验功能
    experimental: {
      codeGeneration: true
    }
  }
})

# 4. 启动开发服务器
pnpm dev

# 1. 确保已安装Node.js（推荐通过brew安装）
brew install node

# 2. 创建Nuxt项目（如已有项目可跳过）
npx nuxi@latest init my-project
cd my-project

# 3. 安装nuxt-mcp模块
npm install --save-dev nuxt-mcp

# 4. 配置nuxt.config.ts
echo 'export default defineNuxtConfig({
  modules: ["nuxt-mcp"],
  mcp: {
    enabled: true,
    allowedPaths: ["~/components", "~/utils"]
  }
})' >> nuxt.config.ts

# 5. 启动开发服务器
npm run dev

# 1. 安装Node.js（如果尚未安装）
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# 2. 创建Nuxt项目
npx nuxi@latest init my-project
cd my-project

# 3. 安装nuxt-mcp模块
yarn add --dev nuxt-mcp

# 4. 配置Nuxt配置文件
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-mcp'],
  
  mcp: {
    enabled: true,
    allowedPaths: [
      '~/components',
      '~/utils',
      '~/server/api'
    ]
  }
})

# 5. 启动开发服务器
yarn dev

# .env文件配置
MCP_ALLOWED_PATHS=./components,./utils,./server
MCP_READ_ONLY=false
MCP_MAX_FILE_SIZE=10485760
MCP_ALLOWED_EXTENSIONS=.vue,.js,.ts,.json

# 可选：身份验证配置
MCP_AUTH_ENABLED=true
MCP_AUTH_TOKEN=your_secure_token_here

// ~/.config/claude/mcp-servers.json
{
  "nuxt-mcp": {
    "command": "node",
    "args": [
      "./node_modules/nuxt-mcp/bin/server.js"
    ],
    "env": {
      "MCP_ALLOWED_PATHS": "./components,./utils,./server",
      "MCP_AUTH_TOKEN": "your_token_here"
    },
    "timeout": 30
  }
}

<!-- 在Cursor或Claude中通过MCP查询项目结构 -->
@nuxt-mcp 请分析我的项目结构，特别是components目录的现有组件，
并建议ProductCard组件应该如何集成到当前项目中。

@nuxt-mcp 请生成一个ProductCard组件，包含以下功能：
- 显示产品名称、描述、价格和图片
- 支持收藏功能
- 响应式设计
- 使用Tailwind CSS进行样式设计
- 使用TypeScript
- 符合无障碍访问标准

<template>
  <article class="product-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
    <div class="product-image-container relative">
      <NuxtImg 
        :src="product.image" 
        :alt="product.name" 
        class="w-full h-48 object-cover"
        width="300"
        height="192"
        loading="lazy"
      />
      <button 
        @click="toggleFavorite"
        class="absolute top-2 right-2 p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-red-100 transition-colors"
        :aria-label="isFavorite ? '从收藏中移除' : '添加到收藏'"
        :class="{ 'text-red-500': isFavorite, 'text-gray-400': !isFavorite }"
      >
        <Icon :name="isFavorite ? 'mdi:heart' : 'mdi:heart-outline'" size="20px" />
      </button>
    </div>
    
    <div class="p-4">
      <h3 class="product-name font-semibold text-lg mb-2 line-clamp-2" :title="product.name">
        {{ product.name }}
      </h3>
      <p class="product-description text-gray-600 text-sm mb-3 line-clamp-2">
        {{ product.description }}
      </p>
      
      <div class="sku-selectors mb-3" v-if="product.skus && product.skus.length > 0">
        <div v-for="option in product.options" :key="option.type" class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">{{ option.type }}:</label>
          <div class="flex flex-wrap gap-2">
            <button 
              v-for="value in option.values" 
              :key="value"
              @click="selectOption(option.type, value)"
              class="px-2 py-1 text-xs rounded border transition-colors"
              :class="isOptionSelected(option.type, value) 
                ? 'border-blue-500 bg-blue-50 text-blue-700' 
                : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50'"
              :aria-pressed="isOptionSelected(option.type, value)"
            >
              {{ value }}
            </button>
          </div>
        </div>
      </div>
      
      <div class="flex items-center justify-between">
        <div class="price-container">
          <span class="current-price font-bold text-xl text-gray-900">
            {{ formatCurrency(product.price) }}
          </span>
          <span v-if="product.originalPrice" class="original-price line-through text-gray-500 ml-2">
            {{ formatCurrency(product.originalPrice) }}
          </span>
        </div>
        
        <button 
          @click="addToCart"
          class="add-to-cart-btn px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
          :disabled="!isOptionComplete"
          aria-label="添加到购物车"
        >
          <Icon name="mdi:cart-plus" size="18px" />
        </button>
      </div>
    </div>
  </article>
</template>

<script lang="ts" setup>
interface Product {
  id: string
  name: string
  description: string
  image: string
  price: number
  originalPrice?: number
  options?: Array<{
    type: string
    values: string[]
  }>
  skus?: Array<{
    id: string
    options: Record<string, string>
    stock: number
  }>
}

interface Props {
  product: Product
}

const props = defineProps<Props>()
const emit = defineEmits<{
  'favorite-toggle': [productId: string, isFavorite: boolean]
  'add-to-cart': [product: Product, selectedOptions: Record<string, string>]
}>()

const { trackEvent } = useAnalytics()
const { formatCurrency } = useCurrency()

const selectedOptions = ref<Record<string, string>>({})
const isFavorite = ref(false)

const isOptionComplete = computed(() => {
  if (!props.product.options) return true
  return props.product.options.every(option => selectedOptions.value[option.type])
})

function toggleFavorite() {
  isFavorite.value = !isFavorite.value
  emit('favorite-toggle', props.product.id, isFavorite.value)
  trackEvent('product_favorite_toggle', {
    product_id: props.product.id,
    is_favorite: isFavorite.value
  })
}

function selectOption(type: string, value: string) {
  selectedOptions.value[type] = value
}

function isOptionSelected(type: string, value: string): boolean {
  return selectedOptions.value[type] === value
}

function addToCart() {
  const selectedSku = props.product.skus?.find(sku => 
    Object.entries(selectedOptions.value).every(([type, value]) => 
      sku.options[type] === value
    )
  )

  if (!selectedSku && props.product.skus?.length) {
    console.error('请选择完整的产品选项')
    return
  }

  emit('add-to-cart', props.product, selectedOptions.value)
  trackEvent('product_add_to_cart', {
    product_id: props.product.id,
    sku_id: selectedSku?.id,
    options: selectedOptions.value
  })
}
</script>

<style scoped>
.product-card {
  container-type: inline-size;
}

@container (max-width: 200px) {
  .product-name {
    font-size: 0.875rem;
  }
  
  .product-description {
    display: none;
  }
}

.add-to-cart-btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
}
</style>

@nuxt-mcp 请为上面的ProductCard组件生成Vitest单元测试，
测试交互逻辑和无障碍访问特性。

// tests/components/ProductCard.spec.ts
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import ProductCard from '@/components/ProductCard.vue'

describe('ProductCard.vue', () => {
  const mockProduct = {
    id: 'prod-001',
    name: '测试产品',
    description: '这是一个测试产品描述',
    image: '/test-image.jpg',
    price: 99.99,
    originalPrice: 129.99,
    options: [
      {
        type: 'color',
        values: ['红色', '蓝色']
      },
      {
        type: 'size',
        values: ['S', 'M', 'L']
      }
    ],
    skus: [
      {
        id: 'sku-001',
        options: { color: '红色', size: 'S' },
        stock: 10
      }
    ]
  }

  it('正确渲染产品信息', () => {
    const wrapper = mount(ProductCard, {
      props: { product: mockProduct }
    })

    expect(wrapper.find('.product-name').text()).toBe('测试产品')
    expect(wrapper.find('.product-description').text()).toBe('这是一个测试产品描述')
    expect(wrapper.find('.current-price').text()).toContain('99.99')
  })

  it('点击收藏按钮触发事件', async () => {
    const wrapper = mount(ProductCard, {
      props: { product: mockProduct }
    })

    const favoriteButton = wrapper.find('[aria-label^="添加到收藏"]')
    await favoriteButton.trigger('click')

    expect(wrapper.emitted('favorite-toggle')).toBeTruthy()
    expect(wrapper.emitted('favorite-toggle')?.[0]).toEqual(['prod-001', true])
  })

  it('选项选择功能正常工作', async () => {
    const wrapper = mount(ProductCard, {
      props: { product: mockProduct }
    })

    const colorButton = wrapper.find('button:contains("红色")')
    await colorButton.trigger('click')

    expect(colorButton.classes()).toContain('border-blue-500')
    expect(colorButton.attributes('aria-pressed')).toBe('true')
  })

  it('无障碍访问属性正确设置', () => {
    const wrapper = mount(ProductCard, {
      props: { product: mockProduct }
    })

    const image = wrapper.find('img')
    expect(image.attributes('alt')).toBe('测试产品')

    const buttons = wrapper.findAll('button')
    buttons.forEach(button => {
      expect(button.attributes('aria-label')).toBeTruthy()
    })
  })
})