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

xzavier 發布于2019-08-30 13:49 / 3119人閱讀

摘要：是一款用于項目的代碼模塊預覽與快速定位的插件，對于文件目錄繁多的項目，可以使用該插件快速查看組件對應的代碼模塊，以及快速打開修改組件代碼。

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

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

插件展示

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

組件被創建的文件以及行數

文件代碼預覽

組件所在頁面位置

點擊自動打開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 2sublime_text.exe"
        })
    ]

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

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

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

云服務器 GPU云服務器 vue插件 js地圖定位插件位置定位java代碼 html里定位代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115574.html

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

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

kbyyd24 2019-08-21 17:14 評論0 收藏0
記大四以來的前端面試

摘要：大四到校就開始了緊張的秋招。在此紀錄一下大四以來的前端面試。面試準備準備簡歷。主要是牛客網，牛客網秋招和春招都有面經分享活動，很多拿到大廠的大牛會在上面分享面試經驗。這段是調用函數的語句，調用了約好的函數，并且將數據當做參數傳入。前言大三下學期因為眼睛患了過敏性結膜炎，只好在家養病，錯過了寶貴的實習時間。大四到校就開始了緊張的秋招。拿到的第一個offer是一家廈門的公司，當時跟技術...

劉福 2019-08-22 16:59 評論0 收藏0
記大四以來的前端面試

摘要：大四到校就開始了緊張的秋招。在此紀錄一下大四以來的前端面試。面試準備準備簡歷。主要是牛客網，牛客網秋招和春招都有面經分享活動，很多拿到大廠的大牛會在上面分享面試經驗。這段是調用函數的語句，調用了約好的函數，并且將數據當做參數傳入。前言大三下學期因為眼睛患了過敏性結膜炎，只好在家養病，錯過了寶貴的實習時間。大四到校就開始了緊張的秋招。拿到的第一個offer是一家廈門的公司，當時跟技術...

galois 2019-08-29 15:17 評論0 收藏0