nuxt项目学习

1. nuxt安装失败解决 Error: Failed to download template from registry: fetch failed
   参考：https://blog.csdn.net/qq_38774121/article/details/127786237

2. 关闭请求缓存 ：initialCache:false

3. 跳转链接 ：
   3.1 外部：window.open(url)
   3.2 内部：navigateTo(path)
   3.3 登陆：navigateTo(route.query.from || "/",{replace:true})

4. vscode创建自定义代码库
   参考：https://blog.csdn.net/qq_33463449/article/details/103928634

5. 调用自定义插件方法
   5.1 模版调用：$funcName(param)
   5.2 代码调用：useNuxtApp().$funcName(params)

6. 时间戳相关
   6.1 根据字符串获取时间戳： (new Date(xxxx)).getTime()
   6.2 获取当前时间戳： Date.now()
   6.3 关闭倒计时：clearInterval(Timer)

7. composables 文件夹用来存放composition API 并且可以自动引入

8. 返回上一页：$router.go(-1)

9. 页面引入中间件：
   9.1 definePageMeta({middleware:['search']})
   9.2 调用位置：在目标页面调用

10. 前端传参中文转义：encodeURIComponent(title.value)

11. 动态传参：url使用回调函数，返回url

export function useSearchDataApi(query){
    return useHttp("SearchData",()=>{
        let r = useQueryToString(query())
        return `/search${r}`
    },{
        lazy:true
    })
}

12. 点击跳转

<nuxt-link to='https://www.baidu.com'>按钮</nuxt-link>

13. 防止冒泡：@click.stop="funcName"
14. flex 占满剩余空间 ：flex-1
15. yarn的安装
    参考：https://blog.csdn.net/qq_39696115/article/details/121687777
16. aplayer集成
    官网：https://aplayer.js.org/#/
17. 西瓜播放器集成
    官网：https://v2.h5player.bytedance.com/gettingStarted/#安装
18. 引入静态资源

// 引入静态资源
if (type == 'course') {
    useHead({
        link: [{
            rel: "stylesheet",
            href: "/aplayer/APlayer.min.css"
        }],
        script: [{
            src: "/aplayer/APlayer.min.js"
        }]
    })
}

19. 集成二维码组件 qrcode
    文档：https://www.npmjs.com/package/qrcode
    20.使用路由守卫

import {onBeforeRouteLeave} from "vue-router"
 
const disableBack = ref(true)
onBeforeRouteLeave((to,from,next)=>{
    if(!disableBack.value){
        next()
    }else{
        const {dialog} = createDiscreteApi(['dialog'])
        dialog.warning({
            content:'是否取消,
            positiveText:'确定',
            negativeText:'取消',
            onPositiveClick(){
                disableBack.value = false
                navigateTo(to.fullPath || '/',{replace:true})
            }
        })
    }
    next(false)
})
 

21. 打包压缩配置
    参考：https://nitro.unjs.io/config/

export default defineNuxtConfig({
//...
	nitro:{
		// 缩小捆绑包
		minify:true,
		// 关闭源映射生成
		sourceMap:false
	}
 
})

22. 路由跳转与参数接收
    22.1 路由跳转
    参考：https://blog.csdn.net/weixin_62918410/article/details/129393003
    22.2 参数接收
    参考：https://blog.csdn.net/matthewwu/article/details/124959011
    22.3 新窗口跳转
    参考：https://huaweicloud.csdn.net/638f0fb3dacf622b8df8e259.html