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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 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
php4的session功能评述(一)
2006/10/09 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
Python设计模式之代理模式实例
2014/04/26 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python实现用户答题功能
2018/01/17 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python自动生成model文件过程详解
2019/11/02 Python
python线性插值解析
2020/07/05 Python
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
分布式数据库需要考虑哪些问题
2013/12/08 面试题
两年的个人工作自我评价
2014/01/10 职场文书
关于逃课的检讨书
2014/01/23 职场文书
学校后勤岗位职责
2014/02/19 职场文书
保险专业大学生职业规划书
2014/03/03 职场文书
课例研修方案
2014/05/31 职场文书
2015新学期家长寄语
2015/02/26 职场文书
工作自我评价范文
2015/03/05 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA