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


相关推荐

  • JAVA的使用_Java集成开发环境

    JAVA的使用_Java集成开发环境IDE是集成开发环境:IntegratedDevelopmentEnvironment的缩写。使用IDE的好处在于按,可以把编写代码、组织项目、编译、运行、调试等放到一个环境中运行,能极大地提高

    2022年8月4日
    4
  • TCP/IP三次握手与四次挥手学习笔记(二)

    TCP/IP三次握手与四次挥手学习笔记(二)

    2022年2月14日
    144
  • 基于51单片机的流水灯设计

    基于51单片机的流水灯设计三个按键:A按键启动、B按键控制不同流水速度(低中高)、C按键设计思路一(未用中断):8个LED灯正极解电源,负极接单片机I/O口。死循环:设置P2口为11111110,使用左移函数,循环七次。同时每次位移中间加入延时函数。三个按键:A按键启动、B按键控制不同流水速度(低中高)、C按键控制流水灯暂停蜂鸣器长响:思路一:设置一个变量i,起初为0,按下A键后为1;当i为1进入死循环设置变…

    2022年5月3日
    135
  • 向量函数的内积_向量的内积运算

    向量函数的内积_向量的内积运算这是我的第一篇博客,谈谈自己在读研中的一些小思考,希望能给大家的学习带来一点启发。对于函数内积,我想很多理工科的都理解,最常用的就是傅里叶变换,一个信号与很多个频率的基函数相乘,也就是信号与每个基函数做内积,求得在每个基函数上的占比,或者说是在该基函数上的投影大小,遍历全部基函数,就求得在全部基函数的占比。![在这里插入图片描述](https://img-blog.csdnimg.cn/202…

    2022年9月1日
    5
  • IDC评述网:12月下旬国内域名解析服务商Top10

    IDC评述网:12月下旬国内域名解析服务商Top10

    2021年8月27日
    75
  • NFV介绍_NFV技术

    NFV介绍_NFV技术转发自:https://zhuanlan.zhihu.com/p/26259440NFV全称是NetworkFunctionVirtualization。这又是一个与网络相关的故事。先来看看NFV的前世今生吧。在NFV之前,NF(NetworkFunction)是一直存在的,网络中,NF可以看成一个个独立的网元,实现着各自的功能。NF以固定的方式连接起来,统一提供的网络功能和服务。随便在网…

    2025年10月16日
    4

发表回复

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

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