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 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
Vue深入理解插槽slot的使用
Aug 05 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获取表单中多个同名input元素的值
2014/03/20 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
javascript时间差插件分享
2016/07/18 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
Python Matplotlib库入门指南
2015/05/18 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
python之Socket网络编程详解
2016/09/29 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
中学生检讨书范文
2014/11/03 职场文书
旷工检讨书1000字
2015/01/01 职场文书
离婚协议书范文2015
2015/01/26 职场文书
退休欢送会主持词
2015/07/01 职场文书
环保主题班会教案
2015/08/13 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
关于EntityWrapper的in用法
2022/03/22 Java/Android
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python