首先:打开vs code 界面左下角如下图所示

选中打开齿轮选择用户代码片段

第一次搜索vue.json文件可能显示的是vue,或者没有,你可以先在vs code中下载Vetur插件先

打开vue.json后,默认是如下图

要快速生成vue模板,需要在其中编辑加入下列代码:

"Vue": {
"prefix": "vue",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>",
"<script>",
"export default {",
" data() {",
" return {",
" }",
" },",
" created(){",
" },",
" computed:{",
" },",
" methods:{",
" },",
"}",
"</script>",
"<style>\n",
"</style>",
"$2"
]
}

  保存即可

vscode中快速生成vue模板的更多相关文章

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

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

  2. vscode之快速生成vue模板

    文件-首选项-用户代码片段-搜索“vue”点击进入vue.json 复制这个片段 { "Vue component": { "prefix": "vu ...

  3. vs code 快速生成vue 模板

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

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

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

  5. VSCode 自定义Vue snippets, 快速生成Vue模板

    命令行 Ctrl+Shift+P # 选择 Configure User Snippets # 选择 Vue.json 原始的Vue.json { // Place your snippets for ...

  6. 关于vs code 快速生成vue 模板

    在 文件>首选项>用户代码片断里面,打开vue.json 添加以下代码: "Print to console": { "prefix": " ...

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

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

  8. VSCode 快速生成 .vue 模版

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

  9. (英文版)VScode一键生成.vue模板

    1. 安装vscode,官网地址 2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装(Install) 3.新建代码片段 点击Code(代码)-Preferences( ...

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

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

随机推荐

  1. DecimalFormat--控制输出格式

    DecimalFormat的相关应用 整数的实现: 小数的实现: 科学计数法: 分组分隔符: 举个例子吧!-- 关于前缀后缀: 本地化货币符号: 引用特殊的字符,作为前缀或者后缀: 实例来袭! 1.0 ...

  2. Nacos与OpenFeign开发

    目录 1.前言 2.生产者 3.消费者 4.扩展 1.前言 我的话是微服务B调用微服务A的controller层 2.生产者 微服务A请求接口如下: @GetMapping("/listUn ...

  3. ASP.NET Core Web API Swagger 按标签Tags分组排序显示

    需求 swagger页面按标签Tags分组显示. 没有打标签Tags的接口,默认归到"未分组". 分组内按接口路径排序 说明 为什么没有使用GroupName对接口进行分组? 暂时 ...

  4. 推荐一个前后端分离.NetCore+Angular快速开发框架

    今天给大家推荐一个开源项目,基于.NetCore开发的.前后端分离.前端有Vue.Angular.MVC多个版本的快速开发框架. 项目简介 这是一个基于.NetCore开发的快速开发框架,项目采用模块 ...

  5. C++温故补缺(十九):atomic类

    atomic 参考:c++11 多线程(3)atomic 总结 - 简书.c++11 atomic Npgw的博客.C++11 并发指南系列 - Haippy - 博客园. atomic_flag a ...

  6. MyBatisPlus 实战字典

    MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具包,只做增强不做改变,为简化开发工作.提高生产效率而生. 一.Service CRUD 接口 [说明]:[1]通用 Servic ...

  7. axios和后端交互时,参数需要写在body和query中同时写

    axios.post('/api/xxx',{ // post body },{ params: { // query } }) demo: let params = { _id:this.alarm ...

  8. Notion AI : 让表达如此简单

    前言 写作如说话,想说与说明白中间隔着沟壑! 下面用 Notion AI 作诗来作为本文开头吧. 想说与说明白(作者:Notion AI) 想说千言万语,说明白却难如登天. 言语之间,沟壑重重,思想与 ...

  9. Rancher(V2.6.3)安装K8s教程

    Rancher(V2.6.3)安装K8s教程 一,安装前环境准备: 1,升级Linux服务器内核 Ubuntu20.04: #查看当前内核版本 uname -rs #查看软件库中可下载的内核 sudo ...

  10. 数据挖掘关联分析—R实现

    关联分析 关联分析又称关联挖掘,就是在交易数据.关系数据或其他信息载体中,查找存在于项目集合或对象集合之间的频繁模式.关联.相关性或因果结构.或者说,关联分析是发现交易数据库中不同商品(项)之间的联系 ...