专栏首页小蔚记录vue --- vscode 配置 .vue文件生成结构

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

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

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

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

{
    "Print to console": {
        "prefix": "vue",  //写成自己满意的前缀(name)
        "body": [
            "<template>",
            "  <div>$0</div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "",
            "}",
            "",
            "</script>",
            "<style>",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

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

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

保存关闭文件;

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue -- config.js 配置跨域文件

    1、在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的。

    小蔚
  • vue-cli 搭建

    安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和...

    小蔚
  • vue --- 关于多个router-view视图组件,渲染同一页面

    总结说明:   1.以前可以一次性放一个坑对应一个路由和显示一个组件    a. 一次行为 = 一个坑 + 一个路由 + 一个组件    b. 一次...

    小蔚
  • vue-cli 工程目录结构详介绍

    前端迷
  • 收集

    http://blog.csdn.net/fungleo/article/details/77584701

    onety码生
  • vue-cli 3.x安装及ant-design-vue初使用

    此时浏览器会访问 http://localhost:8080/ ,看到 Welcome to Your Vue.js App 的界面就算成功了。

    流眸
  • 学点vue.js的东西,什么都得学点,面试时说不定对方会问什么

    说vue呢也是关注视图层的框架,它嫌react太绕了,redux太麻烦了,然后就说自己很简单,说自己还有双向绑定,好的很,不是小好,是大好。那我今天就写点vue...

    web前端教室
  • 在Vue的webpack中结合runder函数

    npm i vue-loader vue-template-compiler -D

    Dream城堡
  • 阿里 RPC 框架 DUBBO 初体验

    最近研究了一下阿里开源的分布式RPC框架dubbo,楼主写了一个 demo,体验了一下dubbo的功能。

    haifeiWu
  • 写个 vue-loading-template 组件

    源码(star ? start : start):github.com/jkchao/vue-…

    三毛

扫码关注云+社区

领取腾讯云代金券