在一个Vue的项目中,反复的新建.vue文件是一个必不可少的工序。本着科技让人偷懒的原则,我们可以利用VSCode的snippet在.vue文件创建后能轻松地生成一套模板。

整个过程是轻松加愉快的,只需几步即可。

具体步骤如下

1、选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,输入vue

    选择vue后,编辑器会自动打开一个名字为vue.json的文件

2、复制以下内容到这个文件中: 

{
// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div id=\"app\">$0",
" <HelloWorld msg=\"Welcome\"/>",
" </div>",
"</template>\n",
"<script type=\"text/javascript\">",
"import HelloWorld from './components/HelloWorld.vue'",
"export default {",
" name: \"app\",",
" data() {",
" return {\n",
" }",
" },",
" components: {",
" HelloWorld",
" }",
"}",
"</script>\n",
"<style lang=\"stylus\" scoped>",
"</style>",
"$2"
],
"description": "Log output to console"
}
}

$0 表示生成代码后光标的位置 ;

prefix 表示生成对应预设代码的命令(此处设置的vue)

  保存关闭文件;

3、新建.vue文件,输入vue,按回车,页面结构自动生成


4.最终

 

VSCode新建vue文件自定义模板的更多相关文章

  1. vscode添加vue文件模板

    文件->首选项->用户代码片段->输入vue,打开vue.json 添加模板json "Print to console": { "prefix&quo ...

  2. Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法

    转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...

  3. Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法

    添加新建.vue文件功能 ①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击serch in repositories ②点击安装vue.js ③安装成功后点击右下角 ...

  4. Vscode新建html文件

    在Vscode新建html文件 1.点击Open Folder: 2.选择目标文件夹,新建一个拓展名为html的文件: 3.在第1行输入!(英文状态下),按tab键,新建成功.界面如下图所示:

  5. vscode对Vue文件的html部分格式化失效问题解决办法

    使用vscode编辑vue文件时发现突然格式化代码不会对<template> </template>之间的html生效了,解决办法很简单 文件 --> 首选项 ---&g ...

  6. VScode格式化vue文件

    使用vscode编写vue文件的时候, 发现不能格式化,手动格式化代码,太费劲, 还有可能会出错, 不格式化,有的时候代码编写的时候, 没有很好的管理格式,不美观. 但是我们是可以修改让VScode可 ...

  7. vue --- vscode 配置 .vue文件生成结构

    1.选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,输入vue      选择vue后,编辑器会自动打开一个名字为vue.json的文件 2.复制以下内容到这个文件 ...

  8. 使用vscode,新建.vue文件,tab自动生成vue代码模板

    第一步: 新建模板并保存 文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择vue.json -->复制 第三步中的模板内容中内容保存 第二步: 添加配置,让 ...

  9. 让webstorm支持新建.vue文件

    1. 首先安装vue插件,安装方法: file-->setting  -->  plugin  ,点击plugin,在内容部分的左侧输入框不用输入任何东西,直接点击下图中的按钮. 如下图所 ...

随机推荐

  1. ndk编译curl以及使用

    百度搜ndk curl,大多都是转发的同一篇文章,文章中提供的lcur_config.h,不一定适合你的curl版本. 后来找到http://download.csdn.net/download/cs ...

  2. [转]C++内存管理

    [导语] 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了更好的性能,更大的自由,C++菜鸟的收获则是一遍一遍的检查代码和对C++的痛恨,但内存管理在C++中无处不 ...

  3. 编译VTK的MFC库

    原文链接:http://blog.csdn.net/left_la/article/details/7069708 本人做了少量修改! Win7 + VS2010 + CMake2.8.6 + VTK ...

  4. switch 语句来选择要执行的多个代码块之一。

    switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: n 与 case 1 和 case 2 不同时执行的代码 }

  5. Hadoop 技术笔记

    Flume与Kafka Flume 是一个分布式,可靠的,可用的服务,有效的收集,聚合和移动海量的日志数据.它有一个简单而灵活的架构,基于流数据流.具有很好的冗余和容错性,以及可靠性和多故障转移和恢复 ...

  6. [SDOI2016]数字配对(费用流+贪心+trick)

    重点是如何找到可以配对的\(a[i]\)和\(a[j]\). 把\(a[i]\)分解质因数.设\(a[i]\)分解出的质因数的数量为\(cnt[i]\). 设\(a[i]\geq a[j]\) 那么\ ...

  7. ACM成长之路

    前几天在网上看到,转过来时刻督促一下自己. ACM队不是为了一场比赛而存在的,为的是队员的整体提高. 大学期间,ACM队队员必须要学好的课程有: l C/C++两种语言 l 高等数学 l 线性代数 l ...

  8. [ZOJ]3541 Last Puzzle (区间DP)

    ZOJ 3541 题目大意:有n个按钮,第i个按钮在按下ti 时间后回自动弹起,每个开关的位置是di,问什么策略按开关可以使所有的开关同时处于按下状态 Description There is one ...

  9. Spring 使用外部属性文件配置

    1.Spring提供了一个PropertyPlaceholderConfigurer的BeanFactory后置处理器,这个处理器允许用户将Bean的配置的部分内容 移到属性文件中.可以在Bean配置 ...

  10. Django模型Model的定义

    概述 Django对各种数据库提供了很好的支持,Django为这些数据库提供了统一的调用API,可以根据不同的业务需求选择不同的数据库. 模型.属性.表.字段间的关系 一个模型类在数据库中对应一张表, ...