vscode自定义vue模板的实现

 更新时间:2021年01月27日 14:16:36   作者:搬砖大力士  
这篇文章主要介绍了vscode自定义vue模板的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

用vscode编辑器创建vue模板,再也不用每次新建vue文件的时候都去一遍遍的重复敲某些代码片段。输入 vue 再按回车键,即可生成自定义的vue文件内容,相当的好使,开发效率蹭蹭的上去了。

打开vscode,选择文件 > 首选项 > 用户片段。随后在出现的输入框内输入vue,按回车键。打开了一个叫vue.json的文件。如图:

图片内容已经是添加了相应的模板内容了,解释下,prefix字段表示的是自定义指令,就是我们在vue文件里面输入的vue标签,按回车即可生成自定义的文件内容;body里面就是我们自定义的内容了。\t是制表符,我这里主要是做格式化代码用

创建完vue模板后,就可以通过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 cli4.x搭建vue项目的过程详解

    使用vue cli4.x搭建vue项目的过程详解

    这篇文章主要介绍了使用vue cli4.x搭建vue项目的过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • Vue.js原理分析之observer模块详解

    Vue.js原理分析之observer模块详解

    这篇文章主要介绍了Vue.js中observer模块的相关资料,文中通过原理分析介绍还是相对的详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-02-02
  • vue 解决路由只变化参数页面组件不更新问题

    vue 解决路由只变化参数页面组件不更新问题

    今天小编就为大家分享一篇vue 解决路由只变化参数页面组件不更新问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue 项目部署到服务器的问题解决方法

    Vue 项目部署到服务器的问题解决方法

    本篇文章主要介绍了Vue 项目部署到服务器的问题解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue实现移动端日历的示例代码

    Vue实现移动端日历的示例代码

    工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告,但是找了好多日历组件都不是很符合需求,只好自己手写一个日历组件,顺便记录一下,希望对大家有所帮助
    2023-04-04
  • VUE3引入html文件并传值方法举例

    VUE3引入html文件并传值方法举例

    这篇文章主要给大家介绍了关于VUE3引入html文件并传值的相关资料,这是最近在项目中遇到了的一个需求,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • 一份超级详细的Vue-cli3.0使用教程【推荐】

    一份超级详细的Vue-cli3.0使用教程【推荐】

    这篇文章主要介绍了一份超级详细的Vue-cli3.0使用教程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • 关于Vue组件库开发详析

    关于Vue组件库开发详析

    这篇文章主要给大家介绍了关于Vue组件库开发的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • Vue通过provide inject实现组件通信

    Vue通过provide inject实现组件通信

    这篇文章主要介绍了Vue通过provide inject实现组件通信,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • python虚拟环境 virtualenv的简单使用

    python虚拟环境 virtualenv的简单使用

    virtualenv是一个创建隔绝的Python环境的工具。这篇文章主要介绍了python虚拟环境 virtualenv的简单使用,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01

最新评论