成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue源碼分析系列之入debug環(huán)境搭建

nihao / 1421人閱讀

摘要：目標(biāo)是為了可以調(diào)試版本的，也就是下的源碼，所以主要是的開啟。結(jié)語至此就可以開心的研究源碼啦。文章鏈接源碼分析系列源碼分析系列之入口文件分析源碼分析系列之響應(yīng)式數(shù)據(jù)一源碼分析系列之響應(yīng)式數(shù)據(jù)二

概述

為了探究vue的本質(zhì)，所以想debug一下源碼，但是怎么開始是個(gè)問題，于是有了這樣一篇記錄。
目標(biāo)是為了可以調(diào)試es6版本的，也就是src下的源碼，所以主要是sourceMap的開啟。
原文來自：https://blog.csdn.net/ReusLi/...。因?yàn)椴幌矚g其排版，所以簡單整理一下。

流程

1.clone vue項(xiàng)目本身
這里是vue項(xiàng)目的克隆地址https://github.com/vuejs/vue.git,執(zhí)行常規(guī)的git clone命令就好。

git clone https://github.com/vuejs/vue.git

2.npm install
3.npm run setup
4.npm install rollup-plugin-alias@^1.4.0 -D (非win10用戶可跳過該步)
5.修改克隆下來的項(xiàng)目中的uildconfig.js文件中的function genConfig (name) {}內(nèi)部的配置對象const config = {xxx}，在其中加入sourceMap: true字段。
6.npm run dev啟動調(diào)試環(huán)境
7.打開/exapmle/commits/index.html文件，修改其中script[src]對vue的引用，修改其文件名為：vue.min.js->vue.js，然后在瀏覽器中直接打開該html即可。
8.開發(fā)者工具中調(diào)試跟進(jìn)，探尋原理。

備注

第6步起來后，會在/dist目錄下生成一個(gè)vue.js的文件，只要引入該文件即可調(diào)試。第7步中的examples文件夾中的文件作為示例使用。

補(bǔ)充：
2019-2-3:
再次在瀏覽器中打開html文件，其中的js沒有關(guān)聯(lián)到對應(yīng)的sourceMap。后來嘗試了下，使用了個(gè)簡單的http-server的包，在vue的項(xiàng)目根目錄，開啟了一個(gè)簡單的本地web的服務(wù)。然后通過該服務(wù)訪問/example/commits/index.html時(shí)，成功的關(guān)聯(lián)到了對應(yīng)的sourceMap。

結(jié)語

至此就可以開心的研究vue源碼啦。

文章鏈接

vue源碼分析系列

vue源碼分析系列之入口文件分析

vue源碼分析系列之響應(yīng)式數(shù)據(jù)（一）

vue源碼分析系列之響應(yīng)式數(shù)據(jù)（二）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108915.html

相關(guān)文章

  • vue源碼分析系列之響應(yīng)式數(shù)據(jù)（一）

    摘要：代碼初始化部分一個(gè)的時(shí)候做了什么當(dāng)我們一個(gè)時(shí)，實(shí)際上執(zhí)行了的構(gòu)造函數(shù)，這個(gè)構(gòu)造函數(shù)內(nèi)部掛載了很多方法，可以在我的上一篇文章中看到。合并構(gòu)造函數(shù)上掛載的與當(dāng)前傳入的非生產(chǎn)環(huán)境，包裝實(shí)例本身，在后期渲染時(shí)候，做一些校驗(yàn)提示輸出。 概述 在使用vue的時(shí)候，data,computed,watch是一些經(jīng)常用到的概念，那么他們是怎么實(shí)現(xiàn)的呢，讓我們從一個(gè)小demo開始分析一下它的流程。 dem...

    liujs 評論0 收藏0

  • vue源碼分析系列

    摘要：本系列文章旨在化繁為簡，通讀源碼，描述背后的實(shí)現(xiàn)邏輯。記錄方式主要是代碼注釋文章鏈接源碼分析系列之環(huán)境搭建源碼分析系列之入口文件分析源碼分析系列之響應(yīng)式數(shù)據(jù)一源碼分析系列之響應(yīng)式數(shù)據(jù)二 概述 在使用vue的時(shí)候，會遇到很多神奇的地方，比如 修改vue實(shí)例中data對象的屬性值，會觸發(fā)dom值的改變；改變dom中的輸入，會觸發(fā)data對應(yīng)屬性的改變，即雙向數(shù)據(jù)綁定。 通過watch可以...

    Joonas 評論0 收藏0

  • vue源碼分析系列之響應(yīng)式數(shù)據(jù)（四）

    摘要：執(zhí)行當(dāng)時(shí)傳入的回調(diào)，并將新值與舊值一并傳入。文章鏈接源碼分析系列源碼分析系列之環(huán)境搭建源碼分析系列之入口文件分析源碼分析系列之響應(yīng)式數(shù)據(jù)一源碼分析系列之響應(yīng)式數(shù)據(jù)二源碼分析系列之響應(yīng)式數(shù)據(jù)三 前言 上一節(jié)著重講述了initComputed中的代碼，以及數(shù)據(jù)是如何從computed中到視圖層的，以及data修改后如何作用于computed。這一節(jié)主要記錄initWatcher中的內(nèi)容。 ...

    GHOST_349178 評論0 收藏0

  • vue源碼分析系列之入口文件分析

    摘要：中引入了中的中引入了中的中，定義了的構(gòu)造函數(shù)中的原型上掛載了方法，用來做初始化原型上掛載的屬性描述符，返回原型上掛載的屬性描述符返回原型上掛載與方法，用來為對象新增刪除響應(yīng)式屬性原型上掛載方法原型上掛載事件相關(guān)的方法。 入口尋找 入口platforms/web/entry-runtime-with-compiler中import了./runtime/index導(dǎo)出的vue。 ./r...

    kgbook 評論0 收藏0

  • 教你如何在 IDEA 遠(yuǎn)程 Debug ElasticSearch

    摘要：前提之前在源碼閱讀環(huán)境搭建文章中寫過我遇到的一個(gè)問題遲遲沒有解決，也一直困擾著我。然后后面自己分享文章在掘金也發(fā)現(xiàn)有人和我有同樣的問題。下面講講另一種可以讓你繼續(xù)看源碼的方法。配置新建一個(gè)遠(yuǎn)程的配置如下圖接下來點(diǎn)擊就好了。 前提 之前在源碼閱讀環(huán)境搭建文章中寫過我遇到的一個(gè)問題遲遲沒有解決，也一直困擾著我。問題如下，在啟動的時(shí)候解決掉其他異常和報(bào)錯(cuò)后，最后剩下這個(gè)錯(cuò)誤一直解決不了： [...

    Cheng_Gang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<