vue-component-finder是一款用于Vue項目的代碼模塊預覽與快速定位的chrome插件里覆，對于文件目錄繁多的vue項目模孩，可以使用該插件快速查看組件對應的代碼模塊，以及快速打開IDE修改組件代碼列赎。
github:https://github.com/csonlai/vue-component-finder （包含chrome插件vue-component-finder.crx的下載）
插件展示
插件展示
組件的template侥袜，script，style對應所在的文件以及起始行數(shù)
組件被創(chuàng)建的文件以及行數(shù)
文件代碼預覽
組件所在頁面位置
點擊自動打開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~
