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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 网站的类型有哪些(9种管理类型)

    一HttpEntity的类型 1  BasicHttpEntity     代表底层流的基本实体。通常是在http报文中获取的实体。他只有一个空参的构造方法。刚创建时没有内容,长度为负值。需要通过两个方法,把值赋进去。  /** *BasicHttpEntity *@throwsIOException */ public…

    2022年4月18日
    46
  • bigdecimal四舍五入保留整数_bigdecimal保留两位小数显示00

    bigdecimal四舍五入保留整数_bigdecimal保留两位小数显示00测试代码如下:doubledayDiff2=5.06135778;BigDecimalusedM=newBigDecimal(dayDiff2);//保留两位小数且四舍五入usedM=usedM.setScale(2,BigDecimal.ROUND_HALF_UP);测试结果如图:…

    2025年11月30日
    10
  • 腾讯云— LAMP 架构个人实践分享

    腾讯云— LAMP 架构个人实践分享LAMP环境通常指Linux环境下,由Apache+MySQL/MariaDB+PHP以及其它相关组件组成的网站服务器架构。目前以LAMP组成的Web应用程序平台广泛被应用,70%以上的访问流量由LAMP提供,所以我们也认同LAMP是最强大的网站解决方案。关于LAMP的环境部署文档随处可搜,腾讯官网环境部署介绍可参阅:手动搭建LAMP环境:https://cloud.tencent.com/document/product/213/38402镜像部署LAMP环境:https://cl

    2022年10月16日
    4
  • Java视屏教程下载地址——孙鑫讲解

    Java视屏教程下载地址——孙鑫讲解CD1-2        CD3-4CD5-6CD7-8CD9-10JLesson7CD11-12光盘讲解:CD1:Java的一些基本概念,Java的起源、为什么我们要学习Java语言,Java跨平台原理剖析;Java环境变量的配置,初学者常犯的问题,Java语言的基本数据类型和Java的语句。CD2:Java面向对象编程,面向对象编程和面向过程

    2022年5月16日
    43
  • 一个php技术栈后端猿的知识储备大纲

    一个php技术栈后端猿的知识储备大纲

    2021年10月10日
    40
  • TLSF算法分析[通俗易懂]

    TLSF算法分析[通俗易懂]注:本文的大部分内容摘录自论文《TLSF:aNewDynamicMemoryAllocatorforReal-TimeSystems》,可以通过“科学上网”访问如下链接阅读原文:http://www.gii.upv.es/tlsf/files/ecrts04_tlsf.pdf。什么是TLSFTLSF是TwoLevelSegregatedFitmemoryal

    2022年6月30日
    24

发表回复

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

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