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 相关文章推荐
对vue生命周期的深入理解
Dec 03 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue特效之翻牌动画
Apr 20 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
destoon官方标签大全
2014/06/20 PHP
php跨站攻击实例分析
2014/10/28 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
python读取注册表中值的方法
2013/04/08 Python
python删除文件示例分享
2014/01/28 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
假日旅行社实习自我鉴定
2013/09/24 职场文书
专升本自我鉴定
2013/10/10 职场文书
五一劳动节活动记录
2014/03/23 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
小学中队活动总结
2015/05/11 职场文书
2016年清明节寄语
2015/12/04 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
SQL Server中搜索特定的对象
2022/05/25 SQL Server
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python
小程序自定义轮播图圆点组件
2022/06/25 Javascript