编辑自己的代码片段

  1. ctrl+shift+p

  2. 输入snippet

  3. 选择 'Preferences: Configure User Snippets'

  4. 输入vue

  5. 选择vue.json,会打开vue.json文件

  6. 在文件中输入以下代码

    {
    "vue-template": {
    "prefix": "vue",
    "body": [
    "<template>",
    " <div class=\"\">",
    "",
    " </div>",
    "</template>",
    "",
    "<script>",
    "export default {",
    " name: '',",
    " data() { ",
    " return {",
    "",
    " }",
    " },",
    " props: {",
    "",
    " },",
    " components:{",
    " },",
    " mounted() {",
    "",
    " },",
    " methods:{",
    "",
    " },",
    " }",
    "</script>",
    "",
    "<style lang=\"less\" scoped>",
    " .$1{",
    "",
    " }",
    "</style>" ],
    "description": "my vue template"
    }
    }

使用代码片段

  1. 新建vue文件
  2. 打开刚刚新建的vue文件
  3. 输入vue,会有提示,回车即可

VSCode-VUE模板文件的更多相关文章

  1. [小tips]使用vscode,根据vue模板文件生成代码

    本着苍蝇虽小也是肉的精神...... 目标: 我们希望每次新建.vue文件后,VSCODE能够根据配置,自动生成我们想要的内容. 方法: 打开VSCODE编辑器,依次选择"文件 -> ...

  2. webpack4.x加vue模板文件简单还原vue-cli

    1.首先 npm init -y 创建一个项目 2.安装vue npm install vue --save 3.然后安装webpack 注意如果全局没有还要安装全局的webpack和webpack- ...

  3. 【vsCode】识别.vue/一键生成.vue模板文件

    1.安装插件Vetur 结果 ---> .vue代码识别彩标 2.配置.vue文件模板,以便快速一键生成格式化 2.1新建代码片段 File->Preferences->User S ...

  4. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  5. (英文版)VScode一键生成.vue模板

    1. 安装vscode,官网地址 2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装(Install) 3.新建代码片段 点击Code(代码)-Preferences( ...

  6. 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板

    环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...

  7. vscode写vue模板--代码片段

    Ctrl+Shift+P打开命令输入 snippet (打开用户代码片段) 在输入vue(选择代码片段的语言) 如果搜索不到,安装一个插件 vueHelper 如果搜索到复制粘贴以下代码 { &quo ...

  8. vscode自定义vue模板代码

    File--->preference -->user Snippets-->搜索html.json 编辑 加入以下自定义代码内容 "Html5-Vue": { & ...

  9. 使用vscode快速建立vue模板

    当我们希望每次新建.vue文件后,vscode能够根据配置,自动生成我们想要的内容. 打开vscode编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,我 ...

  10. 在vscode中快速生成vue模板

    点击文件-->首选项-->用户代码片段-->输入vue,此时会打开vue.json文件,将下列代码复制进文件保存即可,新建一个vue文件,输入vue回车即可生成模板,$0表示生成模板 ...

随机推荐

  1. wangeditor富编辑器在node和vue前后台分离的使用

    本来是想用百度的ueditor编辑器来达到想要的功能的,但在使用中,感觉前后台分离上,需要引入的东西过多,不轻量:然后就去尝试用wangeditor(这个名字听着感觉有点太随意的感觉....但功能上还 ...

  2. Uniswap详解之一(概览)

    一.Uniswap简介 Uniswap是以太坊上的DEX实现,基于"恒定乘积自动做市"模型,与传统的中心化和DEX具有很大的差别. 主要特点: 无订单簿,无做市商 兑换币具有很低的 ...

  3. ASE —— 第二次结对作业

    目录 重现基线模型 基线模型原理 模型的优缺点 模型重现结果 提出改进 改进动机 新模型框架 评价合作伙伴 重现基线模型 基线模型原理 我们选用的的模型为DeepCS,接下来我将解释一下它的原理. 我 ...

  4. Image Processing and Analysis_21_Scale Space:Scale-Space for Discrete Signals——1990

    此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...

  5. int类型按字节打印输出

      今天在项目编程中,遇到一个问题,u32类型的参数,要赋值给一个u8 array[3],想用memcpy()函数进行赋值,由于类型大小不一致,一时不知道怎么做,经过查找,得以解决.说明如下;   项 ...

  6. RT-Thread--简介

    RT-Thread 概述 RT-Thread,全称是 Real Time-Thread,它是一个嵌入式实时多线程操作系统,基本属性之一是支持多任务,允许多个任务同时运行,但并不是真正的同时运行,而是宏 ...

  7. 深入理解Kubernetes资源限制:CPU

    写在前面 在上一篇关于Kubernetes资源限制的文章我们讨论了如何通过ResourceRequirements设置Pod中容器内存限制,以及容器运行时是如何利用Linux Cgroups实现这些限 ...

  8. php 生成gif 动图,可控制每张图时间

    <?php //namespace gifCreator; /** * Create an animated GIF from multiple images */ class gifcreat ...

  9. Selenium(九)测试用例数据分离与从文件导入数据

    一.测试用例数据与代码分离 1.从之前的脚本来看,我还是把数据写在了脚本中,这样脚本的通用性很差.全局的数据其实可以从数据库.文本文件.Excel中直接读取. 2.代码和用户数据分离: 3.数据设计- ...

  10. JS 截取地址栏指定字符后的内容

    一.获取地址栏路径 var url = window.location.href; 二.截取指定字符后的内容 /** * 截取指定字符后的内容 * @param url 路径 * @param par ...