当前位置：首页 > news >正文

Vue 的两种实现：VSCode 中配置 vue 模板快捷方式的过程

news 2025/8/4 11:14:12

1、创建配置文件：

其一、打开 VSCode ，Ctrl+Shift+P, 打开搜索框：

在这里插入图片描述

其二、输入：user, 并点击进去 Snippets:Configure User Snippets

在这里插入图片描述

其三、输入 vue3js 并回车：

在这里插入图片描述

其四、打开项目，发现配置文件 vue3js.code-snippets ：

在这里插入图片描述

2、配置快捷方式：

其一、在该配置文件 vue3js.code-snippets 中输入配置信息：


// 此时生成的代码模板中，只有单引号；
{"Print to console": {"prefix": "v3js","body": ["<template>","  <div></div>","</template>","","<script setup>","import { ref, reactive } from 'vue'","","</script>",	"","<style lang='scss' scoped>","","</style>",],"description": "Log output to console"}
}


// 此时生成的代码模板中，双引号的展示方法(即：模板中展示双引号)；
{"Print to console": {"prefix": "v3js","body": ["<template>","  <div></div>","</template>","","<script setup>","import { ref, reactive } from \"vue\"","","</script>",	"","<style lang=\"scss\" scoped>","","</style>",],"description": "Log output to console"}
}

其二、vue3js.code-snippets 配置信息解读：

A、“prefix” 属性指：生成模板的名称；

配置完成后，在 .vue 文件中，输入该字符串后点击回车会生成定义好的模板(即：在 vue3js.code-snippets 中配置的信息)；

B、“body”属性指：要生成的代码模板；

可以根据自己实际需求，来配值相应代码模板;

3、测试快捷方式：

其一、测试的过程：

// 此时在 .vue 中输入快捷键: v3js , 然后回车，就能在页面展示在 vue3js.code-snippets 中配置的模板；

在这里插入图片描述

其二、配置 vue 模板快捷方式的另一种方法：

A、直接在项目种创建 .vscode 文件：

在这里插入图片描述

B、在 .vscode 文件夹种创建 vue3js.code-snippets 文件，并添加配置的 vue 模板的信息：

在这里插入图片描述

4、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

查看全文

http://www.lryc.cn/news/266344.html