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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 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
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
php use和include区别总结
2019/10/13 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
详解node和ES6的模块导出与导入
2020/02/19 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
详解Python中break语句的用法
2015/05/14 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
用Python shell简化开发
2018/08/08 Python
django Admin文档生成器使用详解
2019/07/22 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
init进程的作用
2015/08/20 面试题
犯错检讨书
2014/02/21 职场文书
搞笑创意广告语
2014/03/17 职场文书
欢迎领导检查标语
2014/06/27 职场文书
大学生在校表现评语
2014/12/31 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
八年级作文之感恩
2019/11/22 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server