使用vscode快速建立vue模板

当我们希望每次新建.vue文件后,vscode能够根据配置,自动生成我们想要的内容。

打开vscode编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,我们输入vue,将代码ctrl+c 到vue-html.json

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<!-- $0 -->",
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data () {",
      "    return {",
      "    };",
      "  },",
      "",
      "  components: {},",
      "",
      "  computed: {},",
      "",
      "  mounted: {},",
      "",
      "  methods: {}",
      "}",
      "",
      "</script>",
      "<style lang=‘scss‘ scoped>",
      "</style>"
  ],
    "description": "Log output to console"
  }
}

保存后关闭这个文件。

稍稍解释一下:$0 表示你希望生成代码后光标的位置 ; prefix 表示生成对应预设代码的命令

例如:我们新建一个名为header.vue的文件,输入内容vue按下enter,就会自动生成内容.

原文地址:https://www.cnblogs.com/xiaoxiao2017/p/11380232.html

时间: 2024-11-13 10:15:20

使用vscode快速建立vue模板的相关文章

在vscode中快速生成vue模板

点击文件-->首选项-->用户代码片段-->输入vue,此时会打开vue.json文件,将下列代码复制进文件保存即可,新建一个vue文件,输入vue回车即可生成模板,$0表示生成模板后,光标所在位置. "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>$0</d

怎么能学好Web前端开发 如何快速掌握Vue框架

怎么能学好Web前端开发?如何快速掌握Vue框架?很多人看好Web前端的市场前景,因此纷纷选择学习入行前端行业?.很多学Web前端的小伙伴在进阶阶段都要学习Vue,因为它是目前企业常用的技术之一.下面给大家分享一个比较不错的Vue学习路线. Vue是一个用于构建Web用户界面的JavaScript框架,因此在开始使用Vue之前,你至少先要掌握JavaScript和Web开发的基础知识.具备一定基础后,你可以了解以下内容: Vue生命周期.在构建你的第一个Vue应用之前,你要了解如何在网页中去安装

如何快速建立一个优化型的网站

现在要建网站一般都是找网络公司,私人工作室,一来是正规的费用高,二来是私人做的又不保险,今天卡卡就来教大家如何快速建立一个属于自己网站. 第一步.注册自己的域名,类似www.528894.com这就是唯一标识. 第二步.网站存储的空间,也就是虚拟主机或是服务器,这个空间的好坏主要是看其服务态度.访问速度.响应时间.出现问题应急的速度等等.所以选一个好的服务器就相当于成功了一半,使用ftp软件来管理空间. 第三步.域名+空间都置办好了,就差程序了,程序怎么办呢,程序没有学过编程或是没有一定功底的朋

eclipse 快速建立PHP调试环境

eclipse 快速建立PHP调试环境 在网上看了许多关于eclipse 建立PHP调试环境的文章,自己去尝试了一翻,但都没有成功,后来自己到Zend的官方去看,原来是版本的问题.现在提供完整的配置步骤.希望初学者能快 速建立好环境,把精力集中到代码而不是配置上.如果您看完还没有配置成功,您还可以点击 视频1 视频2 此处查看FLASH视频. 我的环境如下:Windows-xp+Wamp(Windos Apache Mysql PHP集成安装环境)或者xampp(类似wamp). 1.准备工作

Vue模板内容

前面的话 如果只使用Vue最基础的声明式渲染的功能,则完全可以把Vue当做一个模板引擎来使用.本文将详细介绍Vue模板内容 概述 Vue.js使用了基于HTML的模板语法,允许声明式地将DOM绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML ,所以能被遵循规范的浏览器和HTML解析器解析 在底层的实现上, Vue将模板编译成虚拟DOM渲染函数.结合响应系统,在应用状态改变时, Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上 一般地,模板内容包括文本内容和元素

自己写一个快速开发android模板

自己写一个快速开发android模板 有时候有些代码以前写过,再开发的时候拿来用,就可以节约很多时间,毕竟写过的以前肯定有所了解,再写一次就没必要了,所以这次自己总结出很多应用都需要的一些共性的东西,写到一个模板,以后直接拿来用.首先分析一下: 1.一个应用,首先需要一个欢迎页面,用于展示公司logo啊,或者应用logo,大概展示两三秒. 2.然后就是登陆注册页面,几乎没有应用是没有登陆注册的吧? 3.打印吐司,activity跳转,activity覆盖别的activity,这些基本方法. 4.

一分钟教你快速建立起MySQL/Mariadb 主从状态检测脚本(shell)

脚本主要实现了网络检测和简单的主从状态检测,发现状态异常即发送邮件报警,在手机上安装一个易信可实现实时联动,及时获取服务器状态信息,脚本虽简单却实用. #!/bin/bash ##author:jerry_jiang mail_addr="[email protected]"br/>mail_addr2="[email protected]"ping 192.168.33.19 -c1 >/dev/nullsping1=echo $?ping 192.1

Vue模板语法(一)

Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合. 另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架——它只聚焦于视图层. 因此它非常容易学习,非常容易与其它库或已

[Vue源码]一起来学Vue模板编译原理(一)-Template生成AST

本文我们一起通过学习Vue模板编译原理(一)-Template生成AST来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vue模板编译原理(一)-Template生成AST 一起来学Vue模板编译原理(二)-AST生成Render字符串 一起来学Vue虚拟DOM解析-Virtual Dom实现和Dom-diff算法 这些文章统一放在我的git仓库:https://github.com/yzsunlei/javascrip