22/10/08 vscode快速新建vue空白模版

最新推荐文章于 2023-06-03 18:43:16 发布

六月要好好加油呀

最新推荐文章于 2023-06-03 18:43:16 发布

阅读量487

点赞数

分类专栏： # Vue # vue3 文章标签： vue.js vscode 前端

本文链接：https://blog.youkuaiyun.com/Nighsloth/article/details/127210423

版权

Vue 同时被 2 个专栏收录

28 篇文章

订阅专栏

6 篇文章

订阅专栏

本文介绍如何在Code编辑器中设置Vue2和Vue3的用户代码片段，包括模板代码及使用方法，帮助快速构建Vue项目。

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

位置
以mac为例，
code–》首选项–〉配置用户代码片段–》vue.json文件
在这里插入图片描述

vue2

"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div class='$1'>",
			"",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"",
			"}",
			"</script>",
			"",
			"<style scoped>",
			"",
			"</style>",
			"$2"
		],
		"description": "Vue Template"
	}

vue3 setup

"Print vue with setup": {
		"prefix": "vuest",
		"body": [
			"<template>",
			"  <div class='$1'>",
			"",
			"  </div>",
			"</template>",
			"",
			"<script setup>",
			"const props = defineProps({",
			"",
			"});",
			"</script>",
			"",
			"<style scoped lang='less'>",
			"",
			"</style>",
		],
		"description": "Log output to console"
	},

模版中有什么细节不同的，参考模版根据细节修改即可