vscode自定义vue模板的实现

2022-04-15 0 642

用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模板内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript vscode自定义vue模板的实现 https://www.niceym.com/31176.html