Extensions for Vue

Original post url:https://www.cnblogs.com/markjiang7m2/p/10833790.html
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 Vetur.

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:https://flaviocopes.com/vue-devtools/.

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

Add on Google Chrome Store directly.
Manual Installation
If the Google Chrome Store is not avaible for you, you can try this way.
Clone the repository from Github 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 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:
https://flaviocopes.com/vue-devtools/

作者：markjiang7m2 出处：https://www.cnblogs.com/markjiang7m2/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。