博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Extensions for Vue
阅读量:6333 次
发布时间:2019-06-22

本文共 4286 字,大约阅读时间需要 14 分钟。

Extensions for Vue

Original post url:

If you are doing vue development, there are some extensions for you to improve the development performance.

  • Vetur
  • Debugger for Chrome
  • Vue Devtools

Vetur

This is a VS Code extension. It supports Syntax-highlighting and Formatting for vue. After install the extension, you can see the code is highlight and the file is identified as vue.

vscode_veturlogo

vscode_vetur

How to use?

1.Install vetur
Click Ctrl + P, input ext install vetur, then install the extension.

2.Add the below in User settings

Click Ctrl + Shift + P, input Preferences: Open User Settings.
Add the below in User settings

"emmet.syntaxProfiles": {  "vue-html": "html",  "vue": "html"}

More details see in .

Debugger for Chrome

This is a VS Code extension. As vue js code will be compiled in browser when we debug the vue application. We could not set a breakpoint in browser. It supports us to debug and set breakpoint in VS Code, like F12 function in Chrome.

vscode_chromelogo

How to use?

1.Install vetur
Click Ctrl + P, input ext install Debugger for Chrome, then install the extension.

2.Update Webpack configuration to build up source map.

Open config/index.js and update devtool property as below.

devtool: 'source-map',

3.Add Chrome debug configuration.

Click Debug icon in Activity Bar. Add configuration as below.

vscode_chromeconfig1

vscode_chromeconfig2

{    "version": "0.2.0",    "configurations": [        {            "type": "chrome",            "request": "launch",            "name": "Launch Chrome against localhost",            "url": "http://localhost:8090",            "webRoot": "${workspaceFolder}/Vue.Router/src",            "breakOnLoad": true,            "sourceMapPathOverrides": {              "webpack:///src/*": "${webRoot}/*"            }        }    ]}

Change name as what you like. url should be the same as your vue application root url. webRoot is your vue application src path.

4.Run the vue application as usual.

npm run dev

5.Start Debugging.

Click Debug icon in Activity Bar and click the green button.

vscode_chromedebug1

Then you can make breakpoint in VS Code.

Vue Devtools

This is a Chrome extension. It helps us to get more details when we debug the vue application.

Actually most of the blogs tell me how to install the extension while few of them can show me how to use the tool.

chrome_vuedevtoolslogo

I find a blog is useful for me. Here is the original link:.

How to use?

1.Install Vue Devtools
There are 2 ways to install the Vue Dev Tools:

  • Add on directly.

  • Manual Installation

    If the Google Chrome Store is not avaible for you, you can try this way.
    Clone the repository from and build it. You can follow the document to install the extension.

2.How to use the Developer Tools?

After install the extension, you can use it in Chrome.
Start a vue application in developing mode and access it in Chrome. Click F12. When the Vue DevTools panel is open, we can navigate the components tree. When we choose a component from the list on the left, the right panel shows the props and data it holds:

chrome_vuetag

On the top there are 4 buttons:

  • Components (the current panel), which lists all the component instances running in the current page. Vue can have multiple instances running at the same time, for example it might manage your shopping cart widget and the slideshow, with separate, lightweight apps.
  • Vuex is where you can inspect the state managed through Vuex.
  • Events shows all the events emitted
  • Refresh reloads the devtools panel

Notice the small = $vm0 text beside a component? It’s a handy way to inspect a component using the Console. Pressing the “esc” key shows up the console in the bottom of the devtools, and you can type $vm0 to access the Vue component:

chrome_vuevm

  • Filter components
    Start typing a component name, and the components tree will filter out the ones that don’t match.

chrome_vuefiltercomponent

  • Select component in the page

    Click the chrome_vuefilterbtn button and you can hover any component in the page with the mouse, click it, and it will be opened in the devtools.

  • Filter inspected data

    On the right panel, you can type any word to filter the properties that don’t match it.

  • nspect DOM

    Click the Inspect DOM button to be brought to the DevTools Elements inspector, with the DOM element generated by the component:

chrome_vueinspectdom

chrome_vuedomview

Reference:

作者:markjiang7m2
出处:
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
dotNet%E6%A1%86%E6%9E%B6%E5%AD%A6%E8%8B%91.jpg
分类:
我在关注他 取消关注
0
0
上一篇:
下一篇:

转载于:https://www.cnblogs.com/letyouknowdotnet/p/10964462.html

你可能感兴趣的文章
[LeetCode]--349. Intersection of Two Arrays
查看>>
tomcat启动报错
查看>>
mongorocks引擎原理解析
查看>>
用Swift实现一款天气预报APP(一)
查看>>
oracle11g R2 RAC卸载grid
查看>>
ES6 结构和扩展运算符
查看>>
王利阳:电商大促 决战6.18
查看>>
kafka消息传输的事务定义
查看>>
JAVA 后台数据校验
查看>>
实现LNMMP
查看>>
mysql的pid文件出现问题
查看>>
计算rem单位
查看>>
第七章 大网高级 ASA
查看>>
rsync+inotify触发式远程同步
查看>>
优秀设计师应当知道的几大UI设计原则(一)
查看>>
mongodb高级查询
查看>>
struts2.1 struts.devMode BUG解决方案
查看>>
日本法院裁定三星诉苹果专利侵权案败诉
查看>>
Windows Server 2012R2 桌面体验问题直通车
查看>>
桌面支持--复印证件技巧
查看>>