这个方法是使用快捷键生成,需要你提前创建好vue文件

以下是配置过程

打开命令面板:按 Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(Mac)打开命令面板。

输入 Preferences: Configure User Snippets:选择此选项以打开代码片段配置文件。

选择创建全局的代码配置,这样在哪里都可以用,当然你也可以选择各种的语言进行创建

拷贝以下Tempalte代码,放入新建的文件中,你也可以自定义代码块

{
	"Vue 3 tempalte Pane": {
		"prefix": "vt",
		"body": [
		"<template>",
		"  <div class=\"container\">",
		"</template>",
		"",
		"<script lang=\"ts\" setup>",
		"// 导入工具库",
		"import { ref, onMounted, onUnmounted } from 'vue'",
		"// 导入组件库",
		"// 定义属性",
		"// 定义方法",
		"// 生命周期",
		"onMounted(() => {",
		"})",
		"",
		"onUnmounted(() => {",
		"})",
		"</script>",
		"",
		"<style scoped>",
		".container {",
		"  display: flex;",
		"  height: 400px;",
		"  width: 100%;",
		"  border: 1px solid #ccc;",
		"}",
		"</style>"
		],
		"description": "Vue 3 Split Pane Component"
	},
	"Vue 3 Coment": {
		"prefix": "vc",
		"body": [
			"// 导入工具库",
			"import { ref, onMounted, onUnmounted } from 'vue'",
			"// 导入组件库",
			"// 定义属性",
			"const v = ref()",
			"// 定义方法",
			"const hanlder = () => {}",
			"// 生命周期",
			"onMounted(() => {",
			"})",
			"",
			"onUnmounted(() => {",
			"})",
		],
		"description": "Vue 3 Coment"
	}
}

保存完后就能看到刚才创建的文件

这时候你在vue文件中或者其他的文件中输入 vt 或者 vc 然后回车就能生成代码块儿

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐