什么是Nuxt

在了解 Nuxt 之前，我们先来了解一下创建一个现代应用程序，所需的技术：

支持数据双向绑定和组件化（ Nuxt 选择了Vue.js ）。
处理客户端的导航（ Nuxt 选择了vue-router ）。
支持开发中热模块替换和生产环境代码打包（ Nuxt支持webpack 5和Vite ）。
兼容旧版浏览器，支持最新的 JavaScript 语法转译（ Nuxt使用esbuild ）。
应用程序支持开发环境服务器，也支持服务器端渲染或 API接口开发。
Nuxt 使用 h3来实现部署可移植性（h3是一个极小的高性能的http框架）
如：支持在 Serverless、Workers 和 Node.js 环境中运行。

Nuxt 是一个直观的 Web 框架

自 2016 年 10 月以来，Nuxt专门负责集成上述所描述的事情，并提供前端和后端的功能。
Nuxt 框架可以用来快速构建下一个 Vue.js 应用程序，如支持 CSR 、SSR、SSG 渲染模式的应用等。
官网地址： nuxt.com/

Nux3的特点

Vue技术栈：Nuxt3 是基于 Vue3 + Vue Router + Vite 等技术栈，全程 Vue3+Vite 开发体验（Fast）。
自动导包，Nuxt 会自动导入辅助函数、组合 API和 Vue API ，无需手动导入。
基于规范的目录结构，Nuxt 还可以对自己的组件、插件使用自动导入。
约定式路由（目录结构即路由）Nuxt 路由基于vue-router，在 pages/ 目录中创建的每个页面，都会根据目录结构和文件名来自动生成路由
渲染模式：Nuxt 支持多种渲染模式（SSR、CSR、SSG等）
利于搜索引擎优化：服务器端渲染模式，不但可以提高首屏渲染速度，还利于SEO
服务器引擎 ：在开发环境中，它使用 Rollup 和 Node.js 。
在生产环境中，使用 Nitro 将您的应用程序和服务器构建到一个通用.output目录中。Nitro服务引擎提供了跨平台部署的支持，包括 Node、Deno、Serverless、Workers等平台上部署。

Nuxt3 环境搭建

◼ 在开始之前，请确保您已安装推荐的设置：

Node.js （最新 LTS 版本，或 16.11以上）
VS Code ✓ Volar、ESLint、Prettier

◼ 命令行工具，新建项目（hello-nuxt )

方式一：npx nuxi init hello-nuxt
方式二：pnpm dlx nuxi init hello-nuxt
方式三：npm install --g nuxi && nuxi init hello-nuxt

◼ 运行项目: cd hello-nuxt  yarn install

pnpm install --shamefully-hoist（创建一个扁平的 node_modules 目录结构，类似npm 和 yarn）
yarn dev

Nuxt3 目录结构

文件详情

package.json Nuxt脚本介绍

应用入口（App.vue）

默认情况下，Nuxt 会将此文件视为入口点，并为应用程序的每个路由呈现其内容，常用于：

定义页面布局Layout 或自定义布局，如：NuxtLayout
定义路由的占位，如：NuxtPage，编写全局样式，全局监听路由（因为之前介绍到Nuxt是约定式路由，所以并没有路由配置文件）等等

js 复制代码

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<script setup>
//监听全局路由
let router = useRouter()
router.beforeEach((to, from, next) => {
  // 路由跳转前的钩子
  console.log('路由跳转前的钩子')
  next()
})
</script>

配置文件（nuxt.config.ts）

nuxt.config.ts 配置文件位于项目的根目录，可对Nuxt进行自定义配置。

比如，可以进行如下配置： runtimeConfig：运行时配置，即定义环境变量

可通过.env文件中的环境变量来覆盖，优先级（.env > runtimeConfig）
.env的变量会打入到process.env中，符合规则的会覆盖runtimeConfig的变量
.env一般用于某些终端启动应用时动态指定配置，同时支持dev和pro

如：在runtimeConfig中配置变量

js 复制代码

export default defineNuxtConfig({
  devtools: { enabled: true }, //启动开发者工具
  runtimeConfig: {
    // 运行时配置
    appKey: "Jack", //server
    public: {
      baseURL: "http://codercba.com", // server and client
    },
  },
});

在app.vue中使用

js 复制代码

//1.判断代码执行环境
if (process.server) {
  console.log('运行在 server');
}
if (process.client) {
  console.log('运行在 client');
}
//1.读取运行时的配置
const runtimeConfig = useRuntimeConfig()
if (process.server) {
  console.log(runtimeConfig.appKey); //jack
  console.log(runtimeConfig.public.baseURL); //'http://codercba.com'
}
if (process.client) {
  console.log(runtimeConfig.appKey); //undefined
  console.log(runtimeConfig.public.baseURL);//'http://codercba.com'
}

如果我此时新建一个.env文件

js 复制代码

# 环境变量 .env
NUXT_APP_KEY = 'DDDDDDD'

那么这个时候就会覆盖之前的配置文件中的appKey

appConfig：应用配置，定义在构建时确定的公共变量，如：theme

配置会和 app.config.ts 的配置合并（优先级 app.config.ts > appConfig）

可以在nuxt.config.ts 中配置应用配置

js 复制代码

//定义应用的配置
  appConfig: {
    title: "Hello Nuxt LUABU",
    theme: {
      primary: "blue",
    },
  },

在app.vue中获取使用

js 复制代码

let appConfig = useAppConfig()
//server client 
console.log(appConfig.title);
console.log(appConfig.theme.primary);

onMounted(() => {
  document.title = appConfig.title
})

当数据过多，也可以在文件目录里面新建一个app.config.ts的文件去储存。

app：app配置

head：给每个页面上设置head信息，也支持 useHead 配置和内置组件。

app所有的head添加的配置（SEO优化，加载外部资源）

js 复制代码

 app: {
    //app所有的head添加的配置（SEO优化，加载外部资源）
    head: {
      title: "luabu",
      charset: "UTF-8",
      viewport: "width=device-width, initial-scale=1",
      meta: [
        {
          name: "keywords",
          content: "Luabu Nuxt3",
        },
        {
          name: "description",
          content: "学习网站",
        },
      ],
      link: [
        {
          rel: "shortcut icon",
          href: "favicon.ico",
          type: "image/x-icon",
        },
      ],
      style: [
        {
          children: `body{ color: red}`,
        },
      ],
      script: [
        {
          src: "http://baidu.com",
        },
      ],
    },

也可以动态添加

js 复制代码

组件
<Head>
  <Meta name="Key" content="key key"></Meta>
 </Head>
动态添加app所有的页面添加head的内容
useHead({
  title: 'app useHead'
})

ssr：指定应用渲染模式

router：配置路由相关的信息，比如在客户端渲染可以配置hash路由

alias：路径的别名，默认已配好

modules：配置Nuxt扩展的模块，比如：@pinia/nuxt @nuxt/image

routeRules：定义路由规则，可更改路由的渲染模式或分配基于路由缓存策略（公测阶段）

builder：可指定用 vite 还是 webpack来构建应用，默认是vite。如切换为 webpack 还需要安装额外的依赖。

runtimeConifg vs app.config

runtimeConfig 和 app.config都用于向应用程序公开变量。要确定是否应该使用其中一种，以下是一些指导原则：

runtimeConfig：定义环境变量，比如：运行时需要指定的私有或公共token。
app.config：定义公共变量，比如：在构建时确定的公共token、网站配置。

Nuxt3 内置组件

◼ Nuxt3 框架也提供一些内置的组件，常用的如下：

SEO组件： Html、Body、Head、Title、Meta、Style、Link、NoScript、Base
NuxtWelcome ：欢迎页面组件，该组件是 @nuxt/ui的一部分  NuxtLayout：是 Nuxt 自带的页面布局组件 NuxtPage：是 Nuxt 自带的页面占位组件
- ✓ 需要显示位于目录中的顶级或嵌套页面 pages/
- ✓ 是对 router-view 的封装
ClientOnly ：该组件中的默认插槽的内容只在客户端渲染
- ✓ 而fallback插槽的内容只在服务器端渲染
NuxtLink ：是 Nuxt 自带的页面导航组件
- ✓ 是 Vue Router组件和 HTML < a > 标签的封装

【3】Vue3 + Nuxt3 基础介绍

什么是Nuxt

Nux3的特点

Nuxt3 环境搭建

Nuxt3 目录结构

文件详情

package.json Nuxt脚本介绍

应用入口（App.vue）

配置文件（nuxt.config.ts）

Nuxt3 内置组件