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-highlightingand
Formattingfor 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
F12function 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.jsand update
devtoolproperty as below.
devtool: 'source-map',
3.Add Chrome debug configuration.
Click
Debugicon 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
nameas what you like.
urlshould be the same as your vue application root url.
webRootis your vue application
srcpath.
4.Run the vue application as usual.
npm run dev
5.Start Debugging.
Click
Debugicon in
Activity Barand 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
= $vm0text 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
$vm0to 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/
作者:markjiang7m2 出处:https://www.cnblogs.com/markjiang7m2/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
|
关注 - 0
粉丝 - 6 我在关注他 取消关注 0 0 « 上一篇:How to download a file with plus symbol(+) filename in IIS?
» 下一篇:Ocelot - .Net Core开源网关
- vue中如何在v-for中动态的使用将index拼接字符串后绑定id属性
- Vue中的v-for指令不起效果
- One stop shop for BlogEngine 1.3 extensions
- vue.js 中的在v-for节点中嵌入 v-if 的解释
- (vue中使用v-for报错)You are binding v-model directly to a v-for iteration alias.
- 下一版本Windows® CE 开发工具Smart Device Extensions for Microsoft Visual Studio® .NET
- Graph embedding and extensions: a general framework for dimensionality reducation
- vue常见问题解决办法(二)|warning:component lists rendered with v-for should have explicit keys
- Vue用v-for给src属性赋值的方法
- vue v-for 循环复选框-默认勾选第一个的实现方法
- Vue中v-for的数据分组实例
- VUE.JS v-for渲染过程中 $index is not defined
- New version of VS2005 extensions for SharePoint 3.0
- Developing native extensions for Adobe AIR
- vue v-for 样式赋值
- vue-cli&webpack&arcgis API For JS的天坑之路(一)
- vue.js指令v-for使用以及下标索引的获取
- vue for webapp 中的总结&&填坑
- Vue(2) : Vue for Gank.io
- vue里面的v-for列表循环