项目初始化

新建项目

pnpm dlx nuxi init nuxt3-demo

接入 tailwindcss

pnpm add @nuxtjs/tailwindcss -D

另外 tailwindcss 需要在 nuxt.config.ts 中配置一下

modules: ["@nuxtjs/tailwindcss"]

基础

路由

Nuxt 路由基于 vue-router ，在 pages 目录下创建的文件都会自动生成路由

例如如上结构的路由大概是：

[  
    {  
        path: '/',  
        component: './pages/index.vue',  
    },  
    {  
        path: '/welcome',  
        component: './pages/welcome.vue',  
    }  
]

NuxtPage

在 pages 下写了文件，但目前页面其实还不能按照上面的路由展示，需要在 app.vue 中给一个入口，就是 <NuxtPage>，当然如果项目只有一个页面就使用app.vue就行了。

<template>  
    <NuxtPage></NuxtPage>  
</template>

路由导航

Nuxt 提供 <NuxtLink>标签可以用来进行跳转，该标签有一个 to 属性声明跳转的地址。

<NuxtLink to="/home">link</NuxtLink>

还有一个帮助函数 navigateTo 可以用编程的方式进行导航，需要注意的是，调用该函数需要用 return 或者 await 处理结果。并且 navigateTo 还可以跳转到外部的地址，当跳转到外部地址时第二个参数必须有 external: true，不然会报错

// vue 内跳转  
await navigateTo('/home')  
// 跳转外部地址  
await navigateTo('https://nuxt.com', {  
    external: true  
})

动态路由

当文件名包含了[]，就会被转换为动态路由参数，例如新建一个 list-[id].vue 文件：

<template>  
    <div>  
        {{ $route.params.id }}  
    </div>  
</template>

直接访问 /list-1 可以看到页面显示 1

嵌套路由

当需要二级路由，就需要通过文件结构来处理，pages/detail/name.vue 就会生成对应的路由 '/detail/name' ，另外当存在 '/detail' 路由时，也就是

name 作为字路由，需要在 detail.vue 中提供入口 <NuxtPage> 才能将二级路由页面显示出来，另外也可以在 detail 目录下使用动态路由的方式创建 [id].vue 这样就通过 /detail/1 的方式访问即可。

Layout 布局

根目录下的 Layouts 目录用于存放页面布局，该目录下的组件都可以通过 <NuxtLayout> 标签使用，该标签有一个属性 name 用于指定使用哪个 Layout ，如不指定，默认使用 default。在 Layout 中，还需要写一个插槽来展示 Layout 包裹的组件。

<template>  
    <div>Header</div>  
    <slot />  
</template>

静态资源

需要打包工具处理的资源放在 assets 目录下，不需要处理的放在 public 目录下，访问 public 下的资源直接通过/ 例如 '/pic.png'，访问 assets 目录下的资源需要从根目录开始，在 Nuxt 中路径有的会存在别名，可以通过别名来访问。

{  
    "~~": "/<rootDir>",  
    "@@": "/<rootDir>",  
    "~": "/<rootDir>",  
    "@": "/<rootDir>",  
    "assets": "/<rootDir>/assets",  
    "public": "/<rootDir>/public"  
}

全局样式

在 app.vue 引入的 css 都会作用于全局，另一种方法就是通过 nuxt.config.ts 进行配置，在 assets 新建一个 global.css 作为全局样式。

export default defineNuxtConfig({  
    css: ["assets/global.css"],  
    // ...  
})

组件 Components

Nuxt 组件放在根目录下的 components 目录下，这个目录下的组件当被使用到的时候无需引入和注册，组件名是路径和文件名以大驼峰，例如 'components/nav/bar.vue' 就是 <NavBar>

初识 Nuxt