谷歌拼音输入法怎么输入顿号
490 2023-04-02 06:07:47
vue-component-finder是一款用于Vue项目的代码模块预览与快速定位的chrome插件,对于文件目录繁多的vue项目,可以使用该插件快速查看组件对应的代码模块,以及快速打开IDE修改组件代码。
github:https://github.com/csonlai/vue-component-finder (包含chrome插件vue-component-finder.crx的下载)
点击自动打开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~