编辑自己的代码片段

  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. C++编译 C # 调用方法

    C++编译    C # 调用方法 编译时使用  public ref class ABC {   ... }; 调用时  右键---引用 --- 添加dll引用  即可

  2. 移动端适配flexible.js

    npm install lib-flexible --save npm install px2rem-loader --save-dev

  3. Microsoft Internet Explorer v11 XML External Entity Injection 0day

    [+] Credits: John Page (aka hyp3rlinx) [+] Website: hyp3rlinx.altervista.org[+] Source:  http://hyp3 ...

  4. ARC模式下获取retainCount的方法

    _objc_rootRetainCount(obj)可以获取obj的retainCount,不过不清楚是不是私有api,因此建议调试时使用.

  5. 逐步探究ObjC的Weak技术底层

    前言 之前的文章有说过 Atomic 原子操作的原理,其作为一个特殊的修饰前缀,影响了存取操作. 在属性修饰定义中,还有另一类修饰前缀,他们分别是 strong weak assign copy,这些 ...

  6. 封装promise

    // new 做了什么 //1.创建一个新的空对象 //2.将构造函数中的this指向这个新空对象 //3.执行构造函数中的代码 //4.返回这个对象 //5.这个对象有一个__proto__指向构造 ...

  7. h5 移动端开发自适应 meta name="viewport"的使用总结

    本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度:  设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...

  8. 《浏览器工作原理与实践》 <12>栈空间和堆空间:数据是如何存储的?

    对于前端开发者来说,JavaScript 的内存机制是一个不被经常提及的概念 ,因此很容易被忽视.特别是一些非计算机专业的同学,对内存机制可能没有非常清晰的认识,甚至有些同学根本就不知道 JavaSc ...

  9. MySQL在command line Client下的一些命令

    MySQL在command line Client下的一些命令 通过CMD进入到本地数据库: mysql -h localhost -u -root -p 参数说明: -h 要连接的服务器的主机名或I ...

  10. Django drf:幂等性

    一.什么叫做幂等性 用户对于同一操作发起的一次请求或者多次请求的结果是一致的,不会因为多次点击而产生了副作用.举个最简单的例子,那就是支付,用户购买商品使用约支付,支付扣款成功,但是返回结果的时候网络 ...