VSCode 编写 vue 项目之一键生成 .vue 页面模版

一、说明

在 VSCode 中开发 Vue 项目时，每次都手动编写相同的页面代码基础结构？现在，只需几个简单步骤，你就可以拥有自己的快速模板，让编码效率飞起来！

步骤一：

打开 VSCode，按下 Ctrl + Shift + P（Windows）或 Cmd + Shift + P（Mac）打开命令面板。

步骤二：

配置用户代码片段：

1. 输入“Configure User Snippets”或“用户代码片段”，选择它。
2. 搜索 vue，选择 vue.json 文件进行编辑。
   

步骤三：

定义你的代码片段，在 vue.json 文件中，添加以下内容：

{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div class=\"$1\">$2</div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  name: '$3',",
			"  data() {",
			"    return {",
			"      $4",
			"    };",
			"  },",
			"  methods: {",
			"    $5",
			"  }",
			"};",
			"</script>",
			"<style scoped>",
			"$6",
			"</style>"
		],
		"description": "Log output to console"
	}
}

步骤四：

使用你的模板：

1. 新建 .vue 文件。
2. 输入 vue 然后按下 Tab 或 Enter，VSCode将自动生成你的模板。