VScode创建Vue模板代码-自定义代码片段

﹏ヽ暗。殇╰゛Y 2022-12-05 01:35 180阅读 0赞

前提：vscode中已安装vue

配置模块代码片段：

1.  依次选择 “ File（文件） -> preperences（首选项） -> User Snippets(用户代码片段)”， 此时，会弹出一个搜索框，输入vue， 如下图：
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZ2VsaWE2MjA_size_16_color_FFFFFF_t_70][]
    
        "vue-template": {
        		"prefix": "vuecj",
        		"body": [
        			"<template>",
        			"  <div>",
        			"",
        			" </div>",
        			"</template>",
        			"",
        			"<script>",
        			"export default {",
        			"  name: '',",
        			"  data () {",
        			"    return {",
        			"",
        			"    }",
        			"  },",
        			"  props: {",
        			"",
        			"  },",
        			"  components: {",
        			"  },",
        			"  mounted () {",
        			"",
        			"  },",
        			"  methods: {",
        			"",
        			"  }",
        			"}",
        			"</script>",
        			"",
        			"<style>",
        			"",
        			"</style>",
        			""
        		],
        		"description": "my vue template"
        	}
    
     
2.  选择 vue 后，VS Code 会自动打开一个名字为vue.json的文件，复制以下内容到这个文件中，如下图：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZ2VsaWE2MjA_size_16_color_FFFFFF_t_70]: /images/20221123/f203ee3c455944cfab1a0d4ce181865c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关 VsCode添加Vue模版代码片段

文章目录 VsCode添加Vue模版代码片段 1. 复制一段已有要制作模板的Vue代码，比如： 2. 粘贴到下方链接的工具网站，可自动生成

r囧r小猫/ 2024年03月17日 21:06/ 0 赞/ 23 阅读

相关 VScode创建Vue模板代码-自定义代码片段

前提：vscode中已安装vue 配置模块代码片段： 1. 依次选择 “ File（文件） -> preperences（首选项） -> User Snippets(用户

﹏ヽ暗。殇╰゛Y/ 2022年12月05日 01:35/ 0 赞/ 181 阅读

相关 vscode设置vue代码片段

一、如何设置？ 1. 打开用户片段 ![clipboard.png][] 2. 选择或创建`vue.json`代码片段 ![clipb

╰+攻爆jí腚メ/ 2022年10月27日 12:18/ 0 赞/ 238 阅读

相关 vscode创建vue3用户代码片段

vscode创建vue3用户代码片段 "create": { "prefix": "vue3demo", "body": [

╰+攻爆jí腚メ/ 2022年10月17日 10:41/ 0 赞/ 584 阅读

相关 VScode中Vue快速生成代码片段

首先我们要找到设置（如下图）用户代码片段 ![20181106100412594.png][] 然后我们会看到这样一个框，然后搜索html.json ![20181106

素颜马尾好姑娘i/ 2022年04月18日 00:46/ 0 赞/ 589 阅读

相关 VScode—自定义代码片段snippets

转载：[https://www.jianshu.com/p/1f1132df1def][https_www.jianshu.com_p_1f1132df1def] 自定义

缺乏、安全感/ 2022年03月18日 14:56/ 0 赞/ 262 阅读

相关 vscode 自定义代码片段

[原文地址][Link 1] 实现效果 ![1.gif][] 起因最近在写一个全新的项目，在项目中频繁创建各种类，这就导致很多重复的东西需要频繁的写，例如类名

青旅半醒/ 2022年03月09日 01:58/ 0 赞/ 274 阅读

相关 VScode用户代码片段——快速生成vue片段

在VScode编译器中，Ctrl + Shift + p 输入：preferences:configure User Snippets ![2019032109073721

偏执的太偏执、/ 2022年03月06日 14:58/ 0 赞/ 370 阅读

相关 vscode创建vue快捷代码片段

（1）打开文件首选项 —> 用户代码片段 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

迷南。/ 2022年02月03日 00:55/ 0 赞/ 424 阅读

相关【IDE】VSCode 创建自定义代码段

代码片段简介 snippet[ˈsnɪpɪt]，或者说「code snippet」，也即代码片，指的是能够帮助输入重复代码模式，比如循环或条件语句，的模板。通过 snip...

朱雀/ 2021年01月07日 12:38/ 0 赞/ 606 阅读