Extensions for Vue

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.

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.

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.

{
    "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.

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.

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:

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:

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

• 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:

Reference:

https://flaviocopes.com/vue-devtools/