Vue程式碼模組定位外掛vue-component-finder介紹

csonlai發表於2019-03-01
Vue

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~

相關文章