VSCode快速生成vue组件模版

最新推荐文章于 2025-06-11 16:33:07 发布

菜鸟级后端

最新推荐文章于 2025-06-11 16:33:07 发布

阅读量881

点赞数 6

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： vscode vue.js

本文链接：https://blog.csdn.net/qq_62398643/article/details/143882378

前端学习专栏收录该内容

1 篇文章

订阅专栏

1，点击设置，找到代码片段

2，搜索vue，打开vue.json

3，添加模版

vue2模板

"vue2": {
        "prefix": "vue2",
        "body": [
            "<template>",
            "  <div>$0</div>",
            "</template>",
            "",
            "<script lang=\"ts\">",
            "export default {",
            "  components: {},",
            "  props: {},",
            "  data() {",
            "    return {",
            "    };",
            "  },",
            "  watch: {},",
            "  computed: {},",
            "  methods: {},",
            "  created() {},",
            "  mounted() {}",
            "};",
            "</script>",
            "<style lang=\"scss\" scoped>",
            "</style>"
        ],
        "description": "快速创建vue2模板"
    }

vue3模板

"vue3": {
		"prefix": "vue3",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script setup lang='ts'>",
			"$1",
			"</script>",
			"",
			"<style scoped lang='scss'>",
			"</style>"
		],
		"description": "快速创建vue3模板"
	}

保存vue.json文件

4，在vue文件中输入vue2或vue3就会生成模板内容，模板内容可根据自己需求修改