Nuxt 写后端

写接口

// server/api/test.ts

export default defineEventHandler(async (event) => {
  // 写这个接口的逻辑
})

可以直接返回text、json、html、stream（文件流等流）。

放心好了，nuxt支持热模块替换和自动导入。改代码直接看到效果。无需手动写import语句。

// vue
<script setup>
// 要写import
import { ref } from 'vue'
import MyButton from '@/components/MyButton.vue'
import { useFetch } from '@/composables/useFetch'

const count = ref(0)
const { data } = useFetch('/api/data')
</script>

<template>
  <MyButton>点击</MyButton>
</template>

Nuxt的自动导入

<script setup>
const count = ref(0) // 自动从`vue`导入ref
const { data } = useFetch('/api/data') // 自动从 composables/ 导入
</script>

<template>
  <MyButton>点击</MyButton>
</template>

Nuxt自动导入了哪些

• Vue API：ref、computed、onMounted等

• Nuxt Composables：useFetch、useAsyncData等

• Vue Router：useRouter、useRoute

• 组件：components/目录下的所有组件

• 工具函数：utils/或composables/目录下的函数

• VueUse：如果安装了@vueuse/nuxt

<template>
  <div>
    <h1>{{ title }}</h1>
    <MyComponent />
  </div>
</template>

<script setup>
// 1. 不需要导入 MyComponent - 自动导入
// 2. 修改后页面局部更新 - HMR
const title = ref('欢迎') // ref 也是自动导入的
</script>

部署 - 通用

云服务器构建Nuxt应用

• Cloudflare
• Netlify
• Edge

混合渲染

自定义路由

// nuxt.config.ts

export default defineNuxtConfig({
  routeRules: {
    // 为 SEO 目的在构建时生成
    '/': { prerender: true },
    '/api/*': { cache: { maxAge: 60 * 60 } },
    '/old-page': {
      redirect: { to: '/new-page', statusCode: 302 }
    }
  }
})

目录结构

• 通过nuxt.config和app.config在项目之间共享可重用的配置预设。
• 用components/目录做组件库。
• 用composables/和utils/目录创建工具和组合式函数库。
• 用layers/目录做项目的层

每个层的srcDir都会自动创建命名的层别名。可以用#layers/test访问~~/layers/test层。

也可以自定义nuxt.config文件去设置添加extends去加一个层：

// nuxt.config.ts

export default defineNuxtConfig({
  extends: [
    '../base', // 从本地层去加
    '@my-themes/awesome', // 从安装的包去加
    'github:my-themes/awesome#v1' // 从git库中加
  ]
})

github私有库的要加token

// nuxt.config.ts

export default defineNuxtConfig({
  extends: [
    '../base', // 从本地层去加
    '@my-themes/awesome', // 从安装的包去加
    ['github:my-themes/awesome#v1': { auth: process.env.GITHUB_TOKEN }] // 从git库中加
  ]
})

起别名

// nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    [
      'github:my-themes/awesome',
      { 
        meta: {
          name: 'my-awesome-theme',
        },
      },
    ],
  ]
})

预渲染

Nuxt允许页面在构建时进行静态渲染，提高SEO。

为啥选Nuxt。它SEO优秀啊。在应用中，我们可以选几个页面在构建时进行渲染。有请求时，Nuxt会提供预构建的页面，而不是动态生它们。

基于爬取的预渲染

用nuxt generate命令。通过Nitro爬虫去建和预渲染应用。

建站点，启动一个nuxt实例。

选择性预渲染

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ["/user/1", "/user/2"],
      ignore: ["/dynamic"],
    },
  },
});