nuxt3入门到实战 -- Vue3 SSR 服务端渲染方案

创建项目

pnpm dlx nuxi init nuxt-app

安装依赖

pnpm install --shamefully-hoist

视频教程地址

• 1.nuxt入门到实战-跃码教育-初始化项目

• P22.nuxt入门到实战-跃码教育-如何定义路由

• P33.nuxt入门到实战-跃码教育-路由参数获取

• P44.nuxt入门到实战-跃码教育-路由跳转

• P55.nuxt入门到实战-跃码教育-加载静态资源

• P66.nuxt入门到实战-跃码教育-处理js、css、title信息

命令说明

{
  "private": true,
  "scripts": {
    "build": "nuxt build", // 编译
    "dev": "nuxt dev", // 开发者模式启动
    "generate": "nuxt generate",
    "preview": "nuxt preview" // 预览
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.8"
  },
  "dependencies": {
    "@nuxtjs/proxy": "^2.1.0"
  }
}

目录结构说明

创建项目之后，没有的目录和文件需要手动创建

│  app.vue
│  nuxt.config.ts
│  package.json
│  pnpm-lock.yaml
│  README.md
│  tsconfig.json
├─assets // 静态资源目录
│      qr.jpg
│      
├─pages // 约定式路由文件  放在这里
│  │  about.vue //路由地址 /about
│  │  cat.vue //路由地址 /cat
│  │  dog.vue //路由地址 /dog
│  │  hello.vue //路由地址 /hello
│  │  index.vue //路由地址 路由入口
│  │  
│  └─user
│          index.vue // 默认路由 /user
│          [id].vue // 动态路由 例如 /user/1 /user/2
│          
└─public
        a.js
        qr.jpg

如何定义路由

nuxt3采用约定式路由，pages目录下的文件名作为路由的路径名称

<template>
  <NuxtPage />
</template>

路由映射地址

├─pages // 约定式路由文件  放在这里
│  │  about.vue //路由地址 /about
│  │  cat.vue //路由地址 /cat
│  │  dog.vue //路由地址 /dog
│  │  hello.vue //路由地址 /hello
│  │  index.vue //路由地址 路由入口
│  │  
│  └─user
│          index.vue // 默认路由 /user
│          [id].vue // 动态路由 例如 /user/1 /user/2
│