README.md

vue-component-finder

vue-component-finder is a Chrome plugin for Vue project, which help developer preview component code module and locate code file in IDE quickly.

中文README

Example

1. "template","script" and "style" tag of the component in code file and line number

2. File path with line number the component was created

3. Component code file preview

4. Position of the component in html page

Open IDE with path clicked and locate the component file and code line:

Usage

1.Install loader and webpack plugin：

    npm install vue-component-finder-loader && npm install vue-component-finder-plugin

2.Use loader and webpack plugin in Vue project dev build:

Use 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']
        }]
    }

Use webpack plugin and config IDE type and IDE path:

    var VueComponentFinderPlugin = require('vue-component-finder-plugin');

    plugins: [
        new VueComponentFinderPlugin({
            editor: 'sublime',
            cmd: 'E:\\Sublime Text 2\\sublime_text.exe'
        });
    ]

3.Install Chrome plugin vue-component-finder.crx,You can download from github or from chrome app store:https://chrome.google.com/webstore/detail/vue-component-finder/maldlhiallkfciipjnedanjjpnfaljpl

4.npm run dev, and open html page, when hover the Vue component, it will show code module info of component and locate component Vue file after path clicked