踩坑记6 vue3、生命周期钩子、vue-devtools beta

2021.7.28

坑17(vue3、生命周期钩子、导航守卫、页面刷新):发现页面刷新后在导航守卫afterEach()中设置的头部的面包屑、标题、标签页调整函数updateHeader()并未触发,即刷新页面无法触发afterEach(),也就无法正确显示刷新后页面的头部。

解决方法:在生命周期钩子onMounted()中调用updateHeader(),该钩子会在页面刷新后触发。以上导航守卫和生命周期钩子都写在setup()中。

注:vue3中,生命周期钩子在setup()中使用,并接收一个回调函数作为参数。详细可见参考文章或官方文档。

setup(){

    function updateHeader(){

        // 调整页面头部的面包屑、标题、标签页

    }

    

    // 页面刷新时不会调用

    router.afterEach((to,from)=>{

        updateHeader()

    })



    // 页面刷新时会调用

    onMounted(()=>{

        updateHeader()

    })



}

参考: 如何在Vue3中使用生命周期函数 - 知乎 (zhihu.com)

官方文档: 生命周期钩子 | Vue3中文文档 - vuejs (vue3js.cn)组合式 API | Vue3中文文档 - vuejs (vue3js.cn)

坑18(vue3、vue-devtools beta):安装vue-devtools到Chrome/Edge浏览器(Firefox可以直接下github的xpi文件安装)。(成功可行的方法请看最后一段,及2021.8.13更新

失败经历:

1、github下载的压缩包,main分支,yarn install成功,yarn run build / npm run build 均失败。

2、新建一空文件夹,命令行npm install vue-devtools,将node_modules\vue-devtools\vender文件作为扩展程序载入到浏览器Chrome/Edge,权限全开;vender下manifest.json文件中"persistent"属性置为true。启用后效果:进入vue写的网站(参考 哪些网站使用了vue?_冰雪为融的博客-CSDN博客_vue网站,ps:csdn新版博客主页也是vue写的,但旧版不是),可以点亮图标,但自己运行的网站始终为灰色,提示Vue.js not detected。

原因排查:下载版本不对,vue3对应的vue-devtools应该是6.0.0以上的beta版本。

继续尝试:

github下载最新的beta版安装包,devtools-6.0.0-beta.15,yarn install,yarn build,报错(原因见及解决方法见后附的2021.8.13更新):

lerna ERR! yarn run build exited 1 in '@vue-devtools/shell-chrome'

lerna ERR! yarn run build stdout:

$ rm -rf ./build && cross-env NODE_ENV=production webpack --progress

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run build stderr:

warning package.json: No license field

'rm' �����ڲ����ⲿ���Ҳ���ǿ����еij���

���������ļ���

error Command failed with exit code 1.

lerna ERR! yarn run build exited 1 in '@vue-devtools/shell-chrome'

lerna WARN complete Waiting for 1 child process to exit. CTRL-C to exit immediately.

error Command failed with exit code 1.

删除yarn.lock,yarn init,yarn install,yarn build,依然失败。

若成功,取packages\shell-chrome文件作为扩展程序载入到浏览器Chrome/Edge。

(下载很慢可以考虑换源,参考 Electron安装失败_mocoe的专栏-CSDN博客

注:之前下过一个6.0.0-beta.6版本没报错,成功生成了shell-chrome文件,但运行报错backend.js:3253 TypeError: api.on.visitComponentTree is not a function,暂未发现有阻碍/影响运行。

最后成功的方法Download Vue.js Devtools 6.0.0 beta 15 CRX File for Chrome - Crx4ChromeVue.js Devtools_6.0.0beta15_chrome扩展插件下载_极简插件 (zzzmh.cn)直接下载扩展程序.crx文件安装。连接是目前的最新版beta-6.0.0.15。

2021.8.13更新(成功bulid及使用)
收到留言:"devtools这个报错需要把 @vue\devtools和@vue-devtools\shell-chrome的build命令里面的rm -rf改成rimraf,windows下不能使用rm好像"
查了一下相关资料, 认为可行,值得一试。 windows确实不能使用rm, 参考:'rm' 不是内部或外部命令,也不是可运行的程序 或批处理文件。_今天不学习~明天变垃圾~-CSDN博客 。rimraf 参考: npm包--rimraf_丫丫的博客-CSDN博客_rimraf安装
尝试:(版本是 devtools-6.0.0-beta.15)
首先 安装rimraf,npm install rimraf --save-dev 报错: npm ERR! RequestError: read ECONNRESET。查看源地址, npm config get registry,看到当前源地址是 https://registry.npmjs.org/。设置源地址为淘宝镜像, npm config set registry https://registry.npm.taobao.org/。再次尝试安装 rim raf, npm install rimraf --save-dev,成功
之后, 搜索rm -rf,可以找到一下两个位置下的package.json
packages\shell-chrome\package.json
packages\shell-electron\package.json
备份后,修改 替换其中的rm -rf为rimraf ,下方代码 shell-chrome包中的 package.json为例
//packages\shell-chrome\package.json
//修改后
"scripts": {
    "build": "rimraf ./build && cross-env NODE_ENV=production webpack --progress"
},
//修改前
"scripts": {
    "build": "rm -rf ./build && cross-env NODE_ENV=production webpack --progress"
},
最后, yarn install, yarn build,成功 !!!
packages\shell-chrome文件作为扩展程序载入到浏览器Chrome/Edge,可以使用。

by 莫得感情踩坑机(限定)

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值