VScode创建Vue模板代码-自定义代码片段（详细步骤）

01-安装插件识别Vue文件

02-配置模板代码片段

1. 依次选择 “ File（文件） -> preperences（首选项） -> User Snippets(用户代码片段)”， 此时，会弹出一个搜索框，输入vue， 如下：
   
2. 选择 vue 后，VS Code 会自动打开一个名字为vue.json的文件，复制以下内容到这个文件中

{
"vue-template": {
"prefix": "vuekj",
"body": [
"<template>",
"  <div>",
"",
" </div>",
"</template>",
"",
"<script>",
"export default {",
"  name: '',",
"  data() { ",
"    return {",
"",
"    }",
"  },",
"  props: {",
"",
"  },",
"  components:{",
"  },",
"  mounted() {",
"",
"  },",
"  methods:{",
"",
"  },",
" }",
"</script>",
"",
"<style scoped>",
"</style>"
],
"description": "my vue template"
}
}

保存后关闭这个文件。
说明：$0 生成代码后光标的位置 ; prefix 表示生成对应预设代码的命令

03-测试

新建一个名为Demo.vue的文件，输入vue，此时编辑区会有一系列提示，选择Log output to console这一项

04-这样就很方便啦！