Nuxt3入门（上）

Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。原文可移步我的公众号文章

🔧 安装问题 ⚙️

初始化项目失败

npx nuxi@latest init my_nuxt3_app

1.连接 raw.githubusercontent.com 失败

“Failed to connect to raw.githubusercontent.com port 443: Connection refused”

本地尝试 ping raw.githubusercontent.com，发现不通，基本判断时域名解析的问题。那么就需要在本机的hosts里配置 DNS 映射。如下：

➜  /etc cat hosts

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1    localhost
255.255.255.255    broadcasthost
::1             localhost

# GitHub raw content
185.199.108.133  raw.githubusercontent.com

这样再尝试 Ping，发现可以访问了。

➜  ~ ping raw.githubusercontent.com
PING raw.githubusercontent.com (185.199.108.133): 56 data bytes
64 bytes from 185.199.108.133: icmp_seq=0 ttl=47 time=216.667 ms
64 bytes from 185.199.108.133: icmp_seq=1 ttl=47 time=215.707 ms
^C
--- raw.githubusercontent.com ping statistics ---
7 packets transmitted, 5 packets received, 28.6% packet loss
round-trip min/avg/max/stddev = 215.707/251.382/390.085/69.356 ms
➜  ~

2.yarn install 提示认证过期

“error Error: certificate has expired”

解决方法：yarn config set strict-ssl false

🚀 快速入门 🚪

Nuxt3 相比 Nuxt2 还是有挺多变化的，比如使用了Vite、Composables API 、全面支持TS等。先看了 Nuxt2 的中文文档，遇到一些无解的问题，结果发现官方早都已经是 Nuxt3 了 😅！！！

文件结构

默认只有一个 pages，可以自己创建layouts、components、middleware 这些，约定式路由系统会发挥作用。

js 逻辑写法

推荐script setup，使用 Composables API 进行开发，基本上都是自动导入的，直接用就行。

接口请求

• 有三种方式 $fetch、useFetch、useAsyncData。其中 $fetch 只推荐在纯客户端运行的项目中运行，否则它发送的接口请求会在server和client各执行一遍。
• 使用useFetch的第二个参数对象，可以通过 {watch: [some_var]} 监听，这样在 some_var 发生变化的时候，接口会自动重新执行。
• 在 server 文件夹下创建服务端接口，如创建 server/api/user.js 文件：

export default defineEventHandler(async (e) => {
  return {
    id: 1,
    username: "Believer",
  };
});

则可通过 const { data: userInfo } = useFetch('/api/user', { params: { id: route.params.id } }) 进行请求。

数据共享

在某个.vue文件中使用useState，则在其它.vue文件中可以通过同变量名的useState进行访问，数据共享。

A.vue

const counter = useState("counter", () => Math.round(Math.random() * 1000));

B.vue

const counter = useState("counter");

其中 B.vue 中的 counter 值由 A.vue 中的 counter 更新。

页面跳转校验

现在依然可以使用validate进行前置校验，只不过写法有变：

user/[id].vue

definePageMeta({
  middleware: ["auth"], //会优先于 validate 里的事件
  validate: async (route) => {
    return typeof route.params.id === "string" && /^\d+$/.test(route.params.id);
  },
});

middleware 里的逻辑会优先于 validate 执行。

页面切换效果

如在 app.vue 中定义了名称为page 的 transition 动画样式：

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

然后需要在 nuxt.config.ts 中开启：

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  app: {
    pageTransition: { name: "page", mode: "out-in" },
  },
});

这样页面在切换的时候，就会应用样式了。如果不通的页面需要不同的切换效果，则可以在对应页面中单独定义。
如在 about.vue 中需要一个名称为 rotate 的效果。

<script setup>
definePageMeta({
  pageTransition: { name: 'rotate' }
})
</script>

当然也不要忘记在 app.vue 中定义名称为 rotate 的 transition 动画。

<style>
/* Transition: rotate... */
.rotate-enter-active,
.rotate-leave-active {
  transition: all 0.4s;
}

.rotate-enter-from,
.rotate-leave-to {
  opacity: 0;
  transform: rotate3d(1, 1, 1, 15deg);
}

/* Transition: page... */
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

静态资源引入

如果是需要工程化处理的资源，比如一张图片，那么需要存放在 assets 目录下，引入时路径前缀为 ~/assets/ 或 @/assets/。

否则，就存放在 public 目录下即可，引入时路径前缀为 /public/your_static_file

解决打包部署时资源文件路径的问题

需要在 nuxt.config.js 中指定 baseURL。比如我有一个无服务器项目，需要将generate后的页面部署在 cdn 上，存放在 front/nuxt_1 目录下，那么可以这么写：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  app: {
    pageTransition: { name: "page", mode: "out-in" },
    baseURL: "/front/nuxt_1/",
  },
});

那么打包后，静态资源的路径会长这样 /front/nuxt_1/_nuxt/index.jnsm0lKZ.css。

之后就可以通过 www.yourweb.com/front/nuxt_1/index.html 访问项目首页。

还有routing、 layout、middleware 的写法和应用参考 Nuxt3 官网 即可。还有 Nuxt2 里的 plugins 还没遇到，应该还在吧，感觉挺好的。

😅 这几天浅学一下，感受下是否适合手头的项目做重构（但是文件名约定式路由和各种自动导入用起来真的太舒服了 😂），其它知识点等具体开发项目遇到再记录。