vue能顯示源碼,vue查看看源碼的方法是:1、通過“git clone https://github.com/vuejs/vue.git”獲取vue;2、通過“npm i”安裝依賴;3、通過“npm i -g rollup”安裝rollup;4、修改dev腳本;5、調(diào)試源碼即可。
本教程操作環(huán)境:Windows10系統(tǒng)、Vue 3版、Dell G3電腦。
vue能顯示源碼嗎?
能。
Vue查看看源碼的技巧
搭建調(diào)試環(huán)境
- 獲取地址: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文件,可以和源碼進行很好的映射,方便更好的調(diào)試源碼
- 執(zhí)行dev:npm run dev
調(diào)試技巧
- 打開指定文件: ctrl+p (cmd+p)
-
斷點
-
查看調(diào)用棧
特別想搞清除先后之前的調(diào)用關(guān)系,有時候進入過深就蒙圈了,就好好研究call stack,能給你一個很好的思路
-
定位源文件所在位置
掌握了以上,看的次數(shù)多了后,源碼的執(zhí)行就很清晰的在腦海中了。
推薦學習:《vue視頻教程》