VScode为Vue文件设置模板代码

VScode为Vue文件设置模板代码

（1）\安装 Vetur 和 VueHelper 插件，安装完成后需要重启 VScode。

(2)在扩展插件搜索框中找到如下 Vetur 和 VueHelper 两个插件，注意看图标，千万别安装错插件了

（3）为 vue 添加模板代码片段。

(4)选中 vue 项。

(5)在打开的 vue.json 中加入你的模板代码片段。

{
    
    
	"vue": {
    
    
	"prefix": "vue",
	"body": [
      " <!-- @description：$0  -->",
      " <!--  @date：Created in   ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND} -->",
      " <!--  @modified By：  -->",
      " <!--  @version: 1.0.0  -->",
		"<template>",
		"  <div>",
		"  </div>",
		"</template>",
		"<script>",
      " export default {",
      "   name: '$0',",
      "   data() {",
      "     return {}",
      "  },",
      "  methods: {}",
      "}",
		"</script>",
		"<style scoped lang='scss'>",
		"</style>",
	],
	"description": "generate a vue file"}
}

（6）在 vue 文件中，当你键入 vue 前缀时将自动联想出你在前面创建好的代码片段描述，此时按下 Tab 键或者选中它，模板代码片段将会被自动添加到你的 vue 文件中。