Extensions for Vue
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
.
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:.
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: