[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"article-nuxt学习笔记":22,"comments-nuxt学习笔记":43,"footer-socials":44},{"site_title":4,"site_subtitle":5,"home_intro":6,"avatar":7,"seo_keywords":8,"seo_description":9,"site_subtitle_highlight":10,"home_description":11,"about_name":12,"about_intro":13,"code_comment_2":14,"code_log":15,"code_skills":16,"code_goal":17,"code_comment_1":18,"meteor_density":19,"meteor_max_count":19,"meteor_enabled":20,"meteor_speed":21},"ShineGoldYao","架构代码，","全栈开发者 \u002F 开源爱好者 \u002F 技术探索者","https:\u002F\u002Fforuda.gitee.com\u002Favatar\u002F1762402862010015318\u002F16382196_yaoxingjin_1762402861.png!avatar200","ShiGoldYao,技术博客,全栈开发","专注于前沿技术分享与开源项目展示的个人技术博客","书写未来。","大家好，我是 ShiGoldYao。一名全栈学习与技术爱好者。在这里，我分享关于现代 Web 开发、技术框架学习记录以及极客生活的深度思考。","ShiGoldYao","我是一名全栈技术学习者，对构建高性能、可扩展的现代 Web 应用充满热情。过去一年里，我从初识互联网前后端开发，到逐步沉淀技术体系，始终保持着对前端、后端与工程化的持续探索。\n\n我坚信 “代码如诗”。除了日常学习与项目实践，我也会花大量时间关注开源社区，尝试摸索 WebAssembly、Rust 等前沿技术在浏览器端的更多可能，不断挑战性能与体验的边界。\n\n生活里的我并不只有代码：闲暇时会打打永劫无间，享受博弈与操作的快感；也喜欢打乒乓球，在运动中放松自己；当然，最幸福的时光，还是和女朋友一起慢慢生活、认真恋爱。","\u002F\u002F 🚀 开启学习之旅","","Vue , TypeScript , Nest , Mysql","成为优秀的前端全栈工程师","\u002F\u002F 欢迎来到我的技术世界","3","true","5",{"id":23,"title":24,"slug":25,"coverUrl":15,"summary":15,"content":26,"htmlContent":27,"categoryId":28,"viewCount":29,"likeCount":30,"isTop":31,"isPublish":30,"seoKeywords":15,"seoDescription":15,"publishTime":32,"createTime":33,"updateTime":34,"deleteTime":35,"category":36,"tags":42},"17","Nuxt.js 学习笔记","nuxt学习笔记","# Nuxt.js 学习笔记\n\n## 目录\n\n1. [Nuxt.js 简介](#1-nuxtjs-简介)\n2. [环境搭建](#2-环境搭建)\n3. [项目结构](#3-项目结构)\n4. [路由系统](#4-路由系统)\n5. [视图与布局](#5-视图与布局)\n6. [数据获取](#6-数据获取)\n7. [状态管理](#7-状态管理)\n8. [中间件](#8-中间件)\n9. [插件系统](#9-插件系统)\n10. [模块系统](#10-模块系统)\n11. [部署与优化](#11-部署与优化)\n\n***\n\n## 1. Nuxt.js 简介\n\n### 1.1 什么是 Nuxt.js\n\nNuxt.js 是基于 Vue.js 的通用应用框架，主要用于构建服务端渲染（SSR）应用。\n\n**核心特性：**\n\n- 服务端渲染（SSR）\n- 静态站点生成（SSG）\n- 自动路由生成\n- 代码分割\n- 热模块替换\n- 强大的模块生态系统\n\n### 1.2 渲染模式对比\n\n| 模式     | 说明         | 适用场景      |\n| ------ | ---------- | --------- |\n| SSR    | 服务端渲染，首屏直出 | SEO要求高的应用 |\n| SSG    | 静态站点生成     | 博客、文档站    |\n| CSR    | 客户端渲染      | 后台管理系统    |\n| Hybrid | 混合渲染       | 复杂业务场景    |\n\n***\n\n## 2. 环境搭建\n\n### 2.1 系统要求\n\n- Node.js >= 18.0.0\n- 包管理器：npm \u002F yarn \u002F pnpm\n\n### 2.2 创建项目\n\n```bash\n# 使用 npx\nnpx nuxi@latest init my-nuxt-app\n\n# 或使用 pnpm\npnpm dlx nuxi@latest init my-nuxt-app\n\n# 进入项目目录\ncd my-nuxt-app\n\n# 安装依赖\nnpm install\n\n# 启动开发服务器\nnpm run dev\n```\n\n### 2.3 配置文件\n\n`nuxt.config.ts` 核心配置：\n\n```typescript\nexport default defineNuxtConfig({\n  devtools: { enabled: true },\n  \n  app: {\n    head: {\n      title: 'My Nuxt App',\n      meta: [\n        { name: 'description', content: 'My amazing Nuxt application' }\n      ]\n    }\n  },\n  \n  modules: [\n    '@nuxtjs\u002Ftailwindcss'\n  ],\n  \n  runtimeConfig: {\n    public: {\n      apiBase: process.env.NUXT_PUBLIC_API_BASE\n    }\n  }\n})\n```\n\n***\n\n## 3. 项目结构\n\n### 3.1 目录结构说明\n\n```\nmy-nuxt-app\u002F\n├── .nuxt\u002F              # 构建生成目录（自动生成）\n├── .output\u002F            # 构建输出目录\n├── app.vue             # 根组件\n├── nuxt.config.ts      # Nuxt 配置文件\n├── package.json\n├── pages\u002F              # 页面目录（自动路由）\n├── components\u002F         # 组件目录（自动导入）\n├── composables\u002F        # 组合式函数（自动导入）\n├── layouts\u002F            # 布局组件\n├── plugins\u002F            # 插件目录\n├── middleware\u002F         # 中间件目录\n├── public\u002F             # 静态资源\n├── assets\u002F             # 需要构建的资源\n├── server\u002F             # 服务端代码\n│   ├── api\u002F           # API 路由\n│   ├── routes\u002F        # 服务端路由\n│   └── middleware\u002F    # 服务端中间件\n└── utils\u002F              # 工具函数\n```\n\n### 3.2 自动导入机制\n\nNuxt 自动导入以下目录中的模块：\n\n- `components\u002F` - 组件\n- `composables\u002F` - 组合式函数\n- `utils\u002F` - 工具函数\n- Vue 3 API（ref, computed, watch 等）\n\n***\n\n## 4. 路由系统\n\n### 4.1 文件路由\n\nNuxt 基于文件系统自动生成路由：\n\n```\npages\u002F\n├── index.vue           → \u002F\n├── about.vue           → \u002Fabout\n├── users\u002F\n│   ├── index.vue       → \u002Fusers\n│   └── [id].vue        → \u002Fusers\u002F:id\n└── blog\u002F\n    └── [slug].vue      → \u002Fblog\u002F:slug\n```\n\n### 4.2 动态路由\n\n```vue\n\u003C!-- pages\u002Fusers\u002F[id].vue -->\n\u003Cscript setup lang=\"ts\">\nconst route = useRoute()\nconst userId = route.params.id\n\nconst { data: user } = await useFetch(`\u002Fapi\u002Fusers\u002F${userId}`)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>User: {{ user?.name }}\u003C\u002Fh1>\n    \u003Cp>ID: {{ userId }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n### 4.3 路由导航\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst router = useRouter()\nconst route = useRoute()\n\nfunction navigateToAbout() {\n  router.push('\u002Fabout')\n}\n\nfunction goBack() {\n  router.back()\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cnav>\n    \u003CNuxtLink to=\"\u002F\">首页\u003C\u002FNuxtLink>\n    \u003CNuxtLink to=\"\u002Fabout\">关于\u003C\u002FNuxtLink>\n    \u003CNuxtLink :to=\"`\u002Fusers\u002F${userId}`\">用户详情\u003C\u002FNuxtLink>\n    \n    \u003Cbutton @click=\"navigateToAbout\">跳转关于页\u003C\u002Fbutton>\n    \u003Cbutton @click=\"goBack\">返回\u003C\u002Fbutton>\n  \u003C\u002Fnav>\n\u003C\u002Ftemplate>\n```\n\n### 4.4 嵌套路由\n\n```\npages\u002F\n├── parent.vue\n└── parent\u002F\n    ├── index.vue\n    └── child.vue\n```\n\n```vue\n\u003C!-- pages\u002Fparent.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Parent Page\u003C\u002Fh1>\n    \u003CNuxtPage \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n### 4.5 路由中间件\n\n```typescript\n\u002F\u002F middleware\u002Fauth.ts\nexport default defineNuxtRouteMiddleware((to, from) => {\n  const isAuthenticated = useState('auth')\n  \n  if (!isAuthenticated.value) {\n    return navigateTo('\u002Flogin')\n  }\n})\n```\n\n```vue\n\u003C!-- pages\u002Fdashboard.vue -->\n\u003Cscript setup lang=\"ts\">\ndefinePageMeta({\n  middleware: 'auth'\n})\n\u003C\u002Fscript>\n```\n\n***\n\n## 5. 视图与布局\n\n### 5.1 布局系统\n\n```vue\n\u003C!-- layouts\u002Fdefault.vue -->\n\u003Ctemplate>\n  \u003Cdiv class=\"layout\">\n    \u003Cheader>\n      \u003Cnav>\n        \u003CNuxtLink to=\"\u002F\">首页\u003C\u002FNuxtLink>\n        \u003CNuxtLink to=\"\u002Fabout\">关于\u003C\u002FNuxtLink>\n      \u003C\u002Fnav>\n    \u003C\u002Fheader>\n    \n    \u003Cmain>\n      \u003Cslot \u002F>\n    \u003C\u002Fmain>\n    \n    \u003Cfooter>\n      \u003Cp>© 2024 My App\u003C\u002Fp>\n    \u003C\u002Ffooter>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n```vue\n\u003C!-- layouts\u002Fadmin.vue -->\n\u003Ctemplate>\n  \u003Cdiv class=\"admin-layout\">\n    \u003Caside>侧边栏\u003C\u002Faside>\n    \u003Cmain>\n      \u003Cslot \u002F>\n    \u003C\u002Fmain>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n### 5.2 页面使用布局\n\n```vue\n\u003C!-- pages\u002Fadmin\u002Fdashboard.vue -->\n\u003Cscript setup lang=\"ts\">\ndefinePageMeta({\n  layout: 'admin'\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Admin Dashboard\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n### 5.3 页面元信息\n\n```vue\n\u003Cscript setup lang=\"ts\">\nuseHead({\n  title: '页面标题',\n  meta: [\n    { name: 'description', content: '页面描述' },\n    { property: 'og:title', content: '分享标题' }\n  ]\n})\n\u003C\u002Fscript>\n```\n\n***\n\n## 6. 数据获取\n\n### 6.1 useFetch\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst { data, pending, error, refresh } = await useFetch('\u002Fapi\u002Fusers')\n\nif (error.value) {\n  console.error('获取数据失败:', error.value)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"pending\">加载中...\u003C\u002Fdiv>\n  \u003Cdiv v-else-if=\"error\">加载失败\u003C\u002Fdiv>\n  \u003Cdiv v-else>\n    \u003Cul>\n      \u003Cli v-for=\"user in data\" :key=\"user.id\">\n        {{ user.name }}\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n    \u003Cbutton @click=\"refresh\">刷新\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n### 6.2 useAsyncData\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst { data } = await useAsyncData('users', () => \n  $fetch('\u002Fapi\u002Fusers')\n)\n\u003C\u002Fscript>\n```\n\n### 6.3 useLazyFetch\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst { data, pending } = await useLazyFetch('\u002Fapi\u002Farticles')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"pending\">\n    \u003CSkeletonLoader \u002F>\n  \u003C\u002Fdiv>\n  \u003CArticleList v-else :articles=\"data\" \u002F>\n\u003C\u002Ftemplate>\n```\n\n### 6.4 服务端 API\n\n```typescript\n\u002F\u002F server\u002Fapi\u002Fusers.ts\nexport default defineEventHandler(async (event) => {\n  const method = getMethod(event)\n  \n  if (method === 'GET') {\n    const users = await db.users.findMany()\n    return users\n  }\n  \n  if (method === 'POST') {\n    const body = await readBody(event)\n    const user = await db.users.create({\n      data: body\n    })\n    return user\n  }\n})\n```\n\n```typescript\n\u002F\u002F server\u002Fapi\u002Fusers\u002F[id].ts\nexport default defineEventHandler(async (event) => {\n  const id = getRouterParam(event, 'id')\n  const method = getMethod(event)\n  \n  if (method === 'GET') {\n    return await db.users.findUnique({ where: { id } })\n  }\n  \n  if (method === 'DELETE') {\n    return await db.users.delete({ where: { id } })\n  }\n})\n```\n\n***\n\n## 7. 状态管理\n\n### 7.1 useState\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst counter = useState('counter', () => 0)\n\nfunction increment() {\n  counter.value++\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp>Count: {{ counter }}\u003C\u002Fp>\n    \u003Cbutton @click=\"increment\">+1\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n### 7.2 全局状态管理\n\n```typescript\n\u002F\u002F composables\u002FuseAuth.ts\nexport const useAuth = () => {\n  const user = useState\u003CUser | null>('user', () => null)\n  const isAuthenticated = computed(() => !!user.value)\n  \n  async function login(credentials: LoginCredentials) {\n    const response = await $fetch('\u002Fapi\u002Fauth\u002Flogin', {\n      method: 'POST',\n      body: credentials\n    })\n    user.value = response.user\n  }\n  \n  async function logout() {\n    await $fetch('\u002Fapi\u002Fauth\u002Flogout', { method: 'POST' })\n    user.value = null\n  }\n  \n  return {\n    user,\n    isAuthenticated,\n    login,\n    logout\n  }\n}\n```\n\n### 7.3 Pinia 集成\n\n```bash\nnpm install @pinia\u002Fnuxt pinia\n```\n\n```typescript\n\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['@pinia\u002Fnuxt']\n})\n```\n\n```typescript\n\u002F\u002F stores\u002Fuser.ts\nexport const useUserStore = defineStore('user', {\n  state: () => ({\n    user: null as User | null,\n    token: null as string | null\n  }),\n  \n  getters: {\n    isAuthenticated: (state) => !!state.token,\n    userName: (state) => state.user?.name ?? 'Guest'\n  },\n  \n  actions: {\n    async login(credentials: LoginCredentials) {\n      const response = await $fetch('\u002Fapi\u002Fauth\u002Flogin', {\n        method: 'POST',\n        body: credentials\n      })\n      this.user = response.user\n      this.token = response.token\n    },\n    \n    logout() {\n      this.user = null\n      this.token = null\n    }\n  }\n})\n```\n\n***\n\n## 8. 中间件\n\n### 8.1 路由中间件\n\n```typescript\n\u002F\u002F middleware\u002Fauth.ts\nexport default defineNuxtRouteMiddleware((to, from) => {\n  const { isAuthenticated } = useAuth()\n  \n  if (!isAuthenticated.value) {\n    return navigateTo('\u002Flogin')\n  }\n})\n```\n\n```typescript\n\u002F\u002F middleware\u002Fadmin.ts\nexport default defineNuxtRouteMiddleware((to, from) => {\n  const { user } = useAuth()\n  \n  if (user.value?.role !== 'admin') {\n    return navigateTo('\u002Funauthorized')\n  }\n})\n```\n\n### 8.2 全局中间件\n\n```typescript\n\u002F\u002F middleware\u002Fauth.global.ts\nexport default defineNuxtRouteMiddleware((to, from) => {\n  console.log(`导航: ${from.path} → ${to.path}`)\n})\n```\n\n### 8.3 服务端中间件\n\n```typescript\n\u002F\u002F server\u002Fmiddleware\u002Fauth.ts\nexport default defineEventHandler(async (event) => {\n  const url = getRequestURL(event)\n  \n  if (url.pathname.startsWith('\u002Fapi\u002Fadmin')) {\n    const token = getHeader(event, 'authorization')\n    \n    if (!token) {\n      throw createError({\n        statusCode: 401,\n        message: 'Unauthorized'\n      })\n    }\n    \n    event.context.user = await verifyToken(token)\n  }\n})\n```\n\n***\n\n## 9. 插件系统\n\n### 9.1 创建插件\n\n```typescript\n\u002F\u002F plugins\u002Fmy-plugin.ts\nexport default defineNuxtPlugin((nuxtApp) => {\n  return {\n    provide: {\n      myHelper: () => 'Hello from plugin'\n    }\n  }\n})\n```\n\n### 9.2 使用插件\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst { $myHelper } = useNuxtApp()\nconsole.log($myHelper())\n\u003C\u002Fscript>\n```\n\n### 9.3 第三方库插件\n\n```typescript\n\u002F\u002F plugins\u002Faxios.ts\nimport axios from 'axios'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  const instance = axios.create({\n    baseURL: 'https:\u002F\u002Fapi.example.com'\n  })\n  \n  instance.interceptors.request.use((config) => {\n    const token = useAuth().token.value\n    if (token) {\n      config.headers.Authorization = `Bearer ${token}`\n    }\n    return config\n  })\n  \n  return {\n    provide: {\n      axios: instance\n    }\n  }\n})\n```\n\n### 9.4 仅客户端\u002F服务端插件\n\n```typescript\n\u002F\u002F plugins\u002Fclient-only.client.ts\nexport default defineNuxtPlugin(() => {\n  console.log('仅在客户端执行')\n})\n```\n\n```typescript\n\u002F\u002F plugins\u002Fserver-only.server.ts\nexport default defineNuxtPlugin(() => {\n  console.log('仅在服务端执行')\n})\n```\n\n***\n\n## 10. 模块系统\n\n### 10.1 常用模块\n\n```typescript\n\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: [\n    '@nuxtjs\u002Ftailwindcss',    \u002F\u002F Tailwind CSS\n    '@nuxtjs\u002Fcolor-mode',      \u002F\u002F 暗色模式\n    '@nuxt\u002Fimage',             \u002F\u002F 图片优化\n    '@nuxtjs\u002Fgoogle-fonts',    \u002F\u002F Google Fonts\n    '@pinia\u002Fnuxt',             \u002F\u002F Pinia\n    '@nuxt\u002Feslint',            \u002F\u002F ESLint\n  ]\n})\n```\n\n### 10.2 自定义模块\n\n```typescript\n\u002F\u002F modules\u002Fmy-module.ts\nimport { defineNuxtModule, addComponent } from '@nuxt\u002Fkit'\n\nexport default defineNuxtModule({\n  meta: {\n    name: 'my-module',\n    configKey: 'myModule'\n  },\n  \n  defaults: {\n    enabled: true\n  },\n  \n  setup(options, nuxt) {\n    if (!options.enabled) return\n    \n    addComponent({\n      name: 'MyComponent',\n      filePath: resolve('.\u002Fruntime\u002Fcomponents\u002FMyComponent.vue')\n    })\n  }\n})\n```\n\n***\n\n## 11. 部署与优化\n\n### 11.1 构建命令\n\n```bash\n# 开发模式\nnpm run dev\n\n# 构建生产版本\nnpm run build\n\n# 预览生产版本\nnpm run preview\n\n# 生成静态站点\nnpm run generate\n```\n\n### 11.2 环境变量\n\n```env\n# .env\nNUXT_PUBLIC_API_BASE=https:\u002F\u002Fapi.example.com\nNUXT_SECRET_KEY=your-secret-key\n```\n\n```typescript\n\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  runtimeConfig: {\n    secretKey: process.env.NUXT_SECRET_KEY,\n    public: {\n      apiBase: process.env.NUXT_PUBLIC_API_BASE\n    }\n  }\n})\n```\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst config = useRuntimeConfig()\nconst apiBase = config.public.apiBase\n\u003C\u002Fscript>\n```\n\n### 11.3 性能优化\n\n```typescript\n\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  app: {\n    head: {\n      link: [\n        { rel: 'preconnect', href: 'https:\u002F\u002Ffonts.googleapis.com' }\n      ]\n    }\n  },\n  \n  nitro: {\n    compressPublicAssets: true\n  },\n  \n  vite: {\n    build: {\n      chunkSizeWarningLimit: 1000\n    }\n  }\n})\n```\n\n### 11.4 部署配置\n\n**Docker 部署：**\n\n```dockerfile\nFROM node:18-alpine\n\nWORKDIR \u002Fapp\n\nCOPY package*.json .\u002F\nRUN npm ci\n\nCOPY . .\nRUN npm run build\n\nEXPOSE 3000\n\nCMD [\"node\", \".output\u002Fserver\u002Findex.mjs\"]\n```\n\n**PM2 部署：**\n\n```javascript\n\u002F\u002F ecosystem.config.js\nmodule.exports = {\n  apps: [{\n    name: 'nuxt-app',\n    script: '.output\u002Fserver\u002Findex.mjs',\n    instances: 'max',\n    exec_mode: 'cluster'\n  }]\n}\n```\n\n***\n\n## 最佳实践\n\n### 代码组织\n\n```\ncomposables\u002F\n├── useAuth.ts\n├── useApi.ts\n└── useUtils.ts\n\nutils\u002F\n├── format.ts\n├── validate.ts\n└── constants.ts\n\ntypes\u002F\n├── user.ts\n├── api.ts\n└── index.ts\n```\n\n### TypeScript 支持\n\n```typescript\n\u002F\u002F types\u002Fuser.ts\nexport interface User {\n  id: string\n  name: string\n  email: string\n  role: 'admin' | 'user'\n}\n\nexport interface LoginCredentials {\n  email: string\n  password: string\n}\n```\n\n### 错误处理\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst { data, error } = await useFetch('\u002Fapi\u002Fusers')\n\nif (error.value) {\n  throw createError({\n    statusCode: 404,\n    message: '用户不存在'\n  })\n}\n\u003C\u002Fscript>\n```\n\n***\n\n## 学习资源\n\n- [Nuxt 官方文档](https:\u002F\u002Fnuxt.com)\n- [Vue 3 文档](https:\u002F\u002Fvuejs.org)\n- [Nuxt Modules](https:\u002F\u002Fnuxt.com\u002Fmodules)\n- [Nuxt GitHub](https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt)\n\n***\n\n## 学习路线建议\n\n1. **入门阶段**\n   - 掌握 Vue 3 基础\n   - 理解 Nuxt 项目结构\n   - 熟悉自动导入机制\n   - 掌握路由系统\n2. **进阶阶段**\n   - 数据获取与状态管理\n   - 中间件与插件开发\n   - 服务端 API 开发\n   - 布局系统\n3. **高级阶段**\n   - 模块开发\n   - 性能优化\n   - 部署与运维\n   - TypeScript 深度集成\n4. **实战阶段**\n   - 完整项目开发\n   - SEO 优化\n   - 安全加固\n   - CI\u002FCD 集成\n\n",null,"1",111,1,0,"2026-04-07T16:59:02.887Z","2026-04-07T16:59:02.889Z","2026-05-25T22:05:43.795Z","0",{"id":28,"categoryName":37,"slug":38,"description":39,"sort":31,"isEnable":30,"createTime":40,"updateTime":41,"deleteTime":31},"前端开发","frontend-engineering","2222","2026-04-03T02:36:11.945Z","2026-04-07T16:38:46.496Z",[],[],[]]