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 19 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue 自定义组件添加原生事件
Apr 21 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 生成饼图 三维饼图
2009/09/28 PHP
php取得字符串首字母的方法
2015/03/25 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
JS实现横向轮播图(初级版)
2020/06/24 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
如何教少儿学习Python编程
2020/07/10 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
会计毕业自我鉴定
2014/02/05 职场文书
幼儿教师培训感言
2014/03/08 职场文书
群众路线党课主持词
2014/04/01 职场文书
社会实践的活动方案
2014/08/22 职场文书
抗洪救灾标语
2014/10/08 职场文书
酒店服务员岗位职责
2015/02/09 职场文书