1. 安装vscode,官网地址

2.安装一个插件,识别vue文件

插件库中搜索Vetur,下图中的第一个,点击安装(Install)

3.新建代码片段

点击Code(代码)-Preferences(首选项)-User Snippers(用户代码片段)

4. 搜索框中输入:vue.json.

  • 如果可以搜到vue.json,请把下列代码粘贴进该文件中。
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>\n",
"<script>",
" export default {",
" data () {",
" return {\n",
" }",
" },",
" components: {\n",
" }",
" }",
"</script>\n",
"<style>\n",
" ",
"</style>",
"$2"
],
"description": "Log output to console"
}
}
  • 如果搜索不到vue.json文件,请新建文件,命名为vue.json。

    以我的为例,原本是没有vue.json文件的,点击vue-html.json文件,把下列代码粘贴进该文件中

{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>\n",
"<script>",
" export default {",
" data () {",
" return {\n",
" }",
" },",
" components: {\n",
" }",
" }",
"</script>\n",
"<style>\n",
" ",
"</style>",
"$2"
],
"description": "Log output to console"å
}
}

    输入快捷键:ctrl+shift+s(另存为),取名vue.json

5. 上面代码中的 "prefix": "vue", 就是快捷键;保存好之后,新建.vue结尾的文件试试

输入vue,按tab键,即可一键生成vue模板。


												

(英文版)VScode一键生成.vue模板的更多相关文章

  1. 【vsCode】识别.vue/一键生成.vue模板文件

    1.安装插件Vetur 结果 ---> .vue代码识别彩标 2.配置.vue文件模板,以便快速一键生成格式化 2.1新建代码片段 File->Preferences->User S ...

  2. VSCode 初次写vue项目并一键生成.vue模版

    VSCode 写vue项目一键生成.vue模版 1.新建代码片段 文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定 2.配置快捷生成的vue模板 ...

  3. VSCode 快速生成.vue基本模板、发送http请求模板

    安装vscode 官网:https://code.visualstudio.com/ 安装 Vetur 插件,识别 vue 文件 插件库中搜索Vetur,点击安装,安装完成之后点击重新加载 新建代码片 ...

  4. VSCode 快速生成 .vue 模版

    VSCode 快速生成 .vue 模版 安装vscode 官网:https://code.visualstudio.com/ 安装 Vetur 插件,识别 vue 文件 插件库中搜索Vetur,点击安 ...

  5. vs code 快速生成vue 模板

    vs code 快速生成vue 模板 1.使用快捷Ctrl + Shift + P唤出控制台,然后输入snippets并选择.(或 文件>首选项>用户代码片断里面,输入 vue.json ...

  6. vsc 自定义快速生成vue模板

    1.安装vscode 官网地址:https://code.visualstudio.com/ 2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装,安装完成之后点击重新加 ...

  7. vscode快速生成html模板(vscode快捷键"!"生成html模板)

    问题: 在vscode中新建test.html, 内容是空白的,输入"!",然后按tap键 ,没有生成常见的html模板,也就是如下: 输入! html html:5 DOCTYP ...

  8. [小tips]使用vscode,根据vue模板文件生成代码

    本着苍蝇虽小也是肉的精神...... 目标: 我们希望每次新建.vue文件后,VSCODE能够根据配置,自动生成我们想要的内容. 方法: 打开VSCODE编辑器,依次选择"文件 -> ...

  9. 在vscode中快速生成vue模板

    点击文件-->首选项-->用户代码片段-->输入vue,此时会打开vue.json文件,将下列代码复制进文件保存即可,新建一个vue文件,输入vue回车即可生成模板,$0表示生成模板 ...

随机推荐

  1. 17.3 删除没用的project

    1.删除某一个或多个无用的project(历史project) 用十六进制编辑器打开"C:\Users\Baymax\Documents\Source Insight 4.0\Project ...

  2. Android嵌套滑动不流畅记录随笔

    ---恢复内容开始--- 今天第一次用到ScrollView嵌套RecyclerView来做页面. 刚开始效果开心得很,非常Very漂亮噢! 纳尼!!!沃特Fuck!出事儿,出事儿! 滑动为何如此不流 ...

  3. OSPF Sham-Link配置示例

    在MPLS/VPN环境中,如果PE-CE之间使用OSPF交换路由信息,OSPF route将作为VPNv4 route(携带OSPF domain ID,OSPF Router ID,OSPF Rou ...

  4. MicrosoftRootCertificateAuthority2011.cer 下载

    下载地址:https://files.cnblogs.com/files/hyh123/microsoft-root-certificate-authority.rar 在安装Microsoft .N ...

  5. js通过查看屏幕大小,更改其他css属性

    首先,我们要知道如何得到屏幕的相关数据. <html><head><title>获取当前对象大小以及屏幕分辨率等</title><body> ...

  6. 常用LINQ关键字用法汇总

    背景 传统上,针对数据的查询都以简单的字符串表示,而没有编译时类型检查或 IntelliSense 支持.此外,还需要针对每种数据源学习一种不同的查询语言:SQL 数据库.XML 文档.各种 Web ...

  7. Presto 性能优化点

    1.指定需要返回的字段 [GOOD]: SELECT time,user,host FROM tbl[BAD]: SELECT * FROM tbl 2.合理设置分区字段 当过滤条件作用在分区字段上面 ...

  8. MySQL数据库事务各隔离级别加锁情况--read committed && MVCC

    之前已经转载过几篇相关的文章,此次基于mysql 5.7 版本,从测试和源码角度解释一下RR,RC级别为什么看到的数据不一样 先补充一下基础知识 基本知识 假设对于多版本(MVCC)的基础知识,有所了 ...

  9. 在写WebApi判断用户权限时返回数据和接受支付结果 定义返回数据类型

    using ADT.Core.Encrypt; using System; using System.Collections.Generic; using System.Linq; using Sys ...

  10. Unity Post-Processing的一些分享

    讲些什么? 绝大多数的游戏或多或少都会使用些后处理效果. 早期版本中,Unity在提供的接口有限,优化空间不大,属于放任自流.官方推出了Post-Processing(下文简称PP)并在Github上 ...