0
点赞
收藏
分享

微信扫一扫

Vue DevTools 安装和浏览器跳转到编辑器指定组件

殇感故事 2022-03-11 阅读 106


Vue DevTools install and Open component in editor

1.在谷歌浏览器安装vue 插件

1.1下载vue插件

链接:https://pan.baidu.com/s/1m6V9rciS10yK-ob4oVrNpA 
提取码:plu2


1.2安装

安装流程:打开谷歌浏览器>设置>扩展程序>拖拽vue插件到扩展程序页面>添加扩展程序

Vue DevTools 安装和浏览器跳转到编辑器指定组件_拖拽

 Vue DevTools 安装和浏览器跳转到编辑器指定组件_vue_02

Vue DevTools 安装和浏览器跳转到编辑器指定组件_ide_03

拖拽vue插件到扩展程序页面,点击:添加扩展程序

 Vue DevTools 安装和浏览器跳转到编辑器指定组件_扩展程序_04

安装成功

Vue DevTools 安装和浏览器跳转到编辑器指定组件_ide_05

1.3使用vue 插件

在浏览器访问vue 项目,F12 打开调试窗口可以看到多了一个选项:vue 

在此不详细讲解vue 插件怎么用,也不难自行摸索即可

重点讲解下:怎么实现浏览器跳转到编辑器(浏览器>VSCode)

Vue DevTools 安装和浏览器跳转到编辑器指定组件_拖拽_06

2.浏览器跳转编辑器

vue 浏览器插件有个按钮用于打开编辑器:open in editor

本案例用的项目是vue cli(脚手架)自动生成的项目

现在来说下怎么搭建

2.1安装launch-editor-middleware

在VSCode 终端窗口中输入:npm install -d launch-editor-middleware

2.2配置webpack

const openInEditor = require('launch-editor-middleware')

before(app) {
/* 编辑器类型 webstorm code */
app.use("/__open-in-editor", openInEditor("code"));
},


Vue DevTools 安装和浏览器跳转到编辑器指定组件_扩展程序_07

支持的编辑器类型有很多,也可以同时配置多个编辑器(传编辑器数组即可)

openInEditor(["webstorm","code"])

Value

Editor

Linux

Windows

OSX

​appcode​

​​AppCode​​



​atom​

​​Atom​​

​atom-beta​

​​Atom Beta​​



​brackets​

​​Brackets​​

​clion​

​​Clion​​


​code​

​​Visual Studio Code​​

​code-insiders​

​​Visual Studio Code Insiders​​

​emacs​

​​Emacs​​



​idea​

​​IDEA​​

​notepad++​

​​Notepad++​​



​pycharm​

​​PyCharm​​

​phpstorm​

​​PhpStorm​​

​rubymine​

​​RubyMine​​

​sublime​

​​Sublime Text​​

​vim​

​​Vim​​



​visualstudio​

​​Visual Studio​​



​webstorm​

​​WebStorm​​

可参考官方文档:https://github.com/yyx990803/launch-editor#launch-editor 

2.3确保VSCode 的bin目录配置到环境变量PATH

Win + R 打开cmd ,输入:code -v

Vue DevTools 安装和浏览器跳转到编辑器指定组件_ide_08

没有配置的则需要找到VSCode 安装目录,然后将bin目录配置到PATH

安装流程在图中,

Path 配在用户变量或者系统变量都是可以的,

用户变量指的是当前用户可以使用(谁配置就谁使用,你不配那你就不配【狗头】)

系统变量指的是不同用户都可以使用

Vue DevTools 安装和浏览器跳转到编辑器指定组件_ide_09

 2.4测试浏览器跳转到编辑器指定的组件

选中组件>点击跳转按钮

Vue DevTools 安装和浏览器跳转到编辑器指定组件_扩展程序_10

 如果VSCode没打开,但看到VSCdoe 在闪Vue DevTools 安装和浏览器跳转到编辑器指定组件_扩展程序_11,那也是打开了你选中的组件文件了。

Vue DevTools让开发vue 变得更加便捷,具体的使用还请自行探索。 


Vue DevTools 安装和浏览器跳转到编辑器指定组件_扩展程序_12




举报

相关推荐

0 条评论