记录——vue快速生成模板在这里插入代码片

KKM_408

已于 2022-05-13 01:51:50 修改

阅读量278

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： vscode ide visual studio code

于 2022-05-13 01:34:56 首次发布

本文链接：https://blog.youkuaiyun.com/ITSYDWJ/article/details/124743921

笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Visual Studio Code(VSCode)中配置Vue.js的代码片段，以实现快速生成Vue组件模板。通过设置用户代码片段，可以便捷地插入包括模板、脚本和样式的完整Vue组件结构，提升开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vscode配置vue快速生成模板在这里插入代码片

首选项 -> 用户代码片段 -> (新建代码片段取名vue.json）

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "vue",
		"body": [
		"<template>",
		"  <div class='hello'>",
		"  </div>",
	  	"</template>\n",
	  	"<script>",
		"export default {",
		"  name: '',",
		"  props: {},",
		"  data () {",
		"    return {}",
		"  },",
		"  computed: {},",
		"  // 监听data中数据变化",
		"  watch: {},",
		"  // 方法集合",
		"  methods: {},",
		"  // vue实例创建完成",
		"  created () {},",
		"  // 挂载完成",
		"  mounted () {},",
		"  // 销毁完成",
		"  destroyed () {}",
		"}",
		"</script>",
		"<!-- Add scoped attribute to limit CSS to this component only -->",
		"<style scoped>\n",
		"</style>\n",
		],
		"description": "Log output to console"
	}
}