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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 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实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
javascript+mapbar实现地图定位
2010/04/09 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
python实现简单多人聊天室
2018/12/11 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
什么是会话Bean
2015/05/14 面试题
校园之星获奖感言
2014/01/29 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
高中军训感言800字
2014/03/05 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL