vs code 新建程式碼片段 vue 基礎程式碼

September發表於2019-08-14
Vue

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

  1. 開啟vscode
  2. 點選選單code =》 首選項 =》使用者程式碼片段
  3. 選擇 html.json,將下面程式碼複製進去，儲存，關閉
  4. 以後新建html檔案後，輸入vh 敲tab鍵即可貼上出程式碼
    * 預設引入了bootstrap 
    
{
"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\"></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\">",
        "</head>",
        "<body>",
        "    <div id=\"app\"></div>",
        "    <script>",
        "        var vm=new Vue({",
        "           el:'#app',",
        "           data:{},",
        "           methods:{}",
        "        });",
        "    Vue.config.devtools = true",
        "    </script>",
        "</body>",
        "</html>",
    ],
    "description": "vh components"
}

}

本作品採用《CC 協議》，轉載必須註明作者和本文連結
日照香爐生紫煙

相關文章