这是我参与「第五届青训营」伴学笔记创作活动的第 13 天
前言
前两篇写了一些 nuxt3 和 SSR 的基础
这一篇讲讲 nuxt3 比较进阶的部分
自动引入
nuxt3 自带自动引入
包括一些 nuxt3 的 api 都是不用导入的直接就可以用
例如
数据获取的函数
useFetch
useAsyncData
状态管理函数
useState
运行变量获取函数
useRuntimeConfig
运行时上下文获取函数
useNuxtApp
还有一些 Vue 的 api
例如
响应式的函数
ref
计算属性
computed
文件夹下的内容自动引入
例如
components/
文件夹下的组件composables/
文件夹下的响应式函数utils/
文件夹下的工具函数
可以使用 #imports
来使导入明确
<script setup>
import { ref, computed } from '#imports'
const count = ref(1)
const double = computed(() => count.value * 2)
</script>
2
3
4
5
6
关闭自动引入
在 nuxtconfig
里加入
export default defineNuxtConfig({
imports: {
autoImport: false
}
})
2
3
4
5
(😡谁会这么做
自动引入的组件
假设目录如下
| components/
--| base/
----| foo/
------| Button.vue
2
3
4
此时可以使用 <BaseFooButton />
标签引入这个 button 组件
另外,可以使用一个 Lazy 前缀来懒加载组件
例如
<template>
<div>
<h1>Mountains</h1>
<LazyMountainsList v-if="show" />
<button v-if="!show" @click="show = true">Show List</button>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
这样可以减少打包大小,增加性能
路由
写在 pages/
里的组件会自动写入路由
pages/index.vue
会匹配路由 /
只需要在 app.vue
里添加
<NuxtPage />
标签
可以通过插槽写法例如写 [id].vue
来匹配路由内的参数
例如如下文件树
-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue
2
3
4
在 [id].vue
里写下
<template>
<p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>
2
3
读取 group 参数和 id 参数
访问路由 /users-admins/123
会渲染成
<p>admins - 123</p>
渲染模式
传统的 Vue 项目渲染方式为 客户端渲染
浏览器会先下载到空的 html 文件→下载 js→渲染出来
这种方式的优点是:
开发速度快:当完全在客户端上工作时,我们不必担心代码的服务器兼容性,例如,使用像 windows 这样的浏览器 api。
更便宜的服务器成本:运行一个服务器会增加一个基础设施的成本,因为您需要在一个支持 JavaScript 的平台上运行。我们可以在任何具有 HTML、CSS 和 JavaScript 文件的静态服务器上托管仅限客户端的应用程序。
下载好后离线:因为代码完全在浏览器中运行,所以它可以很好地在互联网不可用时很好地保持工作。
缺点为:
- 性能不好:用户必须等待浏览器下载、解析和运行 JavaScript 文件。根据下载部分的网络和用户的解析和执行设备,这可能需要一些时间,并影响用户的体验。
- 不友好的搜索引擎优化:索引和更新通过客户端呈现交付的内容比使用服务器呈现的 HTML 文档需要更多的时间。
nuxt3 的 服务端渲染
有内容的 html 文件会下载到浏览器→用户在此时可以点击和浏览页面上的内容(部分功能)→需要的组件渲染完成、此时的页面有全部功能
这种方式的优点是:
- 性能好:用户可以立即访问页面的内容,因为浏览器显示静态内容的速度比
javascript
生成的静态内容要快得多。 - 搜索引擎优化:通用呈现将页面的整个 HTML 内容作为一个经典的服务器应用程序传递到浏览器。Web 爬虫可以直接索引页面的内容。
缺点是:
- 开发约束:服务器和浏览器环境不提供相同的 api,而且编写可以在两边无缝运行的代码可能会很棘手。幸运的是,Nuxt 提供了特定的变量来同步这些。
- 成本高:服务器需要运行,才能动态地呈现页面。这就像任何传统服务器一样,增加了每月的成本。但是,由于浏览器接管了客户端导航的通用渲染,服务器调用大大减少了。
类型检查
使用 TypeScript
后可以使用 nuxi 带的语法检查
yarn nuxi typecheck
nuxt 也会自动生成类型
在.nuxt/nuxt.d.ts
目录下
文件目录
一个完整的 nuxt3 项目文件目录应该包含以下文件夹和文件
.nuxt nuxt生成的文件目录里面有 运行的类型等
.output build产物文件夹
assets css文件、字体文件、图片文件
components 组件目录
composables 响应式函数的文件夹
content 基于文件的cms的文件夹
layouts 布局组件的文件夹
middleware 中间件文件夹
node_modules 依赖文件夹
pages 路由的页面
plugins nuxt插件
public 公共文件文件夹,可以放ico图标,图片
server 服务端api文件夹
utils 工具函数文件夹
.gitignore git忽略文件
.nuxtignore 不加入nuxt编译的忽略文件
app.config.ts config文件 可以使用useAppConfig读取
app.vue vue入口
nuxt.config.ts nuxt配置文件
package.json 依赖描述文件
tsconfig.json ts检查配置文件
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
https://nuxt.com/docs/guide/directory-structure/nuxt
总结
本篇文章介绍了 nuxt3 的高级用法
我也是第一次使用 nuxt3 来开发项目
踩到的坑还是很多的,预计可以写一篇踩坑记录
😎🥰
参考
https://nuxt.com/docs/guide/concepts/auto-imports
https://nuxt.com/docs/guide/directory-structure/composables