VScode中Vue快速生成代码片段

素颜马尾好姑娘i 2022-04-18 00:46 644阅读 0赞

**首先我们要找到设置（如下图）**用户代码片段

![20181106100412594.png][]

**然后我们会看到这样一个框，然后搜索html.json**

![20181106100624602.png][]

如果没设置过就是一些注释掉的东西   可以全部删除复制下面的代码就可以了

{"vue代码": {
    "prefix": "ve",
    "body": [
    "<!DOCTYPE html>",
    "",
    "<html lang='en'>",
    "<head>",
        "\t<meta charset=\"UTF-8\">",
        "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
        "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
        "\t<title>Document</title>",
        "\t<script src=\"../node_modules/vue/dist/vue.min.js\"></script>",
    	"</head>",
    	"",
    	"<body>",
        "\t<div class=\"container\">",
    
    	"\t</div>",
    
    
        "\t<script>",
    	" \t\tvar vue = new Vue({",
    		"\t\t\tel : '.container',",     
    		"\t\t\tdata : {  }," ,         
    		"\t\t\tmethods : { }    "  ,   
            "\t\t});",
    		"\t</script>",
    		"</body>",
    		"",
    		"</html>"
    	]
    	}
    }

注意 ： 这里的vue的引用用的是我的地址，你们的路径按照自己的文件位置引用

**单页面请用下面的代码片段**

注意：找到第一步操作，搜索vue.json 复制下面代码

{
        "Print to console": {
            "prefix": "cvue",
            "body": [
                "<style lang='$2' scoped>",
                "",
                "",
                "</style>",
                "",
                "<template>",
                "    <div>",
                "       $3",
                "    </div>",
                "</template>",
                "",
                "<script>",
                "   export default {",
                "      data() {",
                "          return {",
                "",
                "          }",
                "      },",
                "      methods: {",
                "",
                "",
                "      },",
                "      //生命周期 - 创建完成",
                "     created(){ ",
                "       ",
                "     },",
                "",
                "     //DOM挂载完毕",
                "     mounted() {",
                "",
                "     }",
                " }",
                "</script>"
            ]
        }
    }

单页面中的$1 $2 表示创建光标的位置，可按Tab切换位置，prefix的名字可随意更改

在页面输入**ve** （名字可以自定义）敲击回车就可以看到已经创建好了的代码结构

<!DOCTYPE html>
    <html lang='en'>
    
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=edge'>
        <titledocument</title>
        <script src='../node_modules/vue/dist/vue.min.js'></script>
    </head>
    
    <body>
        <div class='container'>
        </div>
        <script>
            var vue = new Vue({
                el: '.container',
                data: {},
                methods: {}
            });
        </script>
    </body>
    
    </html>

以上就是快速生成vue结构的代码块段

想看更多点击[我的博客][Link 1]

[推荐：npm全局安装和本地安装及卸载][npm]

[20181106100412594.png]: /images/20220418/71f1936260314b089da732c66b388b3b.png
[20181106100624602.png]: /images/20220418/49d1e4834333436ba034399cb3663924.png
[Link 1]: https://blog.csdn.net/qq_40428678
[npm]: https://blog.csdn.net/qq_40428678/article/details/83449843