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-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 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中将网址转换为超链接的函数
2011/09/02 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
JavaScript入门基础
2015/08/12 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
Three.js基础部分学习
2017/01/08 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
详细介绍Python中的偏函数
2015/04/27 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
jupyter安装小结
2016/03/13 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python使用matplotlib绘制热图
2018/11/07 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
九年级科学教学反思
2014/01/29 职场文书
家长对孩子评语
2014/01/30 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
React配置子路由的实现
2021/06/03 Javascript
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers