一、安装
- 1、nvm 换成更高版本的（注意：npm也要换成更高的）
-
2、nuxt官网：nuxt.com.cn/docs/gettin…
-
3、安装：
npx nuxi@latest init <project-name> -
4、如果报错，解决方法如下：
二、配置头部和底部
- 1、app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
- 2、layouts/default.vue
- 3、新建头部和底部组件（在components下）
三、基本配置
runtimeConfig(全局环境)（nuxt.config.ts）
- 例如：配置baseURL
runtimeConfig: {
// 只在服务器端可用的私有键
count:1,
// public中的键既可以在服务器端使用也可以在客户端使用
public: {
// apiBase: process.env.NUXT_API_BASE || 'https://api.example.com'
baseURL: process.env.NUXT_API_BASE || 'http://localhost:8080'
}
}
所以根据这个可以用来判断当前运行额是服务端还是客户端
要是页面中打印出来的是undifiad就是服务器端
还有一种方法可以判断是否是服务端import.meta.server，如果是true就是服务端反之则不是
客户端渲染不会刷新页面，只刷新修改了的，而服务端会刷新页面
- 在页面中使用
const config = useRuntimeConfig();
全局样式
- 1、新建assets/css/base.scss
- 2、安装预处理器
npm install -D sass
例如设置所有h1为红色
* 设置h1为红色
* 在nuxt.config.ts中加入`css: ["~/assets/css/base.scss"]`
* 页面上使用
全局变量
例如：
- 在base.scss中加入
$myColor:green; - 在nuxt.config.ts中引入
- 页面上使用
elment-plus nuxt.com.cn/modules/ele…
- 安装
npm i element-plus @element-plus/nuxt -D - 在nuxt.config.ts中加入
modules:[
'@element-plus/nuxt'
],
- 在nuxt.config.ts中加入加入css样式
css:[ 'element-plus/dist/index.css', ], - 页面上使用
<el-button @click="ElMessage('hello')">button</el-button>
<ElButton :icon="ElIconEditPen" type="success">button</ElButton>
<LazyElButton type="warning">lazy button</LazyElButton>
调试nuxt（看视频第5集）
四、路由
路由的封装
- 在pages这个文件夹中每个文件都会有路由
实现一个头部底部不变中间变
基于上面配置头部和底部
命名路由'[aa]'(用一个中括号包裹着的)
不管是http://localhost:3000/user/5566 还是http://localhost:3000/user/aaa 都是能访问到这个页面的，不是固定的aaa,是任何的。下面的aa是一个路由参数
获取路由参数：const route = useRoute();
在查询到路由参数后可以根据这个路由参数来查询数据（onMounted）
可选路由[[test]]（这是文件夹）
即http://localhost:3000/test/testEdit 中的test是可选的,可以加也可以不加，http://localhost:3000/testEdit是一样的效果
全局路由‘[...名称]’ eg:'[...404]'
即如果路由没有匹配到就会跳转到这个页面
自定义路由名称
嵌套路由
编程式路由navigateTo
router.push:在客户端渲染的时候使用- 用法：
const router=useRouter() router.push("/login")- 注意：客户端运行之后会阻止后面的运行
navigateTo:在服务端和客户端都能- 用法：
navigateTo("/login")
- 用法：
导航守卫（待补充）
就是访问公共页面的时候就放行，访问个人页面的时候就需要带cookie
五、$fetch和useAsyncData
$fetch基本使用
- 注意：仅使用
$fetch将不会提供 网络请求重复和导航阻止。建议在提交数据到事件处理程序时使用$fetch，在客户端逻辑中使用，或与useAsyncData结合使用。
const users = await $fetch('/api/users').catch((error) => error.data)
console.log(users)
useAsyncData
useAsyncData的第一个参数是用于缓存第二个参数（查询函数）的响应的唯一键。如果直接传递查询函数，则可以忽略该参数。在这种情况下，它将自动生成。
const { data, error } = await useAsyncData('users', () => myGetFunction('users'))
- 由于自动生成的键仅考虑调用
useAsyncData的文件和行，因此建议始终创建自己的键以避免不需要的行为，如果您正在创建自己的自定义组合函数并封装useAsyncData。
const id = ref(1)
const { data, error } = await useAsyncData(`user:${id.value}`, () => {
return myGetFunction('users', { id: id.value })
})
useAsyncData组合函数是包装和等待多个useFetch完成，并获取每个结果的绝佳方式。
const { data: discounts, pending } = await useAsyncData('cart-discount', async () => {
const [coupons, offers] = await Promise.all([$fetch('/cart/coupons'), $fetch('/cart/offers')])
return {
coupons,
offers
}
})
useFetch的基本使用
useFetch(url)几乎等同于useAsyncData(url, () => $fetch(url))- 它是为最常见的用例提供的开发者体验糖。
<script setup lang="ts">
const { data: count } = await useFetch('/api/count')
</script>
<template>
页面访问量：{{ count }}
</template>
const { data, pending } = useLazyFetch('/api/user', {
query: {
user_id: id
}
})
