• 技术文章 >web前端 >前端问答

    vue能显示源码吗

    藏色散人藏色散人2023-01-05 15:18:27原创117

    vue能显示源码,vue查看看源码的方法是:1、通过“git clone https://github.com/vuejs/vue.git”获取vue;2、通过“npm i”安装依赖;3、通过“npm i -g rollup”安装rollup;4、修改dev脚本;5、调试源码即可。

    本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。

    vue能显示源码吗?

    能。

    Vue查看看源码的技巧

    搭建调试环境

    • 获取地址:git clone https://github.com/vuejs/vue.git
    • 安装依赖:npm i
    • 安装rollup:npm i -g rollup(因为是用rollup打包的)
    • script修改dev脚本 加上–sourcemap
    "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",

    作用:打包之后 dist 下多了map文件,可以和源码进行很好的映射,方便更好的调试源码
    bbdea85adb749e0ad1b4732f50cfe4f.jpg

    • 执行dev:npm run dev

    调试技巧

    • 打开指定文件: ctrl+p (cmd+p)
    • 断点

    fddaf5ec599b0e2f3fbd6b78efd736a.jpg

    • 查看调用栈
      特别想搞清除先后之前的调用关系,有时候进入过深就蒙圈了,就好好研究call stack,能给你一个很好的思路

    a2f457c473743b350626f754d88e459.jpg

    • 定位源文件所在位置

    3f2ad057bed713ee88d24cfb2cf5159.jpg
    掌握了以上,看的次数多了后,源码的执行就很清晰的在脑海中了。

    推荐学习:《vue视频教程

    以上就是vue能显示源码吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:源码 Vue
    上一篇:vue不刷新当前页面怎么办 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • vue怎么修改父组件值• vue怎么禁止返回到上一页• vue项目部署乱码怎么办• 【整理汇总】45+个Vue面试题,带你巩固知识点!• 一文带你详细了解Vue脚手架
    1/1

    PHP中文网