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图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
Vue3实现简易音乐播放器组件
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分页思路以及在ZF中的使用
2012/05/30 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
Javascript复制实例详解
2016/01/28 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
Python实现的金山快盘的签到程序
2013/01/17 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
行政监察建议书
2014/05/19 职场文书
就业协议书怎么填
2014/09/15 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
捐款仪式主持词
2015/07/04 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers