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

xzavier 发布于2019-08-30 13:49 / 2917人阅读

摘要：是一款用于项目的代码模块预览与快速定位的插件，对于文件目录繁多的项目，可以使用该插件快速查看组件对应的代码模块，以及快速打开修改组件代码。

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~

服务器托管云服务器 vue插件 js地图定位插件位置定位java代码 html里定位代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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
Vue代码模块定位插件vue-component-finder介绍

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

dackel 2019-08-05 17:56 评论0 收藏0
记大四以来的前端面试

摘要：大四到校就开始了紧张的秋招。在此纪录一下大四以来的前端面试。面试准备准备简历。主要是牛客网，牛客网秋招和春招都有面经分享活动，很多拿到大厂的大牛会在上面分享面试经验。这段是调用函数的语句，调用了约好的函数，并且将数据当做参数传入。前言大三下学期因为眼睛患了过敏性结膜炎，只好在家养病，错过了宝贵的实习时间。大四到校就开始了紧张的秋招。拿到的第一个offer是一家厦门的公司，当时跟技术...

刘福 2019-08-22 16:59 评论0 收藏0
记大四以来的前端面试

摘要：大四到校就开始了紧张的秋招。在此纪录一下大四以来的前端面试。面试准备准备简历。主要是牛客网，牛客网秋招和春招都有面经分享活动，很多拿到大厂的大牛会在上面分享面试经验。这段是调用函数的语句，调用了约好的函数，并且将数据当做参数传入。前言大三下学期因为眼睛患了过敏性结膜炎，只好在家养病，错过了宝贵的实习时间。大四到校就开始了紧张的秋招。拿到的第一个offer是一家厦门的公司，当时跟技术...

galois 2019-08-29 15:17 评论0 收藏0
前端必须要珍藏的技术文章和面试题

摘要：前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下前端工程师日常工作所需要的学习资料查找，帮助学习者快速掌握前端工程师开发的基本知识编程始于足下记住再牛逼的梦想也抵不住傻逼似的坚持蝴蝶前端工程师学习资料，快速查找面试题，经典技术文章的总结，编程技巧，帮助学习者快速定位问题花点时间整理出一下web前端工程师日常工作所需要的学习资料...

youkede 2019-08-05 17:44 评论0 收藏0