写点什么

前端开发:VS Code 编辑器新建 Vue 文件自定义模板的方法

作者:三掌柜
  • 2021 年 11 月 20 日
  • 本文字数:683 字

    阅读完需:约 2 分钟

前端开发:VS Code编辑器新建Vue文件自定义模板的方法

前言

在前端开发过程中,尤其是对于经验不足的初级开发者来说,需要掌握一些必备的提升开发速度的技巧,比如使用各种插件来提升开发速度,这样才能事半功倍。


本篇博文来分享一个开发常用的技巧,资深开发者不屑于知道的技巧,但是对于不知道的开发者来说还是非常重要的一个技巧,不卖关子了,接下来分享一个关于 VS Code 编辑器进行前端开发的时候,新建空白的 Vue 文件之后,在里面创建自定义模板的方法,这样可以节省开发效率,也可以省去不必要的复制粘贴操作。尤其是在 Vue 开发过程中,不断新建.Vue 文件是少不了的操作,但是每次新建的.Vue 文件都是没有任何代码的空文件,开发者不可能每次都要在新建的空文件里面一点一点写文件结构吧,这就用到 VS Code 编辑器的自带插件,该插件可以在新建的.Vue 文件里面通过一步就可以创建生成一套模板,根据需要选择模板类型。


操作步骤

具体操作如下所示:

1、首先打开项目新建的空.Vue 文件;


2、然后鼠标点进文件中,输入:vue ,然后选择模板类型之后,直接回车,即可自动生成页面结构模板。


上面操作仅需一步,就可以完美实现空.Vue 文件的自定义模板创建。


示例

示例模板如下所示:

<template>
</template>
 
<script>
export default {
}
</script>
 
<style>
</style>
复制代码



最后

通过本文对 VS Code 编辑器新建 Vue 文件自定义模板的讲解,可以在新创建的 Vue 文件中快速创建模板,提高开发效率,尤其是新入行前端不久的开发者不用再新建一个 Vue 文件之后就去复制别的文件来作为模板,这里只需记住操作步骤即可,不再赘述。

 

以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿 by 三掌柜”,三掌柜的新浪微博“三掌柜 666”,欢迎关注!

发布于: 3 小时前阅读数: 6
用户头像

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

评论 (1 条评论)

发布
用户头像
11月日更第十七天
3 小时前
回复
没有更多了
前端开发:VS Code编辑器新建Vue文件自定义模板的方法