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

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

github:github.com/csonlai/vue… （包含chrome插件vue-component-finder.crx的下載）

插件展現

插件展現

1. 組件的template，script，style對應所在的文件以及起始行數

2. 組件被建立的文件以及行數

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應用商店中進行添加：chrome.google.com/webstore/de…

4.運行項目開發構建npm run dev，打開頁面，鼠標移動到組件區域便可展現對應模塊詳情，點擊自動打開IDE展現對應組件文件內容。

若有使用問題或建議，歡迎留言或提issue~