nuxt开发

1. 创建项目结构

mkdir lingyanweb
cd lingyanweb
npm init -y
npm install nuxt@latest
mkdir pages public

2. 创建nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: true, // 开启服务端渲染，SEO 核心！
})

3. 创建app.vue

<!-- app.vue -->
<template>
  <div>
    <h1>灵燕空间 - Nuxt 3 已启动</h1>
    <NuxtPage />
  </div>
</template>

4. 创建首页pages/index.vue

<!-- pages/index.vue -->
<template>
  <div>
    <h2>欢迎使用 Nuxt 3</h2>
    <p>搜索引擎现在可以抓取我了！🎉</p>
  </div>
</template>

<script setup>
useHead({
  title: '灵燕空间 - 支持 SEO 的新一代网站',
  meta: [
    { name: 'description', content: '基于 Nuxt 3 服务端渲染，完美解决 Vue SPA 的 SEO 问题。' }
  ]
})
</script>

5. 修改package.json

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  }
}

6. 启动项目

npm run dev

常用安装包

  "dependencies": {
    "@fortawesome/fontawesome-free": "^7.1.0",
    "@microsoft/signalr": "^9.0.6",
    "@vue/devtools-api": "^8.0.3",
    "axios": "^1.13.0",
    "element-plus": "^2.11.5",
    "jsencrypt": "^3.5.4",
    "pinia": "^3.0.3",
    "qrcode": "^1.5.4"
  },
  "devDependencies": {
    "@element-plus/nuxt": "^1.1.4",
    "@pinia/nuxt": "^0.11.2",
    "@types/qrcode": "^1.5.6",
    "nuxt": "^4.2.0",
    "vite-plugin-compression": "^0.5.1"
  }

常用nuxt.config.ts配置

// nuxt.config.ts
import viteCompression from 'vite-plugin-compression'
export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: true,
  vite: {
    plugins: [
      viteCompression({ algorithm: 'gzip' }),
      viteCompression({ algorithm: 'brotliCompress', ext: '.br' })
    ]
  },
  modules: [
    '@pinia/nuxt',
    '@element-plus/nuxt'
  ],
  css: [
    'element-plus/dist/index.css',
    'highlight.js/styles/VS.css',
    'typeface-roboto',
    '@fortawesome/fontawesome-free/css/all.min.css',
  ],
  build: {
    transpile: ['element-plus']
  },

windows采用power shell删除相应包

Remove-Item -Recurse -Force node_modules, package-lock.json

object.assign与obj={...row}

// 正确：ref 场景
const memberData = ref({ name: '' });
// ✅ 正确更新值
memberData.value = { ...row };

// 错误：直接赋值给 ref 变量
memberData = { ...row }; // ❌ 响应式丢失！模板不再更新

// 正确：reactive 场景
const memberData = reactive({ name: '' });
// ✅ 正确更新属性
Object.assign(memberData, row);

// 错误：重新赋值 reactive 对象
memberData = { ...row }; // ❌ 报错或响应式失效