Nuxt 优点

支持Vue3& Vite
更好的SEO(Nuxt 名牌)
高开发效率
支持多种部署方式

传统Spa

分批次请求，对服务器比较友好，首屏加载速度慢，

SSR

整体完整生成Html，服务器压力大，传输数据大，首屏加载速度快，

选择Nuxt

支持SEO,和Spa 两种模式，一般首屏使用seo，二级或者多级页面使用Spa

Nuxt 目录结构

.nuxt

编译生成的 vue程序

.output

为生产构建应用程序,Nuxt应用程序部署到生产环境,可以配置在不同服务器器上,比如node.js /GoLang(交给服务器去处理，前端只处理页面)

assets

存放vite 需要打包处理的资源如图片，字体.通常包含，Stylesheets，Fonts,Images

components

放置所有Vue组件,Nuxt 在编译时期，会把刺文件下面的组件，扫描加载，使用时，根据路径名预定组件名称使用，不需要额外的导入

| components/
--| TheHeader.vue
--| TheFooter.vue
--| view/
----| button.vue

使用:根据路径名驼峰引用

<ViewButton></ViewButton>
<TheHeader />
  <TheFooter />

##composables 数据组合,会自动导入，nuxi build 来生成类型，

| composables/
--| useFoo.js

export const useFoo = () => {
  return useState('foo', () => 'bar')
}

使用

 <p>
    {{ foo }}
 </p>

##content 系统管理文件，支持 .md, .yml .csv .json

包含功能：

内置组件渲染您的内容
mongodb的API查询您的内容
MDC语法的Markdown文件中的Vue组件
自动生成导航

添加依赖：

npm install --save-dev @nuxt/content

export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
  content: {
    // https://content.nuxtjs.org/api/configuration
  }
})

使用

| content/
--| index.md

# Hello Content

渲染

 <main>
    <ContentDoc />
  </main>

layouts

外部通用布局，适合创建 BaseLayout,和包含形式的重用布局等

添加默认布局

-| layouts/ ---| default.vue ---| custom.vue

default/custom
<template>
  <div>
    一些在所有页面共享的默认布局
    <slot />// 页面包裹魔板
  </div>
</template>

直接引用NuxtLayout 默认布局就会引用到当前页面，多使用于BaseLayout 相关的页面 ,也可根据名字来更换默认布局

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
// 您可以根据API调用或登录状态来选择此选项
const layout = "custom";
</script>

middleware

aop 的路由中间件框架，用来重新定向路由，多用于login 相关业务，或者通用信息过滤组件

-| middleware/
---| some-middleware.global.ts


export default defineNuxtRouteMiddleware((to, from) => {
  if (to.params.id === '2') {
    return abortNavigation('Insufficient permissions.')
  }else if(to.params.id === '1'){
    return navigateTo('/user-[admin]/3')
  }
})

return abortNavigation() - 停止当前导航
abortNavigation(error) - 拒绝有错误的当前导航
nothing - 不会阻塞导航，并且会移动到下一个中间件功能(如果有的话)，或者完成路由导航

node_modules

存储项目的依赖项，类似Android 的依赖Lib ,如vue 等!

pages

页面展示，index.vue 会作为初始页面

使用

页面是Vue组件，可以使用 .vue

<template>
  <h1>Index page</h1>
</template>

如果使用app.vue 需要调用

<template>
    <div>
      <NuxtLayout>
        some page content
        <NuxtPage/>
      </NuxtLayout>
    </div>
  </template>

动态路由routers

-| pages/ ---| index.vue ---| users-[group]/ -----| [id].vue

根据上面的例子，你可以通过$route对象访问组件中的 group/id: pages/users-[group]/[id].vue

<template>
    <h1>heleo user</h1> 
    <div>
        <p>{{$route.params.id}}</p>
        <p>{{$route.params.group}}</p>
    </div>
</template>

嵌套路由

-| pages/
---| parent/
------| child.vue
---| parent.vue

要显示child.vue组件，你必须在pages/parent.vue中插入组件:

<template>
    <div>
        <h1>
            ppp
        </h1>
        <!-- 嵌套路由 -->
        <NuxtPage></NuxtPage>
    </div>
</template>

NuxtPage 将指引到 parent/child.vue

plugins

Nuxt自动读取您的plugins目录中的文件，并在创建Vue应用程序时加载它

插件信息导入

export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg: string) => `Hello ${msg}!`
    }
  }
})

辅助信息使用

可以存储一些，token 或者长远存储数据

<template>
  <div>
    {{ $hello('world') }}
  </div>
</template>

<script setup lang="ts">
// alternatively, you can also use it here
const { $hello } = useNuxtApp()
</script>

public

public/目录直接服务于服务器根目录，包含必须保留其名称的公共文件(例如：robots.txt)或可能不会更改(例如:favicon.ico)。

server

具有HMR支持的API和服务器处理程序。主要服务端去管理和操作，前端知道就好

utils

工具类的使用，属于自动编译和导入。和插件组件类似加载

app.config

定义应用程序配置配置

export default defineAppConfig({
  theme: {
    primaryColor: '#ababab'
  }
})

使用

const appConfig = useAppConfig()

console.log(appConfig.theme)

app.vue

由于pages 是可选的不是必须选择的，对于不需要路由页面的程序来说是非常有用的,

不使用pages

<template>
  <h1>Hello World!</h1>
</template>

使用Pages

<template>
  <div>
    <NuxtLayout>
      <NuxtPage/>
    </NuxtLayout>
  </div>
</template>

nuxt.config

nuxt 配置文件，需要热更的时候只需要,CS 进行保存，就会重启动服务，对于测试阶段比较有用

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxt/content'
  ],
  content: {
    // https://content.nuxtjs.org/api/configuration
  }
})

package.json

Nuxt 的依赖脚本

Demo 地址

下面是根据本文介绍的demo，如果帮到你给个star nuxt3-demo

Nuxt3 的使用