vs code 新建程式碼片段路由基礎程式碼

當學習vue 的每個知識點時，需要每次都建立一個新的vue基礎程式碼，然後使用vscode 的程式碼片段，就不用每次複製程式碼了 肥腸的方便

開啟vscode
點選選單code =》首選項 =》使用者程式碼片段
選擇新建全域性程式碼片段,將下面程式碼複製進去，儲存，關閉

以後新建html檔案後，輸入vr 敲tab鍵即可貼上出程式碼
* 預設引入了bootstrap


{
"路由基礎程式碼": {
    "prefix": "vr", // 觸發的關鍵字 輸入vr按下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\"></script>",
        "    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u\" crossorigin=\"anonymous\">",
        "    <script src=\"https://unpkg.com/vue-router/dist/vue-router.js\"></script>",
        "</head>",
        "<body>",
        "    <div id=\"app\"><router-view></router-view></div>",
        "    <script>",
        "let login = {template:'<h1>login</h1>'}",
        "let register = {template:'<h1>register</h1>'}",
        "const router = new VueRouter({routes:[{path:'/login',component:login},{path:'/register',component:register}]})",
        "        var vm=new Vue({",
        "           el:'#app',",
        "           data:{},",
        "           methods:{},",
        "           router",
        "        });",
        "    Vue.config.devtools = true",
        "    </script>",
        "</body>",
        "</html>",
    ],
    "description": "路由基礎程式碼"
}

}

本作品採用《CC 協議》，轉載必須註明作者和本文連結

日照香爐生紫煙

vs code 新建程式碼片段 路由基礎程式碼

相關文章

vs code 新建程式碼片段路由基礎程式碼