vs code创建Vue的代码片段

最新推荐文章于 2024-07-03 08:50:20 发布

山有木兮°

最新推荐文章于 2024-07-03 08:50:20 发布

阅读量785

点赞数

文章标签： vue json

本文链接：https://blog.csdn.net/Wannna/article/details/106158478

版权

1.根据图示，选择用户代码片段

在这里插入图片描述

2.向弹出的搜索框中搜索vue.json并点击打开vue.json文件

在这里插入图片描述

3.向Vue.json中添加下列内容（你也可以根据下面的代码进行自定义）

		"Print to console": {
		"prefix": "vue",
		"body": [
		"<!--- $1 --->",
		"<style lang = '$2' scoped>",
		"",
		"</style>",
		"",
		"<template>",
		"    <div>",
		"$3",
		"    </div>",
		"</template>",
		"",
		"<script>",
		"export default {",
		"  data () {",
		"    return {",
		"",
		"    }",
		"  },",
		"  methods: {",
		"",
		"  },",
		"  // 生命周期 - 创建完成",
		"  created () {",
		"",
		"  },",
		"",
		"  // DOM挂载完毕",
		"  mounted () {",
		"",
		"  }",
		"}",
		"</script>",
		""
		]
	},
	"vue代码": {
		"prefix": "ve",
		"body": [
		"<!DOCTYPE html>",
		"",
		"<html lang='en'>",
		"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"\t<title>Document</title>",
			"\t<script src=\"../node_modules/vue/dist/vue.min.js\"></script>",
			"</head>",
			"",
			"<body>",
			"\t<div class=\"container\">",
		 
			"\t</div>",
		 
		 
			"\t<script>",
			" \t\tvar vue = new Vue({",
				"\t\t\tel : '.container',",     
				"\t\t\tdata : {  }," ,         
				"\t\t\tmethods : { }"  ,   
				"\t\t});",
				"\t</script>",
				"</body>",
				"",
				"</html>",
				""
			]
			}