vscode一键生成vue模板方法

零OO

已于 2023-06-26 11:57:52 修改

阅读量1w

点赞数 7

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

于 2023-06-26 11:50:57 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39111074/article/details/131394110

版权

前端同时被 2 个专栏收录

229 篇文章

订阅专栏

vue

24 篇文章

订阅专栏

文章介绍了如何配置Vue模板，包括使用Ctrl+Shift+P快捷键打开配置窗口设置用户代码片段，以及创建自定义的Vue模板，如“scriptsetup”结构，包含typescript导入和基本组件结构。通过设定模板前缀，可以快速生成模板代码，提高开发效率。

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

配置vue模板

方法一：

在这里插入图片描述

方法二：Ctrl + shift + P 快捷键打开配置窗口，输入“user”，找到“Configure User Snippets” (配置用户代码片段)

在这里插入图片描述

输入文件名后，回车，会生成一个“*.json.code” 文件，在文件中添加自己需要的代码模板

模板示例：

“prefix” - - - 生成模板的名称，自定义，可以写个好记的（输入该字符串后点击回车会生成定义好的模板）
“body” - - - 要生成的代码模板

注意："body"配置项 - - - 外面双引号，里面单引号，反过来会报错

根据自己实际需求配值相应代码模板~

{
   "Print to console": {
    	"prefix": "vue3",
    	"body": [
    		"<script setup lang='ts'>",
    		"import { ref, reactive } from 'vue'",
        	"",
        	"</script>",
        	"",
        	"<template>",
        	"  <div></div>",
        	"</template>",
        	"",
        	"<style lang='scss' scoped>",
        	"",
       		"</style>",
    	],
    	"description": "Log output to console"
    }
}