开发小技巧-vscode中快速生成vue3

72 阅读1分钟

每次我们创建vue3的页面的时候下面的代码就需要重新写,那么可不可以将这些代码进行快速创建呢?

<template>
  <div></div>
</template>

<script setup>
import {} from "vue"
</script>

<style lang="sass" scoped></style>

我们可以通过设置代码片段来实现:

1.首先点击左下角的设置,选择用户代码片段 image.png

  1. 然后输入vue,选择vue.json(没有josn选择vue也是可以的) image.png

3.点击进去后定义自己的代码片段即可

我的代码片段放在下面了,大家可以进行参考修改即可

{
	"Print to console": {
	  "prefix": "vue3",
	  "body": [
		"<template>",
		"  <div></div>",
		"</template>\n",
		"<script setup>",
		"import {} from \"vue\"",
		"</script>\n",
		"<style lang=\"sass\" scoped></style>",
		"$2"
	  ],
	  "description": "Log output to console"
	}
}

4.最后的最后,在新创建的vue3的页面输入vue3按下回车即可快速创建文件

image.png