vscode自定义vue模板的实现


Posted in Vue.js onJanuary 27, 2021

用vscode编辑器创建vue模板,再也不用每次新建vue文件的时候都去一遍遍的重复敲某些代码片段。输入 vue 再按回车键,即可生成自定义的vue文件内容,相当的好使,开发效率蹭蹭的上去了。

打开vscode,选择文件 > 首选项 > 用户片段。随后在出现的输入框内输入vue,按回车键。打开了一个叫vue.json的文件。如图:

vscode自定义vue模板的实现

图片内容已经是添加了相应的模板内容了,解释下,prefix字段表示的是自定义指令,就是我们在vue文件里面输入的vue标签,按回车即可生成自定义的文件内容;body里面就是我们自定义的内容了。\t是制表符,我这里主要是做格式化代码用

创建完vue模板后,就可以通过vue来创建文件啦!如下图:

vscode自定义vue模板的实现

代码内容:

"Print to console": {
 "prefix": "vue",
 "body": [
 "<!-- $0 -->",
 "<template>",
  "\t<div>",
  "",
  "\t</div>",
 "</template>",
 "",
 "<script>",
 "export default {",
    "\tname: '',",
 "\tcomponents: {},",
 "\tdata () {",
 "\treturn {",
 "\t}",
 "\t},",
 "\tmounted () {},",
 "\tmethods: {}",
 "}",
 "</script>",
 "<style scoped='scss' scoped>",
 "</style>"
 ],
 "description": "vue output to vue-template"
  }

此时有没发现vue模板是把开发的利器,好使好使!!!!!

到此这篇关于vscode自定义vue模板的实现的文章就介绍到这了,更多相关vscode自定义vue模板内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 #Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 #Vue.js
vue实现轮播图帧率播放
Jan 26 #Vue.js
vue 组件基础知识总结
Jan 26 #Vue.js
深入了解Vue动态组件和异步组件
Jan 26 #Vue.js
如何在 Vue 表单中处理图片
Jan 26 #Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 #Vue.js
You might like
php 删除cookie和浏览器重定向
2009/03/16 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
Bootstrap被封装的弹层
2016/07/20 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python优先队列实现方法示例
2017/09/21 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
大专应届生个人的自我评价
2013/11/21 职场文书
上班上网检讨书
2014/01/29 职场文书
《雪儿》教学反思
2014/04/17 职场文书
讲党性心得体会
2014/09/03 职场文书
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技