鍍金池/ 問答/HTML/ 在vuejs項目中，如何查看項目中全局注冊了那些“組件”，“指令”，“過濾器”等

在vuejs項目中，如何查看項目中全局注冊了那些“組件”，“指令”，“過濾器”等，通過某方式打印出來？

在jQuery項目中，如果擴展了靜態(tài)方法和實例化方法，可以通過打印console.dir($)和console.dir($.fn)打印出來，不是jQuery原有的，肯定就是工程師自己擴展進去的。比如$.ajax是jQuery自有的，$.myPlugin肯定就是工程師自己擴展的，因為這種擴展代碼復用性比較高，反正看下代碼邏輯就可以直接使用了。

現(xiàn)在接手了一個vuejs項目，代碼組織形式比較亂，閱讀成本偏高，這個時候也想通過打印Vue（Vue在這里只是個舉例）變量的形式找出全局注冊的“組件”，“指令”，“過濾器”等，有解決方案嗎？

回答
編輯回答
陌顏

第一種方法(推薦)：
Chrome有專門的Vue開發(fā)工具，里面可以查看組件、數(shù)據(jù)、事件等等，非常方便，比打印出Vue實例本身去查看好多了，效果圖會像這樣：

clipboard.png

第二種方法：
也就是打印Vue本身實例，在created、beforeMounted、mounted三個周期中的一個里面寫上一句：console.log(this);，這樣就能看到整個Vue實例。

希望我的回答對你有所幫助！

2018年8月21日 16:23
編輯回答
拮據(jù)

大概可以嘗試一下Chrome的vue插件，至少能將頁面中包含的組件以及vuex的相關(guān)東西表達出來

2018年3月26日 21:32
編輯回答
局外人

暫時不知道有這些方法。
你可以自己再它的原型上添加方法 獲取到實例，打出他們的組件、指令、等。

2018年3月19日 11:16
編輯回答
愛是癌

謝邀
寫一段代碼你應(yīng)該就明白了

// 基礎(chǔ)滾動
import stack from './demo/stack_basic'
// 實例vue
let vm = new Vue(stack)
console.log(vm)

具體查看這里吧vue實例

2018年1月27日 13:01