vue-component-finder是一款用于Vue项目代码模块预览和快速定位的chrome插件。对于文件目录较多的Vue项目,可以使用本插件快速查看组件对应的代码模块,快速打开IDE修改组件代码。github:https://github.com/csonlai/vue-component-finder(包括chrome插件vue-component-finder.crx的下载)插件显示文件对应组件的模板、脚本、样式及组件起始行号创建的文件及文件代码行数预览组件所在页面点击自动打开IDE,定位到对应文件及对应代码行:使用方法1.安装相应的loader和webpack插件:npminstallvue-component-finder-loader&&npminstallvue-component-finder-plugin2.在项目的devbuild中引入loader和plugin:importloader:webpack2.x:模块:{规则:[{test:/\.(vue)$/,loader:'vue-component-finder-loader',enforce:"pre",include:['src']}]}webpack1.x:module:{preLoaders:[{test:/\.(vue)$/,loader:'vue-component-finder-loader',include:['src']}]}引入插件并配置对应的dingIDE类型和文件路径(以sublime为例):varVueComponentFinderPlugin=require('vue-component-finder-plugin');插件:[newVueComponentFinderPlugin({editor:'sublime',cmd:'E:\\SublimeText2\\sublime_text.exe'})]3.安装chrome插件vue-component-finder.crx(可以在github下载文件,或者在chrome应用商店添加:https://chrome.google.com/web...)4.运行项目开发并构建npmrundev,打开页面,将鼠标移动到组件区域显示相应模块的详细信息,点击自动打开IDE显示相应组件文件的内容。如果有任何使用问题或建议,请留言或提issue~
