编辑自己的代码片段

  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. Linux命令——shutdown、halt、poweroff、reboot、cal、date

    shutdown shutdown在关机的时候会通知所有用户 shutdown –r now 现在重启 shutdown now 现在关机 shutdown +5 过5分钟关机 shutdown –c ...

  2. Linux学习笔记(十五)用户和用户组

    一.四个配置文件 解释: (1)当组内仅有一个用户且用户名和组名相同时,[组中用户列表]可省略不写 (2)root用户组的组号为0 (3)组号1-499位系统预留组号,是预留给安装在系统中的软件或服务 ...

  3. Linux学习笔记(十二)VIM编辑器

    一.概述 VI Visual interface 可视化接口,类似于Windows中的记事本 VI->VIM 操作模式: (1)Command mode 命令模式 (2)Insert mode ...

  4. Linux学习之六-Linux系统的基础优化

    Linux系统的基础优化 何谓'优化'.顾名思义,优化就是采取某些措施使某个东西或者某事物变得更加优异,出色.对于Linux而言,在初期安装好系统之后,也需要对其进行一定的基础优化,可分为安全上的优化 ...

  5. Vue 循环 [Vue warn]: Avoid using non-primitive value as key

    页面中不添加  :key 索引的时候,会不停的提示虚线,但不影响使用 后来加了一个索引,加成了:key= "content" 从后台取出来的contents是一个list,里面有多 ...

  6. less避免编译

    less里面有一个避免编译,有时候我们需要输出一些不正确的css语法或者使用less不认识的专有语法.要输出这样的值我们可以在字符串前加上一个~ /*避免编译*/ .test_03{ width: 3 ...

  7. Java基础 反射的基础应用和Class笔记

    笔记: /**直接 throws Exception,完美包含全部异常! * --------------------------- * Class: * 首先创建一个类, 接着编译程序: javac ...

  8. linux实操_进程管理

    1.显示系统执行的进程 说明:查看进程使用的的指令时 ps ,一般来说使用的参数时ps -aux ps -a:显示当前终端的所有进程信息 ps -u:以用户的格式显示进程星系 ps -x:显示后台进程 ...

  9. js重写页面之后后台如何获取重写后的控件值

    需求描述:专业分流系统中,学生在选择志愿时,我想实现在页面按照点击相应专业的顺序来设置选专业的志愿,如首先点击“工商”,则工商专业为第一志愿,接着点击“营销”,则营销专业为第二志愿,以此类推.从而达到 ...

  10. hbase实践之flush and compaction

    本文主要涉及flush流程,探讨flush流程过程中引入的问题并阐述2种解决策略,最后简要说明Flush执行策略. 对于Compaction,本文主要探讨Compaction要解决的本质问题以及由Co ...