使用vscode，建立vue模板

最新推荐文章于 2025-11-27 16:23:16 发布

原创最新推荐文章于 2025-11-27 16:23:16 发布 · 513 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web #vue

本文介绍了一种在Visual Studio Code中快速生成Vue项目基本结构的方法，通过设置用户代码片段，只需输入'vue'并按Tab键，即可自动生成包含template、script和style部分的完整组件模板，极大提升了开发效率。

## 建立vue基本模板，输入vue并按下tab后快速生成设置的模板代码以方便vue项目开发
1.点击上方工具栏-文件
2.找到首选项并点击
3.点击用户代码片段
4.搜索vue并选择vue
5.将下列代码复制进去，注意外层{}需保留，复制代码后保存文件即可实现

"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div>\n",
			"  </div>",
			"</template>\n",
			"<script>",
			"export default {",
			"  name: '',",
			"  components: {},",
			"  data() {",
			"    return {\n",
			"    }",
			"  }",
			"}",
			"</script>\n",
			"<style scoped>",
			"</style>",
			"$2"
		],
		"description": "Log output to console"
	}