vscode设置vue模板_vscode怎么创建vue项目

vscode设置vue模板_vscode怎么创建vue项目VSCode配置Vue模板代码前端行业使用的编辑器有很多,比如VSCode和webStorm,其中在创建vue文件后webStorm可以自动生成相关的代码,而在VSCode中得一个一个的敲,这样既浪费时间又效率低,因此,在VSCode中可以一键生成vue模板吗?当然可以,过程如下:1、打开VSCode编辑器2、左上角文件(F)=>首选项=>用户片段3、在出现的框中输入vue之后按回车键4、在出现的vue.json文件内写入以下代码

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

今天偶然间被朋友问到 : 你的 VSCode 配置代码片段了没有 ?

我 ? 啥代码片段 ? 是 Vue 的快捷模板代码么 ?

因为公司是内网开发环境 , 许多 VSCode 好用的插件下不了 , 

所以就得自己进行一下配置了 , 当然这个问题下载几个插件也可解决:

  • Vetur

vscode设置vue模板_vscode怎么创建vue项目

  • Vue 3 Snippets

vscode设置vue模板_vscode怎么创建vue项目

  • Vue VSCode Snippets

vscode设置vue模板_vscode怎么创建vue项目


OK , 那既然这样的话 , 有需求 , 咱们就开整 :

前端行业使用的编辑器有很多,比如 VSCode 和 webStorm ,其中在创建 vue 文件后webStorm 可以自动生成相关的代码,而在 VSCode 中得一个一个的敲,这样既浪费时间又效率低 ,因此,在 VSCode 中可以一键生成 vue 模板吗 ?当然可以,过程如下:

1、打开 VSCode 编辑器

2、左上角 文件(F)  =>  首选项  =>  用户片段

3、在出现的框中输入 vue 之后按回车键

4、在出现的 vue.json 文件内写入以下代码

vscode设置vue模板_vscode怎么创建vue项目

{
  "vb": {
    "prefix": "vb",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '',",
      "  data() {",
      "    return {",
      "    };",
      "  },",
      "  computed:{",
      "  },",
      "  watch:{",
      "  },",
      "  methods: {},",
      "};",
      "</script>",
      "",
      "<style scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "vb components"
  }
}

复制上面的代码,在相应的 vue 文件中输入 vb 之后回车,就会生成 vue 模板

效果如下图所示:

在这里插入图片描述

好啦,vue 模板就生成了,是不是很简单呢 ✌️ ✌️ ✌️ 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/196516.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • mos管开关工作原理图解_双光耦开关电源电路图

    mos管开关工作原理图解_双光耦开关电源电路图在使用MOS管设计开关电源或者马达驱动电路的时候,大部分人都会考虑MOS的导通电阻,最大电压等,最大电流等,也有很多人仅仅考虑这些因素。这样的电路也许是可以工作的,但并不是优秀的,作为正式的产品设计也是不允许的。下面是我对MOSFET及MOSFET驱动电路基础的一点总结,其中参考了一些资料,非全部原创。包括MOS管的介绍,特性,驱动以及应用电路。1、MOS管种类和结构MOSFET管是FET的…

    2022年9月20日
    0
  • mysql的乐观锁使用_java悲观锁乐观锁定义

    mysql的乐观锁使用_java悲观锁乐观锁定义正确的理解MySQL的乐观锁,悲观锁与MVCC!首先声明,MySQL的测试环境是5.7前提概念数据库并发的三种场景乐观锁和悲观锁的澄清悲观锁乐观锁MVCC多版本并发控制总结乐观锁和悲观锁的抉择OCC,PCC,MVCC参考资料前提概念数据库并发的三种场景数据库并发场景有三种,分别为:读-读:不存在任何问题,也不需要并发控制读-写:有隔离性问题,…

    2022年8月30日
    1
  • Python中线程同步与线程锁「建议收藏」

    Python中线程同步与线程锁「建议收藏」文章目录Python中线程同步与线程锁线程同步threading.Event对象threading.Timer定时器,延迟执行threading.Lock锁可重入锁RLockCondition条件锁,等待通知therading.Semaphore信号量threading.BoundedSemaphore有界信号量Python中线程同步与线程锁线程同步概念*线程同步,线程间协同,通过某种技…

    2022年6月21日
    27
  • 如何免费申请博客 用WordPress建设网站

    如何免费申请博客 用WordPress建设网站如何用WordPress搭建博客  10年前左右开始兴起第一波互联网浪潮,博客作为一种新型的社交和阅读方式进入人们的视野,那一段时期是博客的黄金时代。现在,人们说“博客已死”。因为大概在7、8年前第二波互联网浪潮突然出现,且来势汹汹——移动互联网的时代到来了。人们被各种新型的社交媒体所吸引,单单手机APP就使人们忙的目不暇接。人们的选择越来越多,于是碎片化的娱乐逐渐成为人们社交休闲方式。人们不…

    2022年7月21日
    15
  • Matlab基本函数 length函数

    Matlab基本函数 length函数分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1、length函数:

    2022年6月9日
    67
  • JSF之经常使用注解

    JSF之经常使用注解

    2022年1月22日
    44

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号