VSCode generates vue template
When using VSCode to develop vue, you can use the [User Fragment] function to quickly generate vue templates to reduce repetitive code development
How to set
1. Click on the upper left corner [File]-[Preferences]-[User Fragment]
2. Enter vue in the input box and select vue.json in the drop-down list
[External link image transfer failed. The source site may have an anti-hotlinking mechanism. It is recommended to save the image and upload it directly (img-olNyRykR-1592495109847)(E:\Program Files\Typora\files\picture\juejin\vue\image-20200618233812281 .png)]
3. Enter the following in vue.json
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $0 -->",
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" name: '$1',",
" data () {",
" return {",
" }",
" },",
"",
" components: {},",
"",
" computed: {},",
"",
" methods: {}",
"}",
"",
"</script>",
"<style lang='scss' scoped>",
"</style>",
""
],
"description": "Log output to console"
}
}
how to use
Create a new .vue file, enter vue in the file, and then press tab or enter. *
PS: The cursor will stop at the name to facilitate the input of the component name
Example
<!-- -->
<template>
<div></div>
</template>
<script>
export default {
name: '',
data () {
return {
}
},
components: {
},
computed: {
},
methods: {
}
}
</script>
<style lang='scss' scoped>
</style>