外贸网站建设哪里实惠,做网站起什么名字好呢,卡巴少儿编程加盟,钟星建设集团网站1. 前言大家好#xff0c;我是若川。最近组织了一次源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获#xff0c;感兴趣可以加我微信 ruochuan12#xff0c;拉你进群学习。第一周读的是#xff1a;据说 99% 的人不知道 vue-devtools 还能直… 1. 前言大家好我是若川。最近组织了一次源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获感兴趣可以加我微信 ruochuan12拉你进群学习。第一周读的是据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件本文原理揭秘。虽然我写过文章但我还是相信有部分小伙伴还是不知道这个功能。vue-devtools 高效打开对应组件文件文中项目用的是vue3所以需要安装 vue3 版本对应的vue-devtools。但有挺多小伙伴无法打开谷歌应用市场。有人说不是谷歌应用市场可以下载嘛。但往往是这一步拦住了很多用户也有了很多商机。比如各种插件网站应运而生。于是我写篇文章我是如何打包安装 devtools 插件的。友情提醒文章相对比较简单。估计有人会说这也要写篇文章嘛。事实上真的有挺多人不知道怎么打包。写文章也是提醒大家多看官方文档和github README。插件我已经打包好放到百度网盘中在我的公众号若川视野回复关键词【插件】即可获取到两个版本的 devtools 进行安装两个版本可以共存。2. 打包插件和安装方法打开 github vue-devtools[1] 发现名字也更新了之前是叫vue-devtools现在是devtools了竟然还出了devtools 官网[2]。2.1 打包 vue3 版本对应的 vue-devtools查看官方READMEvue-devtools contributing[3]vue-devtools v3 版本git clone https://github.com/vuejs/devtools.git
cd devtools
# 如果没安装 yarn可以 npm i yarn -g
# 安装依赖
yarn install
# 构建
yarn build
不出意外构建成功后可以得到有 devtools/packages/shell-chrome/ 目录。2.2 打包 vue2 版本对应的 vue-devtools查看官方READMEvue2 devtools REAMDE.md[4]vue-devtools v2 版本# 可以复制上文克隆的项目
# 终端下复制 或者手动复制
cp -rf devtools devtools-v2
cd devtools-v2
# 复制成功后切换分支 tag 到 v5.3.4 这是 vue2 对应的 devtools。
git checkout v5.3.4
# 删除 node_modules
rm -rf node_modules
# 安装依赖
yarn install
# 构建
yarn build
同样不出意外构建成功后可以得到有 devtools-v2/packages/shell-chrome/ 目录。2.3 安装安装如上图所示谷歌浏览器打开 chrome://extensions/右上角点击开启开发者模式点击加载已解压的扩展程序选择打包生成的 devtools-v2/packages/shell-chrome/ 文件夹即可安装或者直接拖入也可以安装vue2 和 vue3 的插件可以共存。安装好后可以开心的调试啦顺便可以查看下插件的详细信息。目前 vue3 对应版本的是6.0.0-beta-15。vue2 对应的版本是 5.3.4。其中详细信息中允许访问文件网址默认是开启的建议开启。允许访问文件网址3. 总结文章相对简短如果你身边有新人同事还在为安装 devtools 插件发愁可以分享这篇给 TA。启发我们要养成多查阅官方文档或者github README的习惯。好的开源项目README一般都写得非常好。另外除了什么新功能一般在官方文档或者 README 会有体现。虽然一般 README 是英文的会阻拦一部分人但如果真的看不懂还可以通过谷歌翻译等翻译工具。再次友情提醒插件我已经打包好放到百度网盘中在我的公众号若川视野回复关键词【插件】即可获取到两个版本的 devtools 进行安装两个版本可以共存。参考资料[1]github vue-devtools: https://github.com/vuejs/devtools[2]devtools 官网: https://devtools.vuejs.org/[3]vue-devtools contributing: https://devtools.vuejs.org/guide/contributing.html#testing-as-chrome-addon[4]vue2 devtools REAMDE.md: https://github.com/vuejs/devtools/tree/v5.3.4最近组建了一个江西人的前端交流群如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。推荐阅读我在阿里招前端该怎么帮你可进面试群我读源码的经历面对 this 指向丢失尤雨溪在 Vuex 源码中是怎么处理的老姚浅谈怎么学JavaScript················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时活跃在知乎若川掘金若川。致力于分享前端开发经验愿景帮助5年内前端人走向前列。识别上方二维码加我微信、拉你进源码共读群今日话题略。欢迎分享、收藏、点赞、在看我的公众号文章~
