Vue代碼模塊定位插件vue-component-finder介紹

vue-component-finder是一款用于Vue項目的代碼模塊預覽與快速定位的chrome插件里覆,對于文件目錄繁多的vue項目模孩,可以使用該插件快速查看組件對應的代碼模塊,以及快速打開IDE修改組件代碼列赎。

github:https://github.com/csonlai/vue-component-finder (包含chrome插件vue-component-finder.crx的下載)

插件展示

插件展示
插件展示
  1. 組件的template侥袜,script,style對應所在的文件以及起始行數(shù)

  2. 組件被創(chuàng)建的文件以及行數(shù)

  3. 文件代碼預覽

  4. 組件所在頁面位置

點擊自動打開IDE矗晃,并定位到對應文件和對應的代碼行:

代碼定位
代碼定位

如何使用

1.安裝對應的loader與webpack plugin:


npm install vue-component-finder-loader && npm install vue-component-finder-plugin

2.在項目的dev構建中引入loader與plugin:

引入loader:

webpack 2.x:


module: {

rules: [{

test: /\.(vue)$/,

loader: 'vue-component-finder-loader',

enforce: "pre",

include: ['src']

}]

}

webpack 1.x:


module: {

preLoaders: [{

test: /\.(vue)$/,

loader: 'vue-component-finder-loader',

include: ['src']

}]

}

引入plugin并配置對應IDE類型以及文件路徑(sublime為例):


var VueComponentFinderPlugin = require('vue-component-finder-plugin');

plugins: [

new VueComponentFinderPlugin({

editor: 'sublime',

cmd: 'E:\\Sublime Text 2\\sublime_text.exe'

})

]

3.安裝chrome插件vue-component-finder.crx(可在github中下載該文件,或在chrome應用商店中進行添加:https://chrome.google.com/webstore/detail/vue-component-finder/maldlhiallkfciipjnedanjjpnfaljpl

4.運行項目開發(fā)構建npm run dev,打開頁面宴倍,鼠標移動到組件區(qū)域即可展示對應模塊詳情张症,點擊自動打開IDE展示對應組件文件內(nèi)容。

如有使用問題或建議鸵贬,歡迎留言或提issue~

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末吠冤,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子恭理,更是在濱河造成了極大的恐慌,老刑警劉巖郭变,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件颜价,死亡現(xiàn)場離奇詭異,居然都是意外死亡诉濒,警方通過查閱死者的電腦和手機周伦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來未荒,“玉大人专挪,你說我怎么就攤上這事∑牛” “怎么了寨腔?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長率寡。 經(jīng)常有香客問我迫卢,道長,這世上最難降的妖魔是什么冶共? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任乾蛤,我火速辦了婚禮每界,結果婚禮上,老公的妹妹穿的比我還像新娘家卖。我一直安慰自己眨层,他們只是感情好,可當我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布上荡。 她就那樣靜靜地躺著趴樱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪榛臼。 梳的紋絲不亂的頭發(fā)上伊佃,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天,我揣著相機與錄音沛善,去河邊找鬼航揉。 笑死,一個胖子當著我的面吹牛金刁,可吹牛的內(nèi)容都是我干的帅涂。 我是一名探鬼主播,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼尤蛮,長吁一口氣:“原來是場噩夢啊……” “哼媳友!你這毒婦竟也來了?” 一聲冷哼從身側響起产捞,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤醇锚,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后坯临,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體焊唬,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年看靠,在試婚紗的時候發(fā)現(xiàn)自己被綠了赶促。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡挟炬,死狀恐怖鸥滨,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情谤祖,我是刑警寧澤婿滓,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站粥喜,受9級特大地震影響空幻,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜容客,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一秕铛、第九天 我趴在偏房一處隱蔽的房頂上張望约郁。 院中可真熱鬧,春花似錦但两、人聲如沸鬓梅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽绽快。三九已至,卻和暖如春紧阔,著一層夾襖步出監(jiān)牢的瞬間坊罢,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工擅耽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留活孩,地道東北人。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓乖仇,卻偏偏與公主長得像憾儒,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子乃沙,可洞房花燭夜當晚...
    茶點故事閱讀 45,860評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 轉載 :OpenDiggawesome-github-vue 是由OpenDigg整理并維護的Vue相關開源項目庫...
    果汁密碼閱讀 23,137評論 8 124
  • 昨晚寶爸過來了起趾。寶媽等到快晚上11點嚷量,開門看到寶爸故俐,心里一下子那個舒暢啊蠕啄。睡覺時寶爸不安分耍壞鸠蚪,得逞。 今天他開著...
    菟菟俠閱讀 157評論 0 0
  • 今天凌晨四點眨猎,你依舊沒有入睡蘸朋,我看著沒有星星的天空捉片,想象語言和思想的距離蝙茶。我試圖給一棵沒有名字的樹命名,他嘲笑我的...
    租了五顆星閱讀 258評論 0 1
  • 很多妹子在漫長的單身生涯中好不容易終于碰見自己心動的男生,卻心生踟躕别伏,不敢向前蹄衷。 因為周圍的人都是這么說的:“作為...
    一簾舊夢閱讀 407評論 0 0