Vue代码模块定位插件vue-component-finder介绍
发布在C前端开发2017年10月28日view:193HTML5CSS前端开发MVVM开发调试工具Vue.jsvueUI 开发JavaScript原型j's插件j's插件前端工程前端工程师webwebpack
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

Vue代码模块定位插件vue-component-finder介绍

vue-component-finder是一款用于Vue项目的代码模块预览与快速定位的chrome插件,对于文件目录繁多的vue项目,可以使用该插件快速查看组件对应的代码模块,以及快速打开IDE修改组件代码。

github:https://github.com/csonlai/vue-component-finder (包含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应用商店中进行添加:https://chrome.google.com/webstore/detail/vue-component-finder/maldlhiallkfciipjnedanjjpnfaljpl

4.运行项目开发构建npm run dev,打开页面,鼠标移动到组件区域即可展示对应模块详情,点击自动打开IDE展示对应组件文件内容。

如有使用问题或建议,欢迎留言或提issue~

评论
发表评论
暂无评论
PUBLISHED IN
C前端开发

前端开发

我的收藏