zoukankan      html  css  js  c++  java
  • VScode 之快速创建vue模板

    1. 插件库中搜索Vetur安装,识别vue文件
    2. 新建代码片段

    文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定

    1. 在json文件中添加自己的模板字段
    {
        // 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 class="$2">$5</div>",
                "</template>",
                "",
                "<script>",
                "",
                "export default {",
                "    components: {},",
                "    data() {",
                "        return {",
                "",
                "        };",
                "    },",
                "    computed: {},",
                "    watch: {},",
                "    methods: {},",
                "    created() {},",
                "    mounted() {},",
                "    beforeCreate() {},",
                "    beforeMount() {},",
                "    beforeUpdate() {},",
                "    updated() {},",
                "    beforeDestroy() {},",
                "    destroyed() {},",
                "    activated() {},",
                "    }",
                "</script>",
                "<style lang='scss' scoped>",
                "//@import url($3); 引入公共css类",
                "$4",
                "</style>"
            ],
            "description": "Log output to console"
        }
        
    }
    
    1. 上面代码中的 "prefix": "vue", 就是快捷键;保存好之后,新建.vue结尾的文件试试

    输入vue 按键盘的tab就行

  • 相关阅读:
    设计模式--单例模式(Singleton)
    C# 和.Net 特性
    Fiddler 教程
    史铁生遗作:昼信基督夜信佛
    如何实现早日退休理想
    Linux 常用
    Golang 读书
    Python 读书
    RbMQ 简介
    UML 简介
  • 原文地址:https://www.cnblogs.com/xm0328/p/14278186.html
Copyright © 2011-2022 走看看