如何在Visual Studio Code快速创建vue模板

 第一:   进入Visual Studio Code界面，使用快捷键Ctrl+shift+p，输入sni，找到首选项：配置用户代码片段。

 

 

第二 ：点击首选项：配置用户代码片段，并输入html.json,并点击进入

 

 

第三 吧里面默认代码全部去掉  换成以下代码  

{
    "vh": {   //
        "prefix": "vh", // 触发的关键字 输入vh按下tab键
        "body": [
            "<!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\">",
            "    <title>Document</title>",
            "  <script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>", //最新版本vue.js  根据自身需要使用合适的vue.js 
            "</head>",
            "",
            "<body>",
            "    <div id=\"app\"></div>",
            "    <script>",
            "        var vm=new Vue({",
            "           el:'#app',",
            "           data:{},",
            "           methods:{}",
            "        });",
            "    </script>",
            "</body>",
            "",
            "</html>",
        ],
        "description": "vh components"
        }
    }

 

第四 如果有使用其他版本vue.js
ttps://vuejs.bootcss.com/guide/installation.html

第五  Ctrl+s 保存

第六 创建一个新的html页面，输入vh

 

 

 第七 就出来了

 

posted @ 2021-02-25 00:35  脑瓜疼不吃药药  阅读(644)  评论(0)    收藏  举报