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 02 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue3获取当前路由地址
Feb 18 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下关于中英数字混排的字符串分割问题
2010/04/06 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
Javascript - HTML的request类
2006/07/15 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
js实现表格字段排序
2014/02/19 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
Python中的字典与成员运算符初步探究
2015/10/13 Python
使用python实现省市三级菜单效果
2016/01/20 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
python中返回矩阵的行列方法
2018/04/04 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
Python笔记之facade模式
2019/11/20 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
pyqt5中动画的使用详解
2020/04/01 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
七一建党日演讲稿
2014/09/05 职场文书
教师个人发展总结
2015/02/11 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js