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~