Appearance
常用代码
⭐⭐⭐⭐⭐
这里提供了一些开发中比较常用的代码。
http请求
基于 Nuxt3 的 useFetch 封装了一套http请求，无论是在服务端还是客户端发起请求都可以共用这个方法。
注意：服务端的请求必须用 async/await 方式
vue
<script setup>
const query = ref({
pageIndex: 1,
pageSize: 10
})
const articleList = ref([])
const articlePagination = ref({})
await getArticleList()
async function getArticleList() {
const { list, pagination } = await http.post('blogArticle/getArticleList', { ...query.value })
articleList.value = list
articlePagination.value = pagination
}
</script>客户端的请求除了 async/await 也可以使用 .then() 的方式
vue
<script setup>
function addLikeNum() {
http.get('blogArticle/addLikeNum', { id: 123 }).then(res => {
message.success('操作成功')
})
}
</script>环境变量
开发环境、正式环境、测试环境
js
const config = useRuntimeConfig()
console.log(config.public.currentEnv)
// 当前环境：development、production、test运行环境
js
console.log(process.client) // 是否客户端
console.log(process.server) // 是否服务端CSS变量
css
$nColor: #18a058; // 主色调
$nColorHover: #E7F5EE; // 淡绿色
$nDivider: #efeff5; // 淡灰色(分割线)
$nText: #333639; // 主文字
$nTitle: #747474; // 灰色标题
$nGreyTitle: #818181; // 浅灰色标题
$nSubText: #b5b5c3; // 副标题
$nDescribe: #939393; // 描述
$nBgColor: #F9F9F9; // 背景色
$nMaxWidth: 1360px; // 中间内容区最大宽度
@include clamp(3); // 文字超出换行，不传参默认2行状态管理
使用 Nuxt3 自带的 useState 组合函数，目前封装了 会员信息 和 站点信息 两个全局状态。
会员信息
js
const memberInfo = useMemberInfo()
console.log(memberInfo)
// 修改对象中的属性将在全局起作用站点信息
js
const siteInfo = useSiteInfo()
console.log(siteInfo)页面传参
方法一：官方推荐的通过设置目录结构来传参
先设置某个目录下文件名：[id].vue
vue
<template>
<NuxtLink class="title" :to="'article/1'" />
</template>
<script setup>
const route = useRoute()
console.log(route.params.id)
</script>方法二：通过query
vue
<template>
<NuxtLink class="title" to="articleDetail?id=1" />
</template>
<script setup>
const route = useRoute()
console.log(route.query.id)
</script>生命周期
由于 Nuxt3 存在服务端和客户端两中环境，生命周期与Vue会有不同。
vue
<script setup>
const nuxtApp = useNuxtApp()
// setup 内直接写的代码在服务端和客户端都会执行
// 在 setup 内监听不到 app:created、app:beforeMount、vue:setup
// Server & Client：创建初始vueApp实例时调用
nuxtApp.hook("app:created", (renderContext) => {
console.log("app:created")
})
// Server & Client
nuxtApp.hook("vue:setup", (renderContext) => {
console.log("vue:setup")
})
// Server：在SSR渲染完成时调用
nuxtApp.hook("app:rendered", (renderContext) => {
console.log("app:rendered")
})
// Client：在安装应用程序之前调用
nuxtApp.hook("app:beforeMount", (vueApp) => {
console.log("app:beforeMount")
})
// Client：Vue应用程序初始化完成时调用
nuxtApp.hook("app:mounted", (vueApp) => {
console.log("app:mounted")
})
// 页面开始跳转
nuxtApp.hook("page:start", () => {
console.log("page:start")
})
// 页面跳转完成
nuxtApp.hook("page:finish", () => {
console.log("page:finish")
})
// vue3的生命周期
onMounted(() => {
nextTick(() => {
})
})
</script>