VScode创建.vue的模板步骤

  1. 安装VueHelper扩展,安装后重启以下vscode
    在这里插入图片描述

  2. 打开用户代码片段
    方法一:Ctrl+Shift+P打开命令输入 snippets; 在搜索框输入vue选择‘vue.json’。
    方法二:文件 → 首选项 → 用户代码片段 → 在搜索框输入vue选择‘vue.json’。
    在这里插入图片描述

  3. 清空内容,输入模板,具体格式如下(可根据自己的喜好进行修改) 其中$0代表模板生成后,光标停留的位置。

{
		"Print to console": {
			"prefix": "vue",
			"body": [
				"<template>",
				" <div>\n",
				" </div>",
				"</template>\n",
				"<script>",
				" export default {",
				"   data () {",
				"     return {\n",
				"     }",
				"   },",
				"   components: {\n",
				"   }",
				" }",
				"</script>\n",
				"<style>\n",
				" ",
				"</style>",
				"$2"
			],
			"description": "Log output to console"
		}
}
  1. 新建vue文件,输入vue按Tab键模板代码就出来了。在这里插入图片描述
Logo

前往低代码交流专区

更多推荐