foreword
When you use VSCode to configure vue templates, you will find that it is like a caring assistant. This article will introduce how to use VSCode to configure vue templates to make your code more efficient and beautiful. Let's take a look together.
1. Open the VSCode console
File --> Preferences --> User Snippets
or
Ctrl + Shift + P
2. Find "Preferences: Configure User Code Snippets"
click to enter
3. After entering vue, click on the vue.json file
4. Configuration template
Open the configuration generation address , copy the template to the left, and the configuration template will be generated on the right.
5. Copy the configuration template to vue.json
{
"vue-template": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"\">",
"",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" data() {",
" return {}",
" },",
"}",
"</script>",
"",
"<style scoped lang=\"scss\">",
"</style>"
],
"description": "vue-template"
}
}
6. Use
Create a new page and enter vueEnter to automatically generate a template.
Of course, you can also add two templates as follows:
{
"vue-template": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"\">",
"",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" data() {",
" return {}",
" },",
"}",
"</script>",
"",
"<style scoped lang=\"scss\">",
"</style>"
],
"description": "vue-template"
},
"vue-templateTwo": {
"prefix": "vue2",
"body": [
"<template>",
" <div class=\"\">",
"",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" data() {",
" return {}",
" },",
" mounted() {},",
" methods: {},",
"}",
"</script>",
"",
"<style scoped lang=\"scss\">",
"</style>"
],
"description": "vue-templateTwo"
}
}
use
