视频教程 nuxt3教程 2024年7月哔哩哔哩bilibili
客户端渲染和服务器渲染
vue是单页面应用，不利于seo优化
单页面是是只有一个html，而多页面是是多个html页面，可以在head中设置seo
是由服务端直接返回的数据叫做服务端渲染，客户端不需要再进行处理；后端返回的模板，数据是由客户端进行渲染的情况叫做客户端渲染
nuxt3安装
前置条件：
- 熟悉vue3+router+pinia
- 前置视频 了解服务端渲染和客户端渲染
- 了解axios的响应拦截器的错误处理
创建项目
npx nuxi@latest init myNuxt
创建好项目之后使用vscode打开
打开app.vue文件
<template>
<div>
<!-- 自带的俩个组件 -->
<NuxtRouteAnnouncer />
<NuxtWelcome />
</div>
</template>
目录如下
myNuxt
├── .gitignore
├── .nuxt # 自带的临时文件
├── app.vue # 入口文件
├── bun.lockb # bun安装依赖产生的文件
├── nuxt.config.ts # 配置文件
├── package.json
├── public
│ ├── favicon.ico
│ └── robots.txt
├── README.md
├── server
│ └── tsconfig.json
└── tsconfig.json
服务端和客户端
修改app.vue
<script setup>
let name = ref('姓名')
</script>
<template>
<div>
<!-- 自带的俩个组件 -->
<!-- <NuxtRouteAnnouncer />
<NuxtWelcome /> -->
<!-- 123 -->
{{ name }}
</div>
</template>
在浏览器中查看网络请求
这样表示是服务端进行渲染，服务器直接将渲染好的文件返回
在代码中添加一行打印，然后刷新页面，在页面的控制台会显示两次打印，其中一次前面具有
ssr前缀，带有前缀的服务端渲染的，不带的是客户端渲染的，查看vscode控制台也会显示打印，对应的就是带前缀的打印
使用alter刷新页面报错：
原因是nuxt的服务端使用的是
nitro，alter在nitro中不支持，因为是服务器出错，所以会报500的错误如果需要使用
alter需要在函数中使用，不能一开始就使用同样的还有 localStorage
基础配置
全局变量
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: "2024-04-03",
devtools: { enabled: true },
// 运行时的一些全局变量
runtimeConfig: {
count: 1,
// public:可以给客户端使用 private:可以给服务端使用
public: {
baseUrl:"localhost:8080"
}
}
});
在需要使用的时候通过useRuntimeConfig进行获取
// 获取全局变量的值
const config = useRuntimeConfig()
console.log("🚀 ~ count:", config.count)
console.log("🚀 ~ baseUrl:", config.public.baseUrl) // 在视频中是 config.baseUrl 但是实际上获取不到 应该是nuxt版本升级问题
runtimeConfig中的数据只能在服务端获取到，public既能在服务端获取到，也能在客户端获取到
全局样式
在vue3中是在main.js中引入全局样式
先创建assets，创建文件myNuxt\assets\css\base.scss，现在还没有预处理器，因此需要先进行安装
bun i -D sass
在webpack中需要配置loader，在nuxt中不需要，因为nuxt是基于vite的
h1{
color:red
}
在nuxt.config.ts中直接引入样式文件
在vue项目中
@表示根目录，在nuxt中~表示根目录
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: "2024-04-03",
devtools: { enabled: true },
// 添加全局css样式
css: ["~/assets/css/base.scss"],
// 运行时的一些全局变量
runtimeConfig: {
// 只能在服务端获取到
count: 1,
// public:可以给客户端使用 private:可以给服务端使用
// public 既能在服务端也能在客户端
public: {
baseUrl:"localhost:8080"
}
}
});
在预处理器中使用变量
$myColor:pink;
h1{
color:red
}
在app.vue中使用
<script setup>
let name = ref('姓名')
// 获取全局变量的值
const config = useRuntimeConfig()
const test = () => {
console.log('2222');
}
</script>
<template>
<div>
<h1>
{{ name }}
</h1>
<button @click="test">测试1</button>
<p>测试变量</p>
</div>
</template>
<style scoped lang="scss">
p{
color:$myColor
}
</style>
出现代码报错，如果想要使用预处理器中的变量需要在vite中配置
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: "2024-04-03",
devtools: { enabled: true },
// 添加全局css样式 初始化样式
// css: ["~/assets/css/base.scss"],
// 配置全局样式
vite: {
css: {
preprocessorOptions: {
scss: {
// use 是 scss 导入的命令
additionalData: '@use "~/assets/css/base.scss" as *;'
}
}
}
},
// 运行时的一些全局变量
runtimeConfig: {
// 只能在服务端获取到
count: 1,
// public:可以给客户端使用 private:可以给服务端使用
// public 既能在服务端也能在客户端
public: {
baseUrl: "localhost:8080"
}
}
});
需要将上面的全局引入去掉，不能重复引入
引入element
参考 Element-plus · Nuxt Modules
安装依赖
npm i element-plus @element-plus/nuxt -D
在配置文件中修改
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: "2024-04-03",
devtools: { enabled: true },
// 添加全局css样式 初始化样式
// css: ["~/assets/css/base.scss"],
// 配置全局样式
vite: {
css: {
preprocessorOptions: {
scss: {
// use 是 scss 导入的命令
additionalData: '@use "~/assets/css/base.scss" as *;'
}
}
}
},
// 引入element plus
modules: [
'@element-plus/nuxt'
],
// 运行时的一些全局变量
runtimeConfig: {
// 只能在服务端获取到
count: 1,
// public:可以给客户端使用 private:可以给服务端使用
// public 既能在服务端也能在客户端
public: {
baseUrl: "localhost:8080"
}
}
});
使用
<script setup>
import { ElMessage } from 'element-plus'
let name = ref('姓名')
// 获取全局变量的值
const config = useRuntimeConfig()
const test = () => {
console.log('2222');
}
const open = () => {
console.log("点击")
ElMessage('This is a message.')
}
</script>
<template>
<div>
<h1>
{{ name }}
</h1>
<button @click="test">测试1</button>
<p>测试变量</p>
<el-button type="primary" @click="open">Primary</el-button>
</div>
</template>
<style scoped lang="scss">
p{
color:$myColor
}
</style>
区分 server 和 client
通过nuxtconfig.ts中runtimeConfig的属性判断，例如count
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: "2024-04-03",
devtools: { enabled: true },
// 运行时的一些全局变量
runtimeConfig: {
// 只能在服务端获取到
count: 1,
// public:可以给客户端使用 private:可以给服务端使用
// public 既能在服务端也能在客户端
public: {
baseUrl: "localhost:8080"
}
}
});
nuxt也提供了方法import.meta.server，true表示服务端，false表示客户端
