[{"_path":"/blog/third-part/heroku","_draft":false,"_partial":false,"_empty":false,"title":"Heroku部署Web Application","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"heroku部署web-application"},"children":[{"type":"text","value":"Heroku部署Web Application"}]},{"type":"element","tag":"h2","props":{"id":"佈署node-application到heroku"},"children":[{"type":"text","value":"佈署node application到Heroku"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"step1 先在個人總覽頁新增app項目"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://id.heroku.com/login","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"登入 heroku "}]},{"type":"text","value":"\n先前建立的Heroku帳密"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"假設我使用的app項目名稱是:jason-node"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"step2 佈署設定"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"server佈署時預設是執行 npm start 所對應的腳本。所以在package.json需要有對應的在專案的啟動指令"}]}]},{"type":"element","tag":"code","props":{"code":"//package.json\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n    \"start\": \"node appHeroku.js \" // appHeroku.js 作為應用的進入點\n  }\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//package.json\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n    \"start\": \"node appHeroku.js \" // appHeroku.js 作為應用的進入點\n  }\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"使用heroku指令"},"children":[{"type":"text","value":"使用heroku指令"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"要先下載heroku在本機後安裝 "},{"type":"element","tag":"a","props":{"href":"https://devcenter.heroku.com/articles/heroku-cli","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"heroku-cli"}]}]},{"type":"element","tag":"code","props":{"code":"#本機登入\nheroku login \n\n#把專案跟heroku的app server名稱綁定\nheroku git:remote -a ${heroku-app-name} #jason-node  \n\n#佈署\ngit push heroku ${分支名稱} #main  \n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#本機登入\nheroku login \n\n#把專案跟heroku的app server名稱綁定\nheroku git:remote -a ${heroku-app-name} #jason-node  \n\n#佈署\ngit push heroku ${分支名稱} #main  \n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://line-bot-doope.herokuapp.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"佈署上線結果 Heroku jason-node"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"參考資源\n"},{"type":"element","tag":"a","props":{"href":"https://medium.com/enjoy-life-enjoy-coding/heroku-%E6%90%AD%E9%85%8D-git-%E5%9C%A8-heroku-%E4%B8%8A%E9%83%A8%E7%BD%B2%E7%B6%B2%E7%AB%99%E7%9A%84%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E5%AD%B8-bf4fd6f998b8","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"神Q超人 heroku佈署基礎教學"}]}]}]},"tags":"技術","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"heroku部署web-application"},"children":[{"type":"text","value":"Heroku部署Web Application"}]},{"type":"element","tag":"h2","props":{"id":"佈署node-application到heroku"},"children":[{"type":"text","value":"佈署node application到Heroku"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"step1 先在個人總覽頁新增app項目"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://id.heroku.com/login","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"登入 heroku "}]},{"type":"text","value":"\n先前建立的Heroku帳密"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"假設我使用的app項目名稱是:jason-node"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"step2 佈署設定"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"server佈署時預設是執行 npm start 所對應的腳本。所以在package.json需要有對應的在專案的啟動指令"}]}]},{"type":"element","tag":"code","props":{"code":"//package.json\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n    \"start\": \"node appHeroku.js \" // appHeroku.js 作為應用的進入點\n  }\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7428ba"},"children":[{"type":"text","value":"//package.json"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a8a390"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0641d2"},"children":[{"type":"text","value":"scripts"}]},{"type":"element","tag":"span","props":{"class":"ct-a8a390"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-cec48c"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-453c87"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-71e637"},"children":[{"type":"text","value":"test"}]},{"type":"element","tag":"span","props":{"class":"ct-453c87"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-cec48c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8a390"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0641d2"},"children":[{"type":"text","value":"echo "}]},{"type":"element","tag":"span","props":{"class":"ct-d9ba0f"},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"class":"ct-0641d2"},"children":[{"type":"text","value":"Error: no test specified"}]},{"type":"element","tag":"span","props":{"class":"ct-d9ba0f"},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"class":"ct-0641d2"},"children":[{"type":"text","value":" && exit 1"}]},{"type":"element","tag":"span","props":{"class":"ct-a8a390"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-cec48c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-453c87"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-71e637"},"children":[{"type":"text","value":"start"}]},{"type":"element","tag":"span","props":{"class":"ct-453c87"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-cec48c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8a390"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-0641d2"},"children":[{"type":"text","value":"node appHeroku.js "}]},{"type":"element","tag":"span","props":{"class":"ct-a8a390"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d962bc"},"children":[{"type":"text","value":"// appHeroku.js 作為應用的進入點"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-cec48c"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"使用heroku指令"},"children":[{"type":"text","value":"使用heroku指令"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"要先下載heroku在本機後安裝 "},{"type":"element","tag":"a","props":{"href":"https://devcenter.heroku.com/articles/heroku-cli","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"heroku-cli"}]}]},{"type":"element","tag":"code","props":{"code":"#本機登入\nheroku login \n\n#把專案跟heroku的app server名稱綁定\nheroku git:remote -a ${heroku-app-name} #jason-node  \n\n#佈署\ngit push heroku ${分支名稱} #main  \n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7428ba"},"children":[{"type":"text","value":"#本機登入"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e02249"},"children":[{"type":"text","value":"heroku login "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7428ba"},"children":[{"type":"text","value":"#把專案跟heroku的app server名稱綁定"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":"heroku git:remote -a "}]},{"type":"element","tag":"span","props":{"class":"ct-cec48c"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":"heroku-app-name"}]},{"type":"element","tag":"span","props":{"class":"ct-cec48c"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d962bc"},"children":[{"type":"text","value":"#jason-node  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7428ba"},"children":[{"type":"text","value":"#佈署"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":"git push heroku "}]},{"type":"element","tag":"span","props":{"class":"ct-cec48c"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":"分支名稱"}]},{"type":"element","tag":"span","props":{"class":"ct-cec48c"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-8ba598"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d962bc"},"children":[{"type":"text","value":"#main  "}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://line-bot-doope.herokuapp.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"佈署上線結果 Heroku jason-node"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"參考資源\n"},{"type":"element","tag":"a","props":{"href":"https://medium.com/enjoy-life-enjoy-coding/heroku-%E6%90%AD%E9%85%8D-git-%E5%9C%A8-heroku-%E4%B8%8A%E9%83%A8%E7%BD%B2%E7%B6%B2%E7%AB%99%E7%9A%84%E6%89%8B%E6%8A%8A%E6%89%8B%E6%95%99%E5%AD%B8-bf4fd6f998b8","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"神Q超人 heroku佈署基礎教學"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-e02249{color:#A6ACCD}.ct-d962bc{color:#676E95}.ct-d9ba0f{color:#A6ACCD}.ct-71e637{color:#C792EA}.ct-453c87{color:#89DDFF}.ct-cec48c{color:#89DDFF}.ct-0641d2{color:#C3E88D}.ct-a8a390{color:#89DDFF}.ct-8ba598{color:#A6ACCD}.ct-7428ba{color:#676E95}.dark .ct-7428ba{color:#8B949E}.dark .ct-8ba598{color:#C9D1D9}.dark .ct-a8a390{color:#A5D6FF}.dark .ct-0641d2{color:#A5D6FF}.dark .ct-cec48c{color:#C9D1D9}.dark .ct-453c87{color:#79C0FF}.dark .ct-71e637{color:#79C0FF}.dark .ct-d9ba0f{color:#79C0FF}.dark .ct-d962bc{color:#8B949E}.dark .ct-e02249{color:#C9D1D9}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"佈署node-application到heroku","depth":2,"text":"佈署node application到Heroku"},{"id":"使用heroku指令","depth":2,"text":"使用heroku指令"}]}},"_type":"markdown","_id":"content:1.blog:1.Third Part:1.Heroku.md","_source":"content","_file":"1.blog/1.Third Part/1.Heroku.md","_extension":"md"},{"_path":"/blog/third-part/screenshot","_draft":false,"_partial":false,"_empty":false,"title":"web畫面截圖","description":"把渲染在web畫面上指定的Dom，轉成一張圖片後下載。在實作上需要使用Html5 Canvas物件(理解成畫布)來繪製指定的Dom，再把Canvas物件轉換成Blob，再轉換成可供瀏覽器觸發下載的ObjectURL格式，並執行觸發下載動作。","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"web畫面截圖功能實作"},"children":[{"type":"text","value":"web畫面截圖功能實作"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"把渲染在web畫面上指定的Dom，轉成一張圖片後下載。在實作上需要使用Html5 Canvas物件(理解成畫布)來繪製指定的Dom，再把Canvas物件轉換成Blob，再轉換成可供瀏覽器觸發下載的ObjectURL格式，並執行觸發下載動作。"}]},{"type":"element","tag":"img","props":{"src":"https://i.imgur.com/kp0HP5v.png","width":300},"children":[]},{"type":"element","tag":"h2","props":{"id":"lib"},"children":[{"type":"text","value":"lib"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.html2canvas.js\n把web畫面上指定的Dom，轉成一個Canvas物件。"}]},{"type":"element","tag":"code","props":{"code":"// in vue3 .vue\nimport html2canvas from \"html2canvas\";\n//...(略)\nhtml2canvas(instance.refs.targetDom).then((canvas) => {\n    //...\n});\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// in vue3 .vue\nimport html2canvas from \"html2canvas\";\n//...(略)\nhtml2canvas(instance.refs.targetDom).then((canvas) => {\n    //...\n});\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/html2canvas","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方doc"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2.FileSaver.js\n把Canvas物件轉成Blob格式，並呼叫FileSaver的API saveAs。而在SaveAs的實作中，則是把Blob格式轉換成可下載的ObjectURL格式。"}]},{"type":"element","tag":"code","props":{"code":"import { saveAs } from \"file-saver\";\n//...(略)\ncanvas.toBlob((blob) => {\n    saveAs(\n      blob,\n      `imageName.png`\n    );\n});\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { saveAs } from \"file-saver\";\n//...(略)\ncanvas.toBlob((blob) => {\n    saveAs(\n      blob,\n      `imageName.png`\n    );\n});\n\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"//lib FileSaver.js saveAs\nfunction saveAs(blob, name, opts) {\n  var URL = _global.URL || _global.webkitURL;\n  var a = document.createElement(\"a\");\n  name = name || blob.name || \"download\";\n\n  a.download = name;\n  a.rel = \"noopener\";\n\n  if (typeof blob === \"string\") {\n     // 略\n  } else {\n    a.href = URL.createObjectURL(blob);\n    setTimeout(function () {\n      URL.revokeObjectURL(a.href);\n    }, 4e4); // 40s\n    setTimeout(function () {\n      click(a);\n    }, 0);\n  }\n}\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//lib FileSaver.js saveAs\nfunction saveAs(blob, name, opts) {\n  var URL = _global.URL || _global.webkitURL;\n  var a = document.createElement(\"a\");\n  name = name || blob.name || \"download\";\n\n  a.download = name;\n  a.rel = \"noopener\";\n\n  if (typeof blob === \"string\") {\n     // 略\n  } else {\n    a.href = URL.createObjectURL(blob);\n    setTimeout(function () {\n      URL.revokeObjectURL(a.href);\n    }, 4e4); // 40s\n    setTimeout(function () {\n      click(a);\n    }, 0);\n  }\n}\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/eligrey/FileSaver.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方doc"}]}]},{"type":"element","tag":"h2","props":{"id":"實作code"},"children":[{"type":"text","value":"實作code"}]},{"type":"element","tag":"code","props":{"code":"\n//實作時有先將畫面一些不需要截圖的部分先隱藏 再擷取重新選染後的Dom\nconst isCapturing = ref(false);\n\nconst generatorImage = () => {\n  isCapturing.value = true; \n\n  setTimeout(() => {\n    html2canvas(instance.refs.row2).then((canvas) => {\n      isCapturing.value = false;\n      canvas.toBlob((blob) => {\n        saveAs(\n          blob,\n          `${curDepInfoDateStr.value} ${curDepInfo.value.depName}.png`\n        );\n      });\n    });\n  }, 200);\n};\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n//實作時有先將畫面一些不需要截圖的部分先隱藏 再擷取重新選染後的Dom\nconst isCapturing = ref(false);\n\nconst generatorImage = () => {\n  isCapturing.value = true; \n\n  setTimeout(() => {\n    html2canvas(instance.refs.row2).then((canvas) => {\n      isCapturing.value = false;\n      canvas.toBlob((blob) => {\n        saveAs(\n          blob,\n          `${curDepInfoDateStr.value} ${curDepInfo.value.depName}.png`\n        );\n      });\n    });\n  }, 200);\n};\n\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"blob"},"children":[{"type":"text","value":"Blob"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"二進位大型物件（英語：binary large object ，或英語：basic large object，縮寫為Blob、BLOB、BLOb），在資料庫管理系統中，將二進位資料儲存為一個單一個體的集合。Blob通常是影像、聲音或多媒體檔案。"}]},{"type":"element","tag":"h2","props":{"id":"物件資料轉換關係圖"},"children":[{"type":"text","value":"物件資料轉換關係圖"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Image、DataURL、ObjectURL、Blob、Canvas、ImageData、ArrayBuffer、ImageURL。"}]},{"type":"element","tag":"img","props":{"src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/112c6956ee734162bccebae8547ec061~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"學習資源\n"},{"type":"element","tag":"a","props":{"href":"https://www.gushiciku.cn/pl/gmpt/zh-tw","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"聊一聊 15.5K 的 FileSaver，是如何工作的"}]}]}]},"tags":"學習","categories":"技術","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"web畫面截圖功能實作"},"children":[{"type":"text","value":"web畫面截圖功能實作"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"把渲染在web畫面上指定的Dom，轉成一張圖片後下載。在實作上需要使用Html5 Canvas物件(理解成畫布)來繪製指定的Dom，再把Canvas物件轉換成Blob，再轉換成可供瀏覽器觸發下載的ObjectURL格式，並執行觸發下載動作。"}]},{"type":"element","tag":"img","props":{"src":"https://i.imgur.com/kp0HP5v.png","width":300},"children":[]},{"type":"element","tag":"h2","props":{"id":"lib"},"children":[{"type":"text","value":"lib"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.html2canvas.js\n把web畫面上指定的Dom，轉成一個Canvas物件。"}]},{"type":"element","tag":"code","props":{"code":"// in vue3 .vue\nimport html2canvas from \"html2canvas\";\n//...(略)\nhtml2canvas(instance.refs.targetDom).then((canvas) => {\n    //...\n});\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7cb8e"},"children":[{"type":"text","value":"// in vue3 .vue"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":" html2canvas "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b80772"},"children":[{"type":"text","value":"html2canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7cb8e"},"children":[{"type":"text","value":"//...(略)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2a8a97"},"children":[{"type":"text","value":"html2canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"(instance"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"refs"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"targetDom)"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2a8a97"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-442d7e"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-298b5a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-325888"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c7cb8e"},"children":[{"type":"text","value":"//..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/html2canvas","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方doc"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2.FileSaver.js\n把Canvas物件轉成Blob格式，並呼叫FileSaver的API saveAs。而在SaveAs的實作中，則是把Blob格式轉換成可下載的ObjectURL格式。"}]},{"type":"element","tag":"code","props":{"code":"import { saveAs } from \"file-saver\";\n//...(略)\ncanvas.toBlob((blob) => {\n    saveAs(\n      blob,\n      `imageName.png`\n    );\n});\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"saveAs"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b80772"},"children":[{"type":"text","value":"file-saver"}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7cb8e"},"children":[{"type":"text","value":"//...(略)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2a8a97"},"children":[{"type":"text","value":"toBlob"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-442d7e"},"children":[{"type":"text","value":"blob"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-298b5a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-84bbc6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-2428e0"},"children":[{"type":"text","value":"saveAs"}]},{"type":"element","tag":"span","props":{"class":"ct-84bbc6"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"blob"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-b80772"},"children":[{"type":"text","value":"imageName.png"}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"    )"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"//lib FileSaver.js saveAs\nfunction saveAs(blob, name, opts) {\n  var URL = _global.URL || _global.webkitURL;\n  var a = document.createElement(\"a\");\n  name = name || blob.name || \"download\";\n\n  a.download = name;\n  a.rel = \"noopener\";\n\n  if (typeof blob === \"string\") {\n     // 略\n  } else {\n    a.href = URL.createObjectURL(blob);\n    setTimeout(function () {\n      URL.revokeObjectURL(a.href);\n    }, 4e4); // 40s\n    setTimeout(function () {\n      click(a);\n    }, 0);\n  }\n}\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7cb8e"},"children":[{"type":"text","value":"//lib FileSaver.js saveAs"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-298b5a"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a8a97"},"children":[{"type":"text","value":"saveAs"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-442d7e"},"children":[{"type":"text","value":"blob"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-298b5a"},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa7b42"},"children":[{"type":"text","value":"URL"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"_global"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-aa7b42"},"children":[{"type":"text","value":"URL"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"_global"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"webkitURL"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-298b5a"},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"a"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2a8a97"},"children":[{"type":"text","value":"createElement"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b80772"},"children":[{"type":"text","value":"a"}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"blob"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b80772"},"children":[{"type":"text","value":"download"}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"a"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"download"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"a"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"rel"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b80772"},"children":[{"type":"text","value":"noopener"}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"typeof"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"blob"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b80772"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-325888"},"children":[{"type":"text","value":"     "}]},{"type":"element","tag":"span","props":{"class":"ct-c7cb8e"},"children":[{"type":"text","value":"// 略"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"a"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"href"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aa7b42"},"children":[{"type":"text","value":"URL"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2a8a97"},"children":[{"type":"text","value":"createObjectURL"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"blob"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-78832d"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-298b5a"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-aa7b42"},"children":[{"type":"text","value":"URL"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2a8a97"},"children":[{"type":"text","value":"revokeObjectURL"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"a"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"href"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"},"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f59f9"},"children":[{"type":"text","value":"4e4"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-10e388"},"children":[{"type":"text","value":"// 40s"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-78832d"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-298b5a"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2a8a97"},"children":[{"type":"text","value":"click"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"a"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"},"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f59f9"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-325888"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/eligrey/FileSaver.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方doc"}]}]},{"type":"element","tag":"h2","props":{"id":"實作code"},"children":[{"type":"text","value":"實作code"}]},{"type":"element","tag":"code","props":{"code":"\n//實作時有先將畫面一些不需要截圖的部分先隱藏 再擷取重新選染後的Dom\nconst isCapturing = ref(false);\n\nconst generatorImage = () => {\n  isCapturing.value = true; \n\n  setTimeout(() => {\n    html2canvas(instance.refs.row2).then((canvas) => {\n      isCapturing.value = false;\n      canvas.toBlob((blob) => {\n        saveAs(\n          blob,\n          `${curDepInfoDateStr.value} ${curDepInfo.value.depName}.png`\n        );\n      });\n    });\n  }, 200);\n};\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c7cb8e"},"children":[{"type":"text","value":"//實作時有先將畫面一些不需要截圖的部分先隱藏 再擷取重新選染後的Dom"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6884fc"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0926b0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a5cb67"},"children":[{"type":"text","value":"isCapturing"}]},{"type":"element","tag":"span","props":{"class":"ct-0926b0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cc8c3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0926b0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2428e0"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-0926b0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c28320"},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-298b5a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-298b5a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"isCapturing"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2e1d2"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-78832d"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-298b5a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-2a8a97"},"children":[{"type":"text","value":"html2canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"refs"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"row2"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2a8a97"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-442d7e"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-298b5a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"isCapturing"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0546cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2e1d2"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-2a8a97"},"children":[{"type":"text","value":"toBlob"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-442d7e"},"children":[{"type":"text","value":"blob"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-298b5a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-84bbc6"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-2428e0"},"children":[{"type":"text","value":"saveAs"}]},{"type":"element","tag":"span","props":{"class":"ct-84bbc6"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"blob"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"curDepInfoDateStr"}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-b80772"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"curDepInfo"}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18068"},"children":[{"type":"text","value":"depName"}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-b80772"},"children":[{"type":"text","value":".png"}]},{"type":"element","tag":"span","props":{"class":"ct-042305"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"        )"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":"},"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1f59f9"},"children":[{"type":"text","value":"200"}]},{"type":"element","tag":"span","props":{"class":"ct-f5c065"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-1488eb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-325888"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"blob"},"children":[{"type":"text","value":"Blob"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"二進位大型物件（英語：binary large object ，或英語：basic large object，縮寫為Blob、BLOB、BLOb），在資料庫管理系統中，將二進位資料儲存為一個單一個體的集合。Blob通常是影像、聲音或多媒體檔案。"}]},{"type":"element","tag":"h2","props":{"id":"物件資料轉換關係圖"},"children":[{"type":"text","value":"物件資料轉換關係圖"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Image、DataURL、ObjectURL、Blob、Canvas、ImageData、ArrayBuffer、ImageURL。"}]},{"type":"element","tag":"img","props":{"src":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/112c6956ee734162bccebae8547ec061~tplv-k3u1fbpfcp-zoom-1.image"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"學習資源\n"},{"type":"element","tag":"a","props":{"href":"https://www.gushiciku.cn/pl/gmpt/zh-tw","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"聊一聊 15.5K 的 FileSaver，是如何工作的"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-b2e1d2{color:#FF9CAC}.ct-c28320{color:#FF9CAC}.ct-3cc8c3{color:#89DDFF}.ct-a5cb67{color:#A6ACCD}.ct-0926b0{color:#A6ACCD}.ct-6884fc{color:#C792EA}.ct-10e388{color:#676E95}.ct-1f59f9{color:#F78C6C}.ct-78832d{color:#82AAFF}.ct-aa7b42{color:#A6ACCD}.ct-2428e0{color:#82AAFF}.ct-84bbc6{color:#F07178}.ct-f5c065{color:#F07178}.ct-325888{color:#89DDFF}.ct-298b5a{color:#C792EA}.ct-442d7e{color:#A6ACCD}.ct-2a8a97{color:#82AAFF}.ct-1488eb{color:#89DDFF}.ct-b80772{color:#C3E88D}.ct-042305{color:#89DDFF}.ct-c18068{color:#A6ACCD}.ct-0546cf{color:#89DDFF}.ct-c7cb8e{color:#676E95}.dark .ct-c7cb8e{color:#8B949E}.dark .ct-0546cf{color:#FF7B72}.dark .ct-c18068{color:#C9D1D9}.dark .ct-042305{color:#A5D6FF}.dark .ct-b80772{color:#A5D6FF}.dark .ct-1488eb{color:#C9D1D9}.dark .ct-2a8a97{color:#D2A8FF}.dark .ct-442d7e{color:#FFA657}.dark .ct-298b5a{color:#FF7B72}.dark .ct-325888{color:#C9D1D9}.dark .ct-f5c065{color:#C9D1D9}.dark .ct-84bbc6{color:#C9D1D9}.dark .ct-2428e0{color:#D2A8FF}.dark .ct-aa7b42{color:#79C0FF}.dark .ct-78832d{color:#79C0FF}.dark .ct-1f59f9{color:#79C0FF}.dark .ct-10e388{color:#8B949E}.dark .ct-6884fc{color:#FF7B72}.dark .ct-0926b0{color:#C9D1D9}.dark .ct-a5cb67{color:#79C0FF}.dark .ct-3cc8c3{color:#FF7B72}.dark .ct-c28320{color:#79C0FF}.dark .ct-b2e1d2{color:#79C0FF}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"lib","depth":2,"text":"lib"},{"id":"實作code","depth":2,"text":"實作code"},{"id":"blob","depth":2,"text":"Blob"},{"id":"物件資料轉換關係圖","depth":2,"text":"物件資料轉換關係圖"}]}},"_type":"markdown","_id":"content:1.blog:1.Third Part:2.screenShot.md","_source":"content","_file":"1.blog/1.Third Part/2.screenShot.md","_extension":"md"},{"_path":"/blog/third-part/dockerfile-and-image-and-hub","_draft":false,"_partial":false,"_empty":false,"title":"Dockerfile & image & hub","description":"在docker hub建立自己的儲存空間(registry)。練習上傳(push)在本地出的映像檔(image)到自己的儲存空間下的儲存庫(repository)。","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"dockerfile--image--hub"},"children":[{"type":"text","value":"Dockerfile & image & hub"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在docker hub建立自己的儲存空間(registry)。練習上傳(push)在本地出的映像檔(image)到自己的儲存空間下的儲存庫(repository)。"}]},{"type":"element","tag":"h3","props":{"id":"step1-write-a-dockerfile"},"children":[{"type":"text","value":"step1 write a dockerfile"}]},{"type":"element","tag":"code","props":{"code":"FROM node:12.22.1-alpine\n\nWORKDIR /app\n\nCOPY . .\n\nRUN npm install\n\nEXPOSE 8080\n\nCMD [\"npm\",\"run\",\"dev\" ]\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"FROM node:12.22.1-alpine\n\nWORKDIR /app\n\nCOPY . .\n\nRUN npm install\n\nEXPOSE 8080\n\nCMD [\"npm\",\"run\",\"dev\" ]\n\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"step2-create-a-image"},"children":[{"type":"text","value":"step2 create a image"}]},{"type":"element","tag":"code","props":{"code":"docker build -t node12-app .\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"docker build -t node12-app .\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"step3-run-image"},"children":[{"type":"text","value":"step3 run image"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"give args\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/yoDqpCS.jpg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"open on localhost\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/4sWbwOy.jpg"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"step4-set-image-with-tag"},"children":[{"type":"text","value":"step4 set image with tag"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"local image name : node12-app\nmy docker hub / repository name : jason0103/node12-app\nversion : 1"}]},{"type":"element","tag":"code","props":{"code":"\ndocker tag node12-app jason0103/node12-app:1\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\ndocker tag node12-app jason0103/node12-app:1\n\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"step5"},"children":[{"type":"text","value":"step5"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"push the image to your registry of docker hub"}]},{"type":"element","tag":"code","props":{"code":"\ndocker push jason0103/node12-app:1\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\ndocker push jason0103/node12-app:1\n\n"}]}]}]}]},"tags":"學習","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"dockerfile--image--hub"},"children":[{"type":"text","value":"Dockerfile & image & hub"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在docker hub建立自己的儲存空間(registry)。練習上傳(push)在本地出的映像檔(image)到自己的儲存空間下的儲存庫(repository)。"}]},{"type":"element","tag":"h3","props":{"id":"step1-write-a-dockerfile"},"children":[{"type":"text","value":"step1 write a dockerfile"}]},{"type":"element","tag":"code","props":{"code":"FROM node:12.22.1-alpine\n\nWORKDIR /app\n\nCOPY . .\n\nRUN npm install\n\nEXPOSE 8080\n\nCMD [\"npm\",\"run\",\"dev\" ]\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3deea4"},"children":[{"type":"text","value":"FROM node:12.22.1-alpine"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3deea4"},"children":[{"type":"text","value":"WORKDIR /app"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3deea4"},"children":[{"type":"text","value":"COPY "}]},{"type":"element","tag":"span","props":{"class":"ct-b70a68"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3deea4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b70a68"},"children":[{"type":"text","value":"."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3deea4"},"children":[{"type":"text","value":"RUN npm install"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3deea4"},"children":[{"type":"text","value":"EXPOSE 8080"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8fae02"},"children":[{"type":"text","value":"CMD "}]},{"type":"element","tag":"span","props":{"class":"ct-a885bd"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-182f3e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c692e6"},"children":[{"type":"text","value":"npm"}]},{"type":"element","tag":"span","props":{"class":"ct-182f3e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8fae02"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-182f3e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c692e6"},"children":[{"type":"text","value":"run"}]},{"type":"element","tag":"span","props":{"class":"ct-182f3e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8fae02"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-182f3e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c692e6"},"children":[{"type":"text","value":"dev"}]},{"type":"element","tag":"span","props":{"class":"ct-182f3e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8fae02"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a885bd"},"children":[{"type":"text","value":"]"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"step2-create-a-image"},"children":[{"type":"text","value":"step2 create a image"}]},{"type":"element","tag":"code","props":{"code":"docker build -t node12-app .\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3deea4"},"children":[{"type":"text","value":"docker build -t node12-app "}]},{"type":"element","tag":"span","props":{"class":"ct-b70a68"},"children":[{"type":"text","value":"."}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"step3-run-image"},"children":[{"type":"text","value":"step3 run image"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"give args\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/yoDqpCS.jpg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"open on localhost\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/4sWbwOy.jpg"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"step4-set-image-with-tag"},"children":[{"type":"text","value":"step4 set image with tag"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"local image name : node12-app\nmy docker hub / repository name : jason0103/node12-app\nversion : 1"}]},{"type":"element","tag":"code","props":{"code":"\ndocker tag node12-app jason0103/node12-app:1\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3deea4"},"children":[{"type":"text","value":"docker tag node12-app jason0103/node12-app:1"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"step5"},"children":[{"type":"text","value":"step5"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"push the image to your registry of docker hub"}]},{"type":"element","tag":"code","props":{"code":"\ndocker push jason0103/node12-app:1\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3deea4"},"children":[{"type":"text","value":"docker push jason0103/node12-app:1"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-c692e6{color:#C3E88D}.ct-182f3e{color:#89DDFF}.ct-a885bd{color:#89DDFF}.ct-8fae02{color:#A6ACCD}.ct-b70a68{color:#82AAFF}.ct-3deea4{color:#A6ACCD}.dark .ct-3deea4{color:#C9D1D9}.dark .ct-b70a68{color:#79C0FF}.dark .ct-8fae02{color:#C9D1D9}.dark .ct-a885bd{color:#C9D1D9}.dark .ct-182f3e{color:#A5D6FF}.dark .ct-c692e6{color:#A5D6FF}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"step1-write-a-dockerfile","depth":3,"text":"step1 write a dockerfile"},{"id":"step2-create-a-image","depth":3,"text":"step2 create a image"},{"id":"step3-run-image","depth":3,"text":"step3 run image"},{"id":"step4-set-image-with-tag","depth":3,"text":"step4 set image with tag"},{"id":"step5","depth":3,"text":"step5"}]}},"_type":"markdown","_id":"content:1.blog:1.Third Part:2.學習-Dockerfile & image & hub.md","_source":"content","_file":"1.blog/1.Third Part/2.學習-Dockerfile & image & hub.md","_extension":"md"},{"_path":"/blog/third-part/linebot","_draft":false,"_partial":false,"_empty":false,"title":"LineBot API串接","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"linebot-api串接"},"children":[{"type":"text","value":"LineBot API串接"}]},{"type":"element","tag":"h2","props":{"id":"相關連結"},"children":[{"type":"text","value":"相關連結"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://manager.line.biz/account/@928wyrpi","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"豆皮官方line 管理台"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://developers.line.biz/console/channel/1656497673/basics","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"line developer //開發者管理API服務"}]}]},{"type":"element","tag":"h2","props":{"id":"本地開發測試"},"children":[{"type":"text","value":"本地開發/測試"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"參考資源:"},{"type":"element","tag":"a","props":{"href":"https://medium.com/pyradise/%E4%BD%BF%E7%94%A8node-js%E5%BB%BA%E7%BD%AE%E4%BD%A0%E7%9A%84%E7%AC%AC%E4%B8%80%E5%80%8Bline-bot-590b7ba7a28a","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"使用Node.js建置你的第一個LINE BOT"}]},{"type":"text","value":"\n工具 ngrok:"},{"type":"element","tag":"a","props":{"href":"https://dashboard.ngrok.com/get-started/setup","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"讓本地https 服務指向localhost:port"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"知識點: 串接line bot message API 需要使用https連線方式\n本地開發時，借助ngrok可以建立一個對外的https url 指向給本地的服務對外使用"}]}]},{"type":"element","tag":"h2","props":{"id":"message-hook"},"children":[{"type":"text","value":"Message Hook"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/line/line-bot-sdk-nodejs/tree/next/examples/echo-bot","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方line bot nodeJS範例"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"知識點: 官方範例是啟一個express app應來並且監聽https的Post /callback，來接收官方line所收到的訊息。"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"line bot sdk模組與使用"}]},{"type":"element","tag":"code","props":{"code":"const line = require(\"@line/bot-sdk\");\nconst config = {\n  channelAccessToken: \"來自line developer\",\n  channelSecret: \"來自line developer\",\n};\nconst client = new line.Client(config);\n// 此client物件可用來回傳訊息\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const line = require(\"@line/bot-sdk\");\nconst config = {\n  channelAccessToken: \"來自line developer\",\n  channelSecret: \"來自line developer\",\n};\nconst client = new line.Client(config);\n// 此client物件可用來回傳訊息\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"監聽 Post /callback"}]},{"type":"element","tag":"code","props":{"code":"app.post(\"/callback\", line.middleware(config), (req, res) => {\n  Promise.all(req.body.events.map(handleEvent))\n    .then((result) => res.json(result))\n    .catch((err) => {\n      console.error(err);\n      res.status(500).end();\n    });\n});\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"app.post(\"/callback\", line.middleware(config), (req, res) => {\n  Promise.all(req.body.events.map(handleEvent))\n    .then((result) => res.json(result))\n    .catch((err) => {\n      console.error(err);\n      res.status(500).end();\n    });\n});\n"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"知識點: 當有line訊息傳給官方line後，需要在line developer設定設有監聽服務的地址\n本次實作的例子 Webhook URL 是設置為  "},{"type":"element","tag":"a","props":{"href":"https://line-bot-doope.herokuapp.com/callback","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://line-bot-doope.herokuapp.com/callback"}]}]}]},{"type":"element","tag":"h2","props":{"id":"圖片推播"},"children":[{"type":"text","value":"圖片推播"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"參考官方Message API 文件的圖片訊息格式，可以加入靜態資源(圖片)的url\n同在express app 做http GET的監聽，並利用express app的res.sendFile()傳送圖檔"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"知識點: 利用nodeJS 架設能提供靜態資源服務的應用"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"http://expressjs.com/en/api.html#res.sendFile","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"express API 官方文件 res.sendFile"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"完整程式碼:"},{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/line-bot-dopee","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://github.com/lian0103/line-bot-dopee"}]}]},{"type":"element","tag":"h2","props":{"id":"訊息推播"},"children":[{"type":"text","value":"訊息推播"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"broadcast API "},{"type":"element","tag":"a","props":{"href":"https://developers.line.biz/en/reference/messaging-api/#send-broadcast-message","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方文件"}]}]}]},"tags":"實作","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"linebot-api串接"},"children":[{"type":"text","value":"LineBot API串接"}]},{"type":"element","tag":"h2","props":{"id":"相關連結"},"children":[{"type":"text","value":"相關連結"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://manager.line.biz/account/@928wyrpi","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"豆皮官方line 管理台"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://developers.line.biz/console/channel/1656497673/basics","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"line developer //開發者管理API服務"}]}]},{"type":"element","tag":"h2","props":{"id":"本地開發測試"},"children":[{"type":"text","value":"本地開發/測試"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"參考資源:"},{"type":"element","tag":"a","props":{"href":"https://medium.com/pyradise/%E4%BD%BF%E7%94%A8node-js%E5%BB%BA%E7%BD%AE%E4%BD%A0%E7%9A%84%E7%AC%AC%E4%B8%80%E5%80%8Bline-bot-590b7ba7a28a","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"使用Node.js建置你的第一個LINE BOT"}]},{"type":"text","value":"\n工具 ngrok:"},{"type":"element","tag":"a","props":{"href":"https://dashboard.ngrok.com/get-started/setup","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"讓本地https 服務指向localhost:port"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"知識點: 串接line bot message API 需要使用https連線方式\n本地開發時，借助ngrok可以建立一個對外的https url 指向給本地的服務對外使用"}]}]},{"type":"element","tag":"h2","props":{"id":"message-hook"},"children":[{"type":"text","value":"Message Hook"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/line/line-bot-sdk-nodejs/tree/next/examples/echo-bot","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方line bot nodeJS範例"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"知識點: 官方範例是啟一個express app應來並且監聽https的Post /callback，來接收官方line所收到的訊息。"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"line bot sdk模組與使用"}]},{"type":"element","tag":"code","props":{"code":"const line = require(\"@line/bot-sdk\");\nconst config = {\n  channelAccessToken: \"來自line developer\",\n  channelSecret: \"來自line developer\",\n};\nconst client = new line.Client(config);\n// 此client物件可用來回傳訊息\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6b00bb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-880d16"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-4dfe10"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-59cf15"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-4dfe10"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e2d389"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"channelAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42e112"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7c8877"},"children":[{"type":"text","value":"來自line developer"}]},{"type":"element","tag":"span","props":{"class":"ct-42e112"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"channelSecret"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42e112"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7c8877"},"children":[{"type":"text","value":"來自line developer"}]},{"type":"element","tag":"span","props":{"class":"ct-42e112"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e08bd3"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-880d16"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-4dfe10"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-59cf15"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-4dfe10"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e2d389"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-4dfe10"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e2d389"},"children":[{"type":"text","value":"new"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-865544"},"children":[{"type":"text","value":"// 此client物件可用來回傳訊息"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"監聽 Post /callback"}]},{"type":"element","tag":"code","props":{"code":"app.post(\"/callback\", line.middleware(config), (req, res) => {\n  Promise.all(req.body.events.map(handleEvent))\n    .then((result) => res.json(result))\n    .catch((err) => {\n      console.error(err);\n      res.status(500).end();\n    });\n});\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"app"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7c137a"},"children":[{"type":"text","value":"post"}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-42e112"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7c8877"},"children":[{"type":"text","value":"/callback"}]},{"type":"element","tag":"span","props":{"class":"ct-42e112"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":" line"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7c137a"},"children":[{"type":"text","value":"middleware"}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"(config)"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-16eb53"},"children":[{"type":"text","value":"req"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b849dd"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7c137a"},"children":[{"type":"text","value":"all"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"req"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"events"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7c137a"},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"handleEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7c137a"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-16eb53"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6b00bb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"res"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7c137a"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7c137a"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-16eb53"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6b00bb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7c137a"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":"res"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7c137a"},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-779273"},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7c137a"},"children":[{"type":"text","value":"end"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-0d9e9f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-932ef8"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-ec25c7"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"知識點: 當有line訊息傳給官方line後，需要在line developer設定設有監聽服務的地址\n本次實作的例子 Webhook URL 是設置為  "},{"type":"element","tag":"a","props":{"href":"https://line-bot-doope.herokuapp.com/callback","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://line-bot-doope.herokuapp.com/callback"}]}]}]},{"type":"element","tag":"h2","props":{"id":"圖片推播"},"children":[{"type":"text","value":"圖片推播"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"參考官方Message API 文件的圖片訊息格式，可以加入靜態資源(圖片)的url\n同在express app 做http GET的監聽，並利用express app的res.sendFile()傳送圖檔"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"知識點: 利用nodeJS 架設能提供靜態資源服務的應用"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"http://expressjs.com/en/api.html#res.sendFile","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"express API 官方文件 res.sendFile"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"完整程式碼:"},{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/line-bot-dopee","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://github.com/lian0103/line-bot-dopee"}]}]},{"type":"element","tag":"h2","props":{"id":"訊息推播"},"children":[{"type":"text","value":"訊息推播"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"broadcast API "},{"type":"element","tag":"a","props":{"href":"https://developers.line.biz/en/reference/messaging-api/#send-broadcast-message","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方文件"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-779273{color:#F78C6C}.ct-b849dd{color:#FFCB6B}.ct-16eb53{color:#A6ACCD}.ct-7c137a{color:#82AAFF}.ct-865544{color:#676E95}.ct-e08bd3{color:#89DDFF}.ct-7c8877{color:#C3E88D}.ct-42e112{color:#89DDFF}.ct-ec25c7{color:#89DDFF}.ct-0d9e9f{color:#F07178}.ct-e2d389{color:#89DDFF}.ct-59cf15{color:#A6ACCD}.ct-4dfe10{color:#A6ACCD}.ct-880d16{color:#C792EA}.ct-932ef8{color:#A6ACCD}.ct-6b00bb{color:#C792EA}.dark .ct-6b00bb{color:#FF7B72}.dark .ct-932ef8{color:#C9D1D9}.dark .ct-880d16{color:#FF7B72}.dark .ct-4dfe10{color:#C9D1D9}.dark .ct-59cf15{color:#79C0FF}.dark .ct-e2d389{color:#FF7B72}.dark .ct-0d9e9f{color:#C9D1D9}.dark .ct-ec25c7{color:#C9D1D9}.dark .ct-42e112{color:#A5D6FF}.dark .ct-7c8877{color:#A5D6FF}.dark .ct-e08bd3{color:#C9D1D9}.dark .ct-865544{color:#8B949E}.dark .ct-7c137a{color:#D2A8FF}.dark .ct-16eb53{color:#FFA657}.dark .ct-b849dd{color:#79C0FF}.dark .ct-779273{color:#79C0FF}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"相關連結","depth":2,"text":"相關連結"},{"id":"本地開發測試","depth":2,"text":"本地開發/測試"},{"id":"message-hook","depth":2,"text":"Message Hook"},{"id":"圖片推播","depth":2,"text":"圖片推播"},{"id":"訊息推播","depth":2,"text":"訊息推播"}]}},"_type":"markdown","_id":"content:1.blog:1.Third Part:3. lineBot串接.md","_source":"content","_file":"1.blog/1.Third Part/3. lineBot串接.md","_extension":"md"},{"_path":"/blog/third-part/firebaseapp","_draft":false,"_partial":false,"_empty":false,"title":"Firebase features","description":"Google開發全家餐系列預計包含Google Firebase、Google AdSense、Google Analytics..。本篇主要在記錄使用Firebase部分功能。","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Google開發全家餐系列預計包含Google Firebase、Google AdSense、Google Analytics..。本篇主要在記錄使用Firebase部分功能。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"實作部分，我有兩個小專案應用放在Firebase上:\n1.Portfolio 作品集 "},{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/portfolio","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"github link"}]},{"type":"text","value":"\n2.Hexo-blog 部落格 "},{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/hexo-blog","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"github link"}]}]},{"type":"element","tag":"h2","props":{"id":"firebase-realtime-database"},"children":[{"type":"text","value":"Firebase Realtime Database"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"每筆資料會像是文件檔一樣各自獨立地儲存，而DB可以視為很多文件的集合物件。前端/APP端在使用時，也會隨著DB內的文件更新，也會即時將有該筆資料的訂閱端做推送更新，也就是不同使用者和應用程式可以同時共享最新的資料。"}]},{"type":"element","tag":"h3","props":{"id":"應用實作留言板"},"children":[{"type":"text","value":"應用實作:留言板"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在這裡呈現的留言板即是將資料存放在Realtime DB。多個使用者/視窗同時留言，會同步推送給其他人的畫面。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/NtHhZMK.jpg"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"firebase-hosting"},"children":[{"type":"text","value":"Firebase Hosting"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"和github pages類似，這個服務可以把部屬應用程式到它的主機上，Hosting預設會給兩種domain的網址。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/pYy4vm4.jpg"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"應用實作部屬上線"},"children":[{"type":"text","value":"應用實作:部屬上線"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"以這個部落格的專案為例，我是使用Hexo的架站模組，會用到的指令如下。流程上是需要可以先建置好部落格的專案，後續再使用Hosting即可。"}]},{"type":"element","tag":"h2","props":{"id":"指令"},"children":[{"type":"text","value":"指令"}]},{"type":"element","tag":"code","props":{"code":"#Hexo cli指定\n#清除cache並生產靜態檔\nhexo clean && hexo g\n\n#Firebase cli指令\n\nfirebase login --interactive\n\nfirebase init --hosting\n\nfirebase deploy\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#Hexo cli指定\n#清除cache並生產靜態檔\nhexo clean && hexo g\n\n#Firebase cli指令\n\nfirebase login --interactive\n\nfirebase init --hosting\n\nfirebase deploy\n\n"}]}]}]}]},"tags":"技術","categories":"開發","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Google開發全家餐系列預計包含Google Firebase、Google AdSense、Google Analytics..。本篇主要在記錄使用Firebase部分功能。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"實作部分，我有兩個小專案應用放在Firebase上:\n1.Portfolio 作品集 "},{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/portfolio","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"github link"}]},{"type":"text","value":"\n2.Hexo-blog 部落格 "},{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/hexo-blog","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"github link"}]}]},{"type":"element","tag":"h2","props":{"id":"firebase-realtime-database"},"children":[{"type":"text","value":"Firebase Realtime Database"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"每筆資料會像是文件檔一樣各自獨立地儲存，而DB可以視為很多文件的集合物件。前端/APP端在使用時，也會隨著DB內的文件更新，也會即時將有該筆資料的訂閱端做推送更新，也就是不同使用者和應用程式可以同時共享最新的資料。"}]},{"type":"element","tag":"h3","props":{"id":"應用實作留言板"},"children":[{"type":"text","value":"應用實作:留言板"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在這裡呈現的留言板即是將資料存放在Realtime DB。多個使用者/視窗同時留言，會同步推送給其他人的畫面。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/NtHhZMK.jpg"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"firebase-hosting"},"children":[{"type":"text","value":"Firebase Hosting"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"和github pages類似，這個服務可以把部屬應用程式到它的主機上，Hosting預設會給兩種domain的網址。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/pYy4vm4.jpg"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"應用實作部屬上線"},"children":[{"type":"text","value":"應用實作:部屬上線"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"以這個部落格的專案為例，我是使用Hexo的架站模組，會用到的指令如下。流程上是需要可以先建置好部落格的專案，後續再使用Hosting即可。"}]},{"type":"element","tag":"h2","props":{"id":"指令"},"children":[{"type":"text","value":"指令"}]},{"type":"element","tag":"code","props":{"code":"#Hexo cli指定\n#清除cache並生產靜態檔\nhexo clean && hexo g\n\n#Firebase cli指令\n\nfirebase login --interactive\n\nfirebase init --hosting\n\nfirebase deploy\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-27b3d5"},"children":[{"type":"text","value":"#Hexo cli指定"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-27b3d5"},"children":[{"type":"text","value":"#清除cache並生產靜態檔"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-00cf1c"},"children":[{"type":"text","value":"hexo clean "}]},{"type":"element","tag":"span","props":{"class":"ct-1675c4"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-00cf1c"},"children":[{"type":"text","value":" hexo g"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-27b3d5"},"children":[{"type":"text","value":"#Firebase cli指令"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-00cf1c"},"children":[{"type":"text","value":"firebase login --interactive"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-00cf1c"},"children":[{"type":"text","value":"firebase init --hosting"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-00cf1c"},"children":[{"type":"text","value":"firebase deploy"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-1675c4{color:#89DDFF}.ct-00cf1c{color:#A6ACCD}.ct-27b3d5{color:#676E95}.dark .ct-27b3d5{color:#8B949E}.dark .ct-00cf1c{color:#C9D1D9}.dark .ct-1675c4{color:#FF7B72}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"firebase-realtime-database","depth":2,"text":"Firebase Realtime Database","children":[{"id":"應用實作留言板","depth":3,"text":"應用實作:留言板"}]},{"id":"firebase-hosting","depth":2,"text":"Firebase Hosting","children":[{"id":"應用實作部屬上線","depth":3,"text":"應用實作:部屬上線"}]},{"id":"指令","depth":2,"text":"指令"}]}},"_type":"markdown","_id":"content:1.blog:1.Third Part:3.FirebaseApp.md","_source":"content","_file":"1.blog/1.Third Part/3.FirebaseApp.md","_extension":"md"},{"_path":"/blog/third-part/websocket-socketio","_draft":false,"_partial":false,"_empty":false,"title":"websocket 和 socketIO","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"websocket"},"children":[{"type":"text","value":"websocket"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"websocket是一種連線server端的方式，用來傳送和接收資料。從client端發起連結的請求，是從一般的http request\"升級\"成websocket，這種連線方式也是被w3c認可的技術。\n"},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"MDN WebSockets_API"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"socketIO是一種處理雙向(client和server端)、即時性的、事件導向的js套件，它包含websocket的技術，但封裝更多管理/操作websocket的API提供client端/server端使用。"}]},{"type":"element","tag":"warning","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在client端，要使用socketIO去建立的連線，server端也必須使用socketIO提供的API，client端並不能直接使用socketIO去連接單純的(plant)websocket。\n"},{"type":"element","tag":"a","props":{"href":"https://socket.io/docs/v4/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"socketIO官方文件"}]}]}]},{"type":"element","tag":"h2","props":{"id":"詳細比較"},"children":[{"type":"text","value":"詳細比較"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在這篇的討論中，可以知道使用socketIO是較容易就能去建立資料交換的流程和管理機制，且支援更多的client端使用情境。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://stackoverflow.com/questions/10112178/differences-between-socket-io-and-websockets","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"differences-between-socket-io-and-websockets"}]}]},{"type":"element","tag":"h2","props":{"id":"使用教學"},"children":[{"type":"text","value":"使用教學"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"教學影片切入socketIO在實務上有前後端分離時，要透過API io(\"url\")建立連線以及server端處理cors的設定。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=BAZ-tJOYhlA&ab_channel=HiteshChoudhary","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"socket io crash course | easy way"}]}]},{"type":"element","tag":"h2","props":{"id":"實作review"},"children":[{"type":"text","value":"實作review"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"簡言之，建立websocket是希望client端即時和有效率的取得server端管理的資料，像是多個client端同時使用聊天功能，有需要\"被通知\"新的聊天資料。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2021年實作作品"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/node_chatroom","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"chatroom"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"http://jason-node-chatroom.herokuapp.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"demo"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"devtool ws 建立\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/bOmTOAK.jpg"},"children":[]}]}]},"tags":"學習","categories":"開發","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"websocket"},"children":[{"type":"text","value":"websocket"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"websocket是一種連線server端的方式，用來傳送和接收資料。從client端發起連結的請求，是從一般的http request\"升級\"成websocket，這種連線方式也是被w3c認可的技術。\n"},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"MDN WebSockets_API"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"socketIO是一種處理雙向(client和server端)、即時性的、事件導向的js套件，它包含websocket的技術，但封裝更多管理/操作websocket的API提供client端/server端使用。"}]},{"type":"element","tag":"warning","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在client端，要使用socketIO去建立的連線，server端也必須使用socketIO提供的API，client端並不能直接使用socketIO去連接單純的(plant)websocket。\n"},{"type":"element","tag":"a","props":{"href":"https://socket.io/docs/v4/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"socketIO官方文件"}]}]}]},{"type":"element","tag":"h2","props":{"id":"詳細比較"},"children":[{"type":"text","value":"詳細比較"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在這篇的討論中，可以知道使用socketIO是較容易就能去建立資料交換的流程和管理機制，且支援更多的client端使用情境。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://stackoverflow.com/questions/10112178/differences-between-socket-io-and-websockets","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"differences-between-socket-io-and-websockets"}]}]},{"type":"element","tag":"h2","props":{"id":"使用教學"},"children":[{"type":"text","value":"使用教學"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"教學影片切入socketIO在實務上有前後端分離時，要透過API io(\"url\")建立連線以及server端處理cors的設定。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=BAZ-tJOYhlA&ab_channel=HiteshChoudhary","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"socket io crash course | easy way"}]}]},{"type":"element","tag":"h2","props":{"id":"實作review"},"children":[{"type":"text","value":"實作review"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"簡言之，建立websocket是希望client端即時和有效率的取得server端管理的資料，像是多個client端同時使用聊天功能，有需要\"被通知\"新的聊天資料。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2021年實作作品"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/node_chatroom","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"chatroom"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"http://jason-node-chatroom.herokuapp.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"demo"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"devtool ws 建立\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/bOmTOAK.jpg"},"children":[]}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"websocket","depth":2,"text":"websocket"},{"id":"詳細比較","depth":2,"text":"詳細比較"},{"id":"使用教學","depth":2,"text":"使用教學"},{"id":"實作review","depth":2,"text":"實作review"}]}},"_type":"markdown","_id":"content:1.blog:1.Third Part:4.學習-websocket 和 socketIO.md","_source":"content","_file":"1.blog/1.Third Part/4.學習-websocket 和 socketIO.md","_extension":"md"},{"_path":"/blog/third-part/d3","_draft":false,"_partial":false,"_empty":false,"title":"D3.js 畫甘特圖","description":"以SVG標籤為技術基礎的D3.js，d3提供各種API庫來操作SVG，它是功能很多的一個函示庫。而理解SVG的核心，需要現有圖層、定位(x,y)的認知，在操作的過程就是把每個圖層疊加在一起，並在內的標籤上綁定監聽事件，就可以實現交互的效果。","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"d3js-畫甘特圖"},"children":[{"type":"text","value":"D3.js 畫甘特圖"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"以SVG標籤為技術基礎的D3.js，d3提供各種API庫來操作SVG，它是功能很多的一個函示庫。而理解SVG的核心，需要現有圖層、定位(x,y)的認知，在操作的過程就是把每個圖層疊加在一起，並在內的標籤上綁定監聽事件，就可以實現交互的效果。"}]},{"type":"element","tag":"h2","props":{"id":"svg結構"},"children":[{"type":"text","value":"svg結構"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"從渲染結果來看，一個svg中會包含多個<g></g>的內容，一個<g>即可以理解為圖層，每個圖層內所繪製的部分在d3中分開處理，也表示每個圖層有它各自的資料。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/OVKNZV9.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"圖層疊加"},"children":[{"type":"text","value":"圖層疊加"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/uhIyg14.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"代碼"},"children":[{"type":"text","value":"代碼"}]},{"type":"element","tag":"code","props":{"code":"const svg = d3\n.select('#d3-container')\n.append('svg')\n.attr('width', width)\n.attr('height', height + 20);\n\nconst xAxisLayer = svg.append('g');\nconst titleLayer = svg.append('g');\nconst barlineLayer = svg.append('g');\nconst categoryLayer = svg.append('g');\nconst barsLayer = svg.append('g').attr('id', 'barsRects');\nconst barsTextLayer = svg.append('g').attr('id', 'barsTexts');\n\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const svg = d3\n.select('#d3-container')\n.append('svg')\n.attr('width', width)\n.attr('height', height + 20);\n\nconst xAxisLayer = svg.append('g');\nconst titleLayer = svg.append('g');\nconst barlineLayer = svg.append('g');\nconst categoryLayer = svg.append('g');\nconst barsLayer = svg.append('g').attr('id', 'barsRects');\nconst barsTextLayer = svg.append('g').attr('id', 'barsTexts');\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nuxt3-notes/blob/main/components/GanttChart.vue","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"完整代碼"}]}]}]},"tags":"學習","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"d3js-畫甘特圖"},"children":[{"type":"text","value":"D3.js 畫甘特圖"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"以SVG標籤為技術基礎的D3.js，d3提供各種API庫來操作SVG，它是功能很多的一個函示庫。而理解SVG的核心，需要現有圖層、定位(x,y)的認知，在操作的過程就是把每個圖層疊加在一起，並在內的標籤上綁定監聽事件，就可以實現交互的效果。"}]},{"type":"element","tag":"h2","props":{"id":"svg結構"},"children":[{"type":"text","value":"svg結構"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"從渲染結果來看，一個svg中會包含多個<g></g>的內容，一個<g>即可以理解為圖層，每個圖層內所繪製的部分在d3中分開處理，也表示每個圖層有它各自的資料。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/OVKNZV9.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"圖層疊加"},"children":[{"type":"text","value":"圖層疊加"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/uhIyg14.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"代碼"},"children":[{"type":"text","value":"代碼"}]},{"type":"element","tag":"code","props":{"code":"const svg = d3\n.select('#d3-container')\n.append('svg')\n.attr('width', width)\n.attr('height', height + 20);\n\nconst xAxisLayer = svg.append('g');\nconst titleLayer = svg.append('g');\nconst barlineLayer = svg.append('g');\nconst categoryLayer = svg.append('g');\nconst barsLayer = svg.append('g').attr('id', 'barsRects');\nconst barsTextLayer = svg.append('g').attr('id', 'barsTexts');\n\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"const svg = d3\n.select('#d3-container')\n.append('svg')\n.attr('width', width)\n.attr('height', height + 20);\n\nconst xAxisLayer = svg.append('g');\nconst titleLayer = svg.append('g');\nconst barlineLayer = svg.append('g');\nconst categoryLayer = svg.append('g');\nconst barsLayer = svg.append('g').attr('id', 'barsRects');\nconst barsTextLayer = svg.append('g').attr('id', 'barsTexts');"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nuxt3-notes/blob/main/components/GanttChart.vue","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"完整代碼"}]}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"svg結構","depth":2,"text":"svg結構"},{"id":"圖層疊加","depth":2,"text":"圖層疊加"},{"id":"代碼","depth":2,"text":"代碼"}]}},"_type":"markdown","_id":"content:1.blog:1.Third Part:5.d3畫甘特圖.md","_source":"content","_file":"1.blog/1.Third Part/5.d3畫甘特圖.md","_extension":"md"},{"_path":"/blog/use-vite-build-a-ui-package/gt-ui-design-rules","_draft":false,"_partial":false,"_empty":false,"title":"前端UI設計規範引入","description":"使用背景:\nUI設計規範通常包含字體、字級、主配色與客製組件的樣式(style)。","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"前端ui設計規範引入"},"children":[{"type":"text","value":"前端UI設計規範引入"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用背景:"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nUI設計規範通常包含字體、字級、主配色與客製組件的樣式(style)。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在專案中，也經常會引入已經完善的樣式庫來妥善管理全站的樣式，像是tailwindCSS。同時，也會在使用前端框架的情況下，導入其他UI庫，像是vue3的Element plus，且這些UI組件通常也有自己需要倚賴的樣式庫。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"而這些需要倚賴的樣式庫，如果在專案有要求設計規範時，可以很方便產出符合UI設計規範的專案樣式庫。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"以下是預設使用sass的專案中，配置tailwindCSS和Element plus來增加或覆寫預設的樣式。"}]},{"type":"element","tag":"h2","props":{"id":"對tailwindcss增加定義"},"children":[{"type":"text","value":"對tailwindCSS增加定義"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"依照官方文檔建立tailwind.config.js中，加入需要客製定義的元素，tailwind就能在編譯後建立出相依這些元素的樣式。"}]},{"type":"element","tag":"code","props":{"code":"\nmodule.exports = {\n    mode: 'jit', //只編譯有使用到的樣式\n    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],\n    theme: {\n        //...(略)\n        colors:{\n            //...(略) \n            pressing: '#DBE9D8', //定義顏色與對應的色碼\n            pressing2: '#E0F2DE',\n            mainGreen: '#3bb071',\n            mainGreenDarker: '#b8d8c9',\n            secondColor: '#b8d8c9',\n        }\n    }\n}\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\nmodule.exports = {\n    mode: 'jit', //只編譯有使用到的樣式\n    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],\n    theme: {\n        //...(略)\n        colors:{\n            //...(略) \n            pressing: '#DBE9D8', //定義顏色與對應的色碼\n            pressing2: '#E0F2DE',\n            mainGreen: '#3bb071',\n            mainGreenDarker: '#b8d8c9',\n            secondColor: '#b8d8c9',\n        }\n    }\n}\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在class中，就能使用如text-mainGreen的樣式改變字體顏色，也能使用from-pressing to-pressing2來讓背景的漸層樣式去對應到上段新定義的顏色。"}]},{"type":"element","tag":"code","props":{"code":"<template>\n    <div class=\"... bg-gradient-to-r from-pressing to-pressing2 text-mainGreen\">\n        <Login />\n    </div>\n</template>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n    <div class=\"... bg-gradient-to-r from-pressing to-pressing2 text-mainGreen\">\n        <Login />\n    </div>\n</template>\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"對element-plus覆寫定義"},"children":[{"type":"text","value":"對Element plus覆寫定義"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"這部分可以分為兩個情況做處理"}]},{"type":"element","tag":"h3","props":{"id":"在ui庫產生樣式庫前先修改定義的元素"},"children":[{"type":"text","value":"在UI庫產生樣式庫前，先修改定義的元素"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"比如要修改顏色中定義為primary的色碼。依照官方文檔去覆寫定義，在專案使用sass的情況下，可以獨立建立一支scss檔案。"}]},{"type":"element","tag":"code","props":{"code":"//elementPlusInit.scss\n@forward 'element-plus/theme-chalk/src/common/var.scss' with (\n    $colors: (\n        'primary': (\n            'base': #3bb071\n        )\n    )\n);\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//elementPlusInit.scss\n@forward 'element-plus/theme-chalk/src/common/var.scss' with (\n    $colors: (\n        'primary': (\n            'base': #3bb071\n        )\n    )\n);\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"而必須確保在專案在掛載Element plus樣式庫前，先執行這段scss檔的內容，在我目前使用Vite的情況下，是在vite.config.js中，設定如下。在理解上，是把這支scss檔指令/資料加到vite打包css的預處理流程中，而改變element-plus產生的樣式庫的結果。"}]},{"type":"element","tag":"code","props":{"code":"export default ({ mode }) => defineConfig({\n    //...(略) \n    css: {\n        preprocessorOptions: {\n            scss: {\n                additionalData: `@use \"@/assets/styles/elementPlusInit.scss\" as *;`\n            }\n        }\n    }\n})\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default ({ mode }) => defineConfig({\n    //...(略) \n    css: {\n        preprocessorOptions: {\n            scss: {\n                additionalData: `@use \"@/assets/styles/elementPlusInit.scss\" as *;`\n            }\n        }\n    }\n})\n\n"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在vite ^2.3.7上打包後\n這支預載scss定義的樣式會被重複在每一個分割的組件css中\n所以目前先採取只先把定義修改的指令在這支檔案，否則會有大量的重複樣式產生在開發和打包結果中。"}]}]},{"type":"element","tag":"h3","props":{"id":"在ui庫產生樣式庫後覆寫已經定義好的樣式"},"children":[{"type":"text","value":"在UI庫產生樣式庫後，覆寫已經定義好的樣式"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"這部分的實作，就是打開dev tool找到畫面上element-plus給組件配的樣式名稱，再做一次覆寫。而這邊的覆寫，還嘗試加入深/淺模式變化上，強制(!important)讓組件的樣式換上自定義的顏色(但可能還有更漂亮的作法?)。"}]},{"type":"element","tag":"code","props":{"code":".el-table {\n    background: var(--bg) !important;\n    color: var(--font-color) !important;\n    --el-table-bg-color: var(--bg) !important;\n    --el-table-tr-bg-color: var(--bg) !important;\n    --el-table-row-hover-bg-color: var(--bgHover) !important;\n}\n\n.el-table__expanded-cell[class*='cell'] {\n    padding: 10px 20px;\n}\n\n.el-table td,\n.el-table th {\n    padding: 4px;\n    font-weight: 400;\n}\n\n.el-breadcrumb__inner a {\n    color: var(--font-color) !important;\n}\n\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".el-table {\n    background: var(--bg) !important;\n    color: var(--font-color) !important;\n    --el-table-bg-color: var(--bg) !important;\n    --el-table-tr-bg-color: var(--bg) !important;\n    --el-table-row-hover-bg-color: var(--bgHover) !important;\n}\n\n.el-table__expanded-cell[class*='cell'] {\n    padding: 10px 20px;\n}\n\n.el-table td,\n.el-table th {\n    padding: 4px;\n    font-weight: 400;\n}\n\n.el-breadcrumb__inner a {\n    color: var(--font-color) !important;\n}\n\n"}]}]}]}]},"tags":"學習","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"前端ui設計規範引入"},"children":[{"type":"text","value":"前端UI設計規範引入"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用背景:"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nUI設計規範通常包含字體、字級、主配色與客製組件的樣式(style)。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在專案中，也經常會引入已經完善的樣式庫來妥善管理全站的樣式，像是tailwindCSS。同時，也會在使用前端框架的情況下，導入其他UI庫，像是vue3的Element plus，且這些UI組件通常也有自己需要倚賴的樣式庫。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"而這些需要倚賴的樣式庫，如果在專案有要求設計規範時，可以很方便產出符合UI設計規範的專案樣式庫。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"以下是預設使用sass的專案中，配置tailwindCSS和Element plus來增加或覆寫預設的樣式。"}]},{"type":"element","tag":"h2","props":{"id":"對tailwindcss增加定義"},"children":[{"type":"text","value":"對tailwindCSS增加定義"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"依照官方文檔建立tailwind.config.js中，加入需要客製定義的元素，tailwind就能在編譯後建立出相依這些元素的樣式。"}]},{"type":"element","tag":"code","props":{"code":"\nmodule.exports = {\n    mode: 'jit', //只編譯有使用到的樣式\n    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],\n    theme: {\n        //...(略)\n        colors:{\n            //...(略) \n            pressing: '#DBE9D8', //定義顏色與對應的色碼\n            pressing2: '#E0F2DE',\n            mainGreen: '#3bb071',\n            mainGreenDarker: '#b8d8c9',\n            secondColor: '#b8d8c9',\n        }\n    }\n}\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c1f181"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c1f181"},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"class":"ct-c48ed6"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c51c5f"},"children":[{"type":"text","value":"mode"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8570c6"},"children":[{"type":"text","value":"jit"}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-993a9c"},"children":[{"type":"text","value":"//只編譯有使用到的樣式"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c51c5f"},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8570c6"},"children":[{"type":"text","value":"./index.html"}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8570c6"},"children":[{"type":"text","value":"./src/**/*.{vue,js,ts,jsx,tsx}"}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c51c5f"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-427ddc"},"children":[{"type":"text","value":"//...(略)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-c51c5f"},"children":[{"type":"text","value":"colors"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-427ddc"},"children":[{"type":"text","value":"//...(略) "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-c51c5f"},"children":[{"type":"text","value":"pressing"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8570c6"},"children":[{"type":"text","value":"#DBE9D8"}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-993a9c"},"children":[{"type":"text","value":"//定義顏色與對應的色碼"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-c51c5f"},"children":[{"type":"text","value":"pressing2"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8570c6"},"children":[{"type":"text","value":"#E0F2DE"}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-c51c5f"},"children":[{"type":"text","value":"mainGreen"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8570c6"},"children":[{"type":"text","value":"#3bb071"}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-c51c5f"},"children":[{"type":"text","value":"mainGreenDarker"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8570c6"},"children":[{"type":"text","value":"#b8d8c9"}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-c51c5f"},"children":[{"type":"text","value":"secondColor"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8570c6"},"children":[{"type":"text","value":"#b8d8c9"}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在class中，就能使用如text-mainGreen的樣式改變字體顏色，也能使用from-pressing to-pressing2來讓背景的漸層樣式去對應到上段新定義的顏色。"}]},{"type":"element","tag":"code","props":{"code":"<template>\n    <div class=\"... bg-gradient-to-r from-pressing to-pressing2 text-mainGreen\">\n        <Login />\n    </div>\n</template>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-3ca173"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-0a272c"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-047b5a"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8570c6"},"children":[{"type":"text","value":"... bg-gradient-to-r from-pressing to-pressing2 text-mainGreen"}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-605150"},"children":[{"type":"text","value":"Login"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-0a272c"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-3ca173"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"對element-plus覆寫定義"},"children":[{"type":"text","value":"對Element plus覆寫定義"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"這部分可以分為兩個情況做處理"}]},{"type":"element","tag":"h3","props":{"id":"在ui庫產生樣式庫前先修改定義的元素"},"children":[{"type":"text","value":"在UI庫產生樣式庫前，先修改定義的元素"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"比如要修改顏色中定義為primary的色碼。依照官方文檔去覆寫定義，在專案使用sass的情況下，可以獨立建立一支scss檔案。"}]},{"type":"element","tag":"code","props":{"code":"//elementPlusInit.scss\n@forward 'element-plus/theme-chalk/src/common/var.scss' with (\n    $colors: (\n        'primary': (\n            'base': #3bb071\n        )\n    )\n);\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"//elementPlusInit"}]},{"type":"element","tag":"span","props":{"class":"ct-103c00"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3df5b0"},"children":[{"type":"text","value":"scss"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1ee316"},"children":[{"type":"text","value":"@forward"}]},{"type":"element","tag":"span","props":{"class":"ct-c48ed6"},"children":[{"type":"text","value":" 'element-plus/theme-chalk/src/common/var.scss' with ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c48ed6"},"children":[{"type":"text","value":"    $colors: ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c48ed6"},"children":[{"type":"text","value":"        'primary': ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c48ed6"},"children":[{"type":"text","value":"            'base': #3bb071"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c48ed6"},"children":[{"type":"text","value":"        )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c48ed6"},"children":[{"type":"text","value":"    )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c48ed6"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"而必須確保在專案在掛載Element plus樣式庫前，先執行這段scss檔的內容，在我目前使用Vite的情況下，是在vite.config.js中，設定如下。在理解上，是把這支scss檔指令/資料加到vite打包css的預處理流程中，而改變element-plus產生的樣式庫的結果。"}]},{"type":"element","tag":"code","props":{"code":"export default ({ mode }) => defineConfig({\n    //...(略) \n    css: {\n        preprocessorOptions: {\n            scss: {\n                additionalData: `@use \"@/assets/styles/elementPlusInit.scss\" as *;`\n            }\n        }\n    }\n})\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fce8a1"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-fe000c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fce8a1"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-fe000c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a4282"},"children":[{"type":"text","value":"({"}]},{"type":"element","tag":"span","props":{"class":"ct-fe000c"},"children":[{"type":"text","value":" mode "}]},{"type":"element","tag":"span","props":{"class":"ct-2a4282"},"children":[{"type":"text","value":"})"}]},{"type":"element","tag":"span","props":{"class":"ct-fe000c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a72900"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fe000c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ff24e4"},"children":[{"type":"text","value":"defineConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-fe000c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2a4282"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-52c25e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-427ddc"},"children":[{"type":"text","value":"//...(略) "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fe000c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c51c5f"},"children":[{"type":"text","value":"css"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-c51c5f"},"children":[{"type":"text","value":"preprocessorOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-c51c5f"},"children":[{"type":"text","value":"scss"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-c51c5f"},"children":[{"type":"text","value":"additionalData"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-8570c6"},"children":[{"type":"text","value":"@use \"@/assets/styles/elementPlusInit.scss\" as *;"}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2a4282"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-fe000c"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在vite ^2.3.7上打包後\n這支預載scss定義的樣式會被重複在每一個分割的組件css中\n所以目前先採取只先把定義修改的指令在這支檔案，否則會有大量的重複樣式產生在開發和打包結果中。"}]}]},{"type":"element","tag":"h3","props":{"id":"在ui庫產生樣式庫後覆寫已經定義好的樣式"},"children":[{"type":"text","value":"在UI庫產生樣式庫後，覆寫已經定義好的樣式"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"這部分的實作，就是打開dev tool找到畫面上element-plus給組件配的樣式名稱，再做一次覆寫。而這邊的覆寫，還嘗試加入深/淺模式變化上，強制(!important)讓組件的樣式換上自定義的顏色(但可能還有更漂亮的作法?)。"}]},{"type":"element","tag":"code","props":{"code":".el-table {\n    background: var(--bg) !important;\n    color: var(--font-color) !important;\n    --el-table-bg-color: var(--bg) !important;\n    --el-table-tr-bg-color: var(--bg) !important;\n    --el-table-row-hover-bg-color: var(--bgHover) !important;\n}\n\n.el-table__expanded-cell[class*='cell'] {\n    padding: 10px 20px;\n}\n\n.el-table td,\n.el-table th {\n    padding: 4px;\n    font-weight: 400;\n}\n\n.el-breadcrumb__inner a {\n    color: var(--font-color) !important;\n}\n\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-103c00"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3df5b0"},"children":[{"type":"text","value":"el-table"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-efc5d4"},"children":[{"type":"text","value":"background"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-87d80a"},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fe000c"},"children":[{"type":"text","value":"--bg"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-18117a"},"children":[{"type":"text","value":"!important"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-efc5d4"},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-87d80a"},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fe000c"},"children":[{"type":"text","value":"--font-color"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-18117a"},"children":[{"type":"text","value":"!important"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-103c00"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3df5b0"},"children":[{"type":"text","value":"el-table__expanded-cell"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-047b5a"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-fce8a1"},"children":[{"type":"text","value":"*="}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8570c6"},"children":[{"type":"text","value":"cell"}]},{"type":"element","tag":"span","props":{"class":"ct-3c28b8"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c48ed6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-5cb603"},"children":[{"type":"text","value":"padding"}]},{"type":"element","tag":"span","props":{"class":"ct-c48ed6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c6827f"},"children":[{"type":"text","value":"20"}]},{"type":"element","tag":"span","props":{"class":"ct-f48ecc"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-103c00"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3df5b0"},"children":[{"type":"text","value":"el-table"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6efb12"},"children":[{"type":"text","value":"td"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-103c00"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3df5b0"},"children":[{"type":"text","value":"el-table"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6efb12"},"children":[{"type":"text","value":"th"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c48ed6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-5cb603"},"children":[{"type":"text","value":"padding"}]},{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-efc5d4"},"children":[{"type":"text","value":"font-weight"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-394fe5"},"children":[{"type":"text","value":"400"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-103c00"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3df5b0"},"children":[{"type":"text","value":"el-breadcrumb__inner"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6efb12"},"children":[{"type":"text","value":"a"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-efc5d4"},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-87d80a"},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fe000c"},"children":[{"type":"text","value":"--font-color"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-8ee46c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-18117a"},"children":[{"type":"text","value":"!important"}]},{"type":"element","tag":"span","props":{"class":"ct-9f9149"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-43901d"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-394fe5{color:#F78C6C}.ct-6efb12{color:#FFCB6B}.ct-f48ecc{color:#F78C6C}.ct-c6827f{color:#F78C6C}.ct-5cb603{color:#B2CCD6}.ct-18117a{color:#F78C6C}.ct-87d80a{color:#82AAFF}.ct-efc5d4{color:#B2CCD6}.ct-52c25e{color:#89DDFF}.ct-ff24e4{color:#82AAFF}.ct-a72900{color:#C792EA}.ct-2a4282{color:#89DDFF}.ct-fe000c{color:#A6ACCD}.ct-fce8a1{color:#89DDFF}.ct-1ee316{color:#89DDFF}.ct-3df5b0{color:#FFCB6B}.ct-103c00{color:#89DDFF}.ct-605150{color:#F07178}.ct-047b5a{color:#C792EA}.ct-0a272c{color:#F07178}.ct-3ca173{color:#F07178}.ct-427ddc{color:#676E95}.ct-993a9c{color:#676E95}.ct-8570c6{color:#C3E88D}.ct-3c28b8{color:#89DDFF}.ct-9f9149{color:#89DDFF}.ct-c51c5f{color:#F07178}.ct-8ee46c{color:#A6ACCD}.ct-c48ed6{color:#A6ACCD}.ct-43901d{color:#89DDFF}.ct-c1f181{color:#89DDFF}.dark .ct-c1f181{color:#79C0FF}.dark .ct-43901d{color:#C9D1D9}.dark .ct-c48ed6{color:#C9D1D9}.dark .ct-8ee46c{color:#C9D1D9}.dark .ct-c51c5f{color:#C9D1D9}.dark .ct-9f9149{color:#C9D1D9}.dark .ct-3c28b8{color:#A5D6FF}.dark .ct-8570c6{color:#A5D6FF}.dark .ct-993a9c{color:#8B949E}.dark .ct-427ddc{color:#8B949E}.dark .ct-3ca173{color:#7EE787}.dark .ct-0a272c{color:#7EE787}.dark .ct-047b5a{color:#79C0FF}.dark .ct-605150{color:#FFA198}.dark .ct-103c00{color:#79C0FF}.dark .ct-3df5b0{color:#79C0FF}.dark .ct-1ee316{color:#FF7B72}.dark .ct-fce8a1{color:#FF7B72}.dark .ct-fe000c{color:#FFA657}.dark .ct-2a4282{color:#FFA657}.dark .ct-a72900{color:#FF7B72}.dark .ct-ff24e4{color:#D2A8FF}.dark .ct-52c25e{color:#FFA657}.dark .ct-efc5d4{color:#79C0FF}.dark .ct-87d80a{color:#79C0FF}.dark .ct-18117a{color:#FF7B72}.dark .ct-5cb603{color:#79C0FF}.dark .ct-c6827f{color:#79C0FF}.dark .ct-f48ecc{color:#FF7B72}.dark .ct-6efb12{color:#7EE787}.dark .ct-394fe5{color:#79C0FF}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"對tailwindcss增加定義","depth":2,"text":"對tailwindCSS增加定義"},{"id":"對element-plus覆寫定義","depth":2,"text":"對Element plus覆寫定義","children":[{"id":"在ui庫產生樣式庫前先修改定義的元素","depth":3,"text":"在UI庫產生樣式庫前，先修改定義的元素"},{"id":"在ui庫產生樣式庫後覆寫已經定義好的樣式","depth":3,"text":"在UI庫產生樣式庫後，覆寫已經定義好的樣式"}]}]}},"_type":"markdown","_id":"content:1.blog:2.use vite build a UI Package:1.GT-UI design rules.md","_source":"content","_file":"1.blog/2.use vite build a UI Package/1.GT-UI design rules.md","_extension":"md"},{"_path":"/blog/use-vite-build-a-ui-package/gt-ui-package","_draft":false,"_partial":false,"_empty":false,"title":"GT-UI Package指令","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"gt-ui-package指令"},"children":[{"type":"text","value":"GT-UI Package指令"}]},{"type":"element","tag":"h2","props":{"id":"倉庫"},"children":[{"type":"text","value":"倉庫"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/vue-ui","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Github"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://gitlab.greattree.com.tw/Jason0103/gt-ui/-/tree/main","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"GitLab"}]}]},{"type":"element","tag":"h2","props":{"id":"流程"},"children":[{"type":"text","value":"流程"}]},{"type":"element","tag":"h3","props":{"id":"打包指令"},"children":[{"type":"text","value":"打包指令"}]},{"type":"element","tag":"code","props":{"code":"npm run build-GT \nnpm run build-Qua\nnpm run build-Ele\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm run build-GT \nnpm run build-Qua\nnpm run build-Ele\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"發佈指令"},"children":[{"type":"text","value":"發佈指令"}]},{"type":"element","tag":"code","props":{"code":"## 需要輸入帳號 密碼 電子信箱\nnpm login\n\nnpm publish\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"## 需要輸入帳號 密碼 電子信箱\nnpm login\n\nnpm publish\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"版本控制"},"children":[{"type":"text","value":"版本控制"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"發佈版本的commit，也打上對應的版本號tag"}]},{"type":"element","tag":"h3","props":{"id":"tag指令"},"children":[{"type":"text","value":"Tag指令"}]},{"type":"element","tag":"code","props":{"code":"## tag目錄\ngit tag -l\n\n## tag新增\ngit tag -a v0.0.xx\n\n## tag刪除\ngit tag -d v0.0.xx\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"## tag目錄\ngit tag -l\n\n## tag新增\ngit tag -a v0.0.xx\n\n## tag刪除\ngit tag -d v0.0.xx\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/3aPVxxB.jpg"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"關於私有庫文章"},"children":[{"type":"text","value":"關於私有庫文章"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://zhaomenghuan.js.org/blog/npm-private-repository-verdaccio.html#npm-%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93%E7%9A%84%E5%A5%BD%E5%A4%84","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"私有倉的選項"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://ithelp.ithome.com.tw/articles/10205616","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"NPM: verdaccio"}]}]}]}]},"tags":"npm git","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"gt-ui-package指令"},"children":[{"type":"text","value":"GT-UI Package指令"}]},{"type":"element","tag":"h2","props":{"id":"倉庫"},"children":[{"type":"text","value":"倉庫"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/vue-ui","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Github"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://gitlab.greattree.com.tw/Jason0103/gt-ui/-/tree/main","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"GitLab"}]}]},{"type":"element","tag":"h2","props":{"id":"流程"},"children":[{"type":"text","value":"流程"}]},{"type":"element","tag":"h3","props":{"id":"打包指令"},"children":[{"type":"text","value":"打包指令"}]},{"type":"element","tag":"code","props":{"code":"npm run build-GT \nnpm run build-Qua\nnpm run build-Ele\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4ed124"},"children":[{"type":"text","value":"npm run build-GT "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4ed124"},"children":[{"type":"text","value":"npm run build-Qua"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4ed124"},"children":[{"type":"text","value":"npm run build-Ele"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"發佈指令"},"children":[{"type":"text","value":"發佈指令"}]},{"type":"element","tag":"code","props":{"code":"## 需要輸入帳號 密碼 電子信箱\nnpm login\n\nnpm publish\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-63333a"},"children":[{"type":"text","value":"## 需要輸入帳號 密碼 電子信箱"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4ed124"},"children":[{"type":"text","value":"npm login"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4ed124"},"children":[{"type":"text","value":"npm publish"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"版本控制"},"children":[{"type":"text","value":"版本控制"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"發佈版本的commit，也打上對應的版本號tag"}]},{"type":"element","tag":"h3","props":{"id":"tag指令"},"children":[{"type":"text","value":"Tag指令"}]},{"type":"element","tag":"code","props":{"code":"## tag目錄\ngit tag -l\n\n## tag新增\ngit tag -a v0.0.xx\n\n## tag刪除\ngit tag -d v0.0.xx\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-63333a"},"children":[{"type":"text","value":"## tag目錄"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4ed124"},"children":[{"type":"text","value":"git tag -l"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-63333a"},"children":[{"type":"text","value":"## tag新增"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4ed124"},"children":[{"type":"text","value":"git tag -a v0.0.xx"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-63333a"},"children":[{"type":"text","value":"## tag刪除"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4ed124"},"children":[{"type":"text","value":"git tag -d v0.0.xx"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/3aPVxxB.jpg"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"關於私有庫文章"},"children":[{"type":"text","value":"關於私有庫文章"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://zhaomenghuan.js.org/blog/npm-private-repository-verdaccio.html#npm-%E7%A7%81%E6%9C%89%E4%BB%93%E5%BA%93%E7%9A%84%E5%A5%BD%E5%A4%84","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"私有倉的選項"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://ithelp.ithome.com.tw/articles/10205616","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"NPM: verdaccio"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-63333a{color:#676E95}.ct-4ed124{color:#A6ACCD}.dark .ct-4ed124{color:#C9D1D9}.dark .ct-63333a{color:#8B949E}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"倉庫","depth":2,"text":"倉庫"},{"id":"流程","depth":2,"text":"流程","children":[{"id":"打包指令","depth":3,"text":"打包指令"},{"id":"發佈指令","depth":3,"text":"發佈指令"}]},{"id":"版本控制","depth":2,"text":"版本控制","children":[{"id":"tag指令","depth":3,"text":"Tag指令"},{"id":"關於私有庫文章","depth":3,"text":"關於私有庫文章"}]}]}},"_type":"markdown","_id":"content:1.blog:2.use vite build a UI Package:2.GT-UI Package.md","_source":"content","_file":"1.blog/2.use vite build a UI Package/2.GT-UI Package.md","_extension":"md"},{"_path":"/blog/use-vite-build-a-ui-package/vitest","_draft":false,"_partial":false,"_empty":false,"title":"UI元件單元測試","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"ui元件單元測試"},"children":[{"type":"text","value":"UI元件單元測試"}]},{"type":"element","tag":"h2","props":{"id":"概念"},"children":[{"type":"text","value":"概念"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在給予特定條件的情形下，有期待的對應產出。例如，對函式的回傳、元件的渲染結果進行確認。優點是可以把規格轉換成測試腳本，確保修改/迭代過程的正確性。"}]},{"type":"element","tag":"h2","props":{"id":"工具"},"children":[{"type":"text","value":"工具"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"常見的單元測試的庫:Jest、vitest"}]},{"type":"element","tag":"h2","props":{"id":"安裝vitest"},"children":[{"type":"text","value":"安裝vitest"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.安裝指令"}]},{"type":"element","tag":"code","props":{"code":"npm install -D vitest\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install -D vitest\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://vitest.dev/guide/#adding-vitest-to-your-project","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vitest doc"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2.新增指令與參數"}]},{"type":"element","tag":"code","props":{"code":"//package.json\n  \"scripts\": {\n    \"test:unit\": \"vitest --environment jsdom --coverage\"\n  },\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//package.json\n  \"scripts\": {\n    \"test:unit\": \"vitest --environment jsdom --coverage\"\n  },\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"設定為測試UI元件的參數  "},{"type":"element","tag":"a","props":{"href":"https://vitest.dev/config/#environment","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vitest --environment doc"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"設定為測試相關連的檔案模式 "},{"type":"element","tag":"a","props":{"href":"https://vitest.dev/config/#coverage","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vitest --coverage"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3.新增測試腳本檔\n在__test__資料夾下，以xxx.spec.js命名\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/UasFjlM.jpg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在vite設定中也要把測試檔案的路徑加入。"}]},{"type":"element","tag":"code","props":{"code":"//vite.confit.js\nimport { defineConfig } from 'vite';\nexport default ({mode}) => {\n    return defineConfig({\n        test: {\n          global: true,\n          environment: 'jsdom',\n          includeSource: ['src/components/__test__/*.spec.js'],\n        },\n    })\n}\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//vite.confit.js\nimport { defineConfig } from 'vite';\nexport default ({mode}) => {\n    return defineConfig({\n        test: {\n          global: true,\n          environment: 'jsdom',\n          includeSource: ['src/components/__test__/*.spec.js'],\n        },\n    })\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"語法"},"children":[{"type":"text","value":"語法"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"常見的單元測試語法"}]},{"type":"element","tag":"code","props":{"code":"import { render, screen } from '@testing-library/vue';\nimport { describe, it, expect } from 'vitest';\nimport GButton from '../GButton.vue';\ndescribe('測試GButton', () => {\n    it('項目1 渲染是否正常',async()=>{\n        const wrapper = render(GButton);\n        expect(wrapper.html()).toContain('gt-btn');\n    })\n})\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { render, screen } from '@testing-library/vue';\nimport { describe, it, expect } from 'vitest';\nimport GButton from '../GButton.vue';\ndescribe('測試GButton', () => {\n    it('項目1 渲染是否正常',async()=>{\n        const wrapper = render(GButton);\n        expect(wrapper.html()).toContain('gt-btn');\n    })\n})\n"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"describe 用來描述測試項目的群組"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"it 測試項目"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"render 渲染函式"}]}]},{"type":"element","tag":"h2","props":{"id":"範例測試"},"children":[{"type":"text","value":"範例測試"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"這個範例中，是以GT UI的按鈕原件作為測試對象。預期它渲染在畫面後，html結構中正常情況在class包含了\"gt-btn\"。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/FM3ePmy.jpg"},"children":[]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"假如，日後在修改該元件檔案時，不小心把class名稱變更gt-btnrrr，則會在測試時提示錯誤。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/7wbHHNf.jpg"},"children":[]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"延伸，當元件可以依據傳入的屬性有更多渲染的情境出現，比如要渲染一個有屬性yellow的按鈕，同時預設是沒有邊框線的，這時就有兩個預期的渲染結果。"}]},{"type":"element","tag":"code","props":{"code":"\nit('項目2 渲染屬性yellow按鈕', async () => {\n    const wrapper = render(GButton, {\n      props: { type: 'yellow' },\n    });\n    expect(wrapper.html()).toContain('gt-btn-yellow');\n    expect(wrapper.html()).toContain('gt-btn-round-no-border');\n});\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\nit('項目2 渲染屬性yellow按鈕', async () => {\n    const wrapper = render(GButton, {\n      props: { type: 'yellow' },\n    });\n    expect(wrapper.html()).toContain('gt-btn-yellow');\n    expect(wrapper.html()).toContain('gt-btn-round-no-border');\n});\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"測試覆蓋率"},"children":[{"type":"text","value":"測試覆蓋率"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在gt-button.spec.js中，共計我寫了5個測試項目，vitest也會列出在這個測試過程使用到的檔案中，語句覆蓋率為91.5，且其他沒被覆蓋的行數(紅字)。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/9M4jfxt.jpg"},"children":[]}]},{"type":"element","tag":"info","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"覆蓋率報告"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"% Stmts (語句覆蓋率) 程式碼中的每個語句是否皆有執行。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"% branch(分支覆蓋率) 當程式碼中有分支時，例如 if-else，分支內容是否皆有執行。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"% Funcs(功能覆蓋率) 程式碼中的每個功能是否皆有執行。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"% Lines(行覆蓋率) 指的是程式碼文件中的每個可執行行，是否皆有執行。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Uncovered Line #s 未執行程式碼於檔案中的行數"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"ui元件單元測試"},"children":[{"type":"text","value":"UI元件單元測試"}]},{"type":"element","tag":"h2","props":{"id":"概念"},"children":[{"type":"text","value":"概念"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在給予特定條件的情形下，有期待的對應產出。例如，對函式的回傳、元件的渲染結果進行確認。優點是可以把規格轉換成測試腳本，確保修改/迭代過程的正確性。"}]},{"type":"element","tag":"h2","props":{"id":"工具"},"children":[{"type":"text","value":"工具"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"常見的單元測試的庫:Jest、vitest"}]},{"type":"element","tag":"h2","props":{"id":"安裝vitest"},"children":[{"type":"text","value":"安裝vitest"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.安裝指令"}]},{"type":"element","tag":"code","props":{"code":"npm install -D vitest\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1632b"},"children":[{"type":"text","value":"npm install -D vitest"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://vitest.dev/guide/#adding-vitest-to-your-project","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vitest doc"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2.新增指令與參數"}]},{"type":"element","tag":"code","props":{"code":"//package.json\n  \"scripts\": {\n    \"test:unit\": \"vitest --environment jsdom --coverage\"\n  },\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0b44bf"},"children":[{"type":"text","value":"//package.json"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"scripts"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a476f2"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-15ebc3"},"children":[{"type":"text","value":"test:unit"}]},{"type":"element","tag":"span","props":{"class":"ct-a476f2"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"vitest --environment jsdom --coverage"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":","}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"設定為測試UI元件的參數  "},{"type":"element","tag":"a","props":{"href":"https://vitest.dev/config/#environment","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vitest --environment doc"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"設定為測試相關連的檔案模式 "},{"type":"element","tag":"a","props":{"href":"https://vitest.dev/config/#coverage","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vitest --coverage"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3.新增測試腳本檔\n在__test__資料夾下，以xxx.spec.js命名\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/UasFjlM.jpg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在vite設定中也要把測試檔案的路徑加入。"}]},{"type":"element","tag":"code","props":{"code":"//vite.confit.js\nimport { defineConfig } from 'vite';\nexport default ({mode}) => {\n    return defineConfig({\n        test: {\n          global: true,\n          environment: 'jsdom',\n          includeSource: ['src/components/__test__/*.spec.js'],\n        },\n    })\n}\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0b44bf"},"children":[{"type":"text","value":"//vite.confit.js"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8d1de"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"defineConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e8d1de"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"vite"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8d1de"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-3ac4a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e8d1de"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-3ac4a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3cb509"},"children":[{"type":"text","value":"({"}]},{"type":"element","tag":"span","props":{"class":"ct-3ac4a6"},"children":[{"type":"text","value":"mode"}]},{"type":"element","tag":"span","props":{"class":"ct-3cb509"},"children":[{"type":"text","value":"})"}]},{"type":"element","tag":"span","props":{"class":"ct-3ac4a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2af554"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-3ac4a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e8d1de"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"defineConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"        test"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"          global"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-092475"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"          environment"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"jsdom"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"          includeSource"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"src/components/__test__/*.spec.js"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7fc561"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"語法"},"children":[{"type":"text","value":"語法"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"常見的單元測試語法"}]},{"type":"element","tag":"code","props":{"code":"import { render, screen } from '@testing-library/vue';\nimport { describe, it, expect } from 'vitest';\nimport GButton from '../GButton.vue';\ndescribe('測試GButton', () => {\n    it('項目1 渲染是否正常',async()=>{\n        const wrapper = render(GButton);\n        expect(wrapper.html()).toContain('gt-btn');\n    })\n})\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8d1de"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"render"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"screen"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e8d1de"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"@testing-library/vue"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8d1de"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"describe"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"it"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"expect"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e8d1de"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"vitest"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e8d1de"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" GButton "}]},{"type":"element","tag":"span","props":{"class":"ct-e8d1de"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"../GButton.vue"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"describe"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"測試GButton"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2af554"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"it"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"項目1 渲染是否正常"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-2af554"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-2af554"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-2af554"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6aa256"},"children":[{"type":"text","value":"wrapper"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e8d1de"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"render"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"GButton"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"expect"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"wrapper"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"html"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"())"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"toContain"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"gt-btn"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"describe 用來描述測試項目的群組"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"it 測試項目"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"render 渲染函式"}]}]},{"type":"element","tag":"h2","props":{"id":"範例測試"},"children":[{"type":"text","value":"範例測試"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"這個範例中，是以GT UI的按鈕原件作為測試對象。預期它渲染在畫面後，html結構中正常情況在class包含了\"gt-btn\"。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/FM3ePmy.jpg"},"children":[]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"假如，日後在修改該元件檔案時，不小心把class名稱變更gt-btnrrr，則會在測試時提示錯誤。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/7wbHHNf.jpg"},"children":[]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"延伸，當元件可以依據傳入的屬性有更多渲染的情境出現，比如要渲染一個有屬性yellow的按鈕，同時預設是沒有邊框線的，這時就有兩個預期的渲染結果。"}]},{"type":"element","tag":"code","props":{"code":"\nit('項目2 渲染屬性yellow按鈕', async () => {\n    const wrapper = render(GButton, {\n      props: { type: 'yellow' },\n    });\n    expect(wrapper.html()).toContain('gt-btn-yellow');\n    expect(wrapper.html()).toContain('gt-btn-round-no-border');\n});\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"it"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"項目2 渲染屬性yellow按鈕"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2af554"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2af554"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-2af554"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6aa256"},"children":[{"type":"text","value":"wrapper"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e8d1de"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"render"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"GButton"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"      props"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" type"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"yellow"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"expect"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"wrapper"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"html"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"())"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"toContain"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"gt-btn-yellow"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"expect"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":"wrapper"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"html"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"())"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ffcf7b"},"children":[{"type":"text","value":"toContain"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-bf8166"},"children":[{"type":"text","value":"gt-btn-round-no-border"}]},{"type":"element","tag":"span","props":{"class":"ct-2b32cd"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-d8bc52"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-fb601c"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-74b943"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"測試覆蓋率"},"children":[{"type":"text","value":"測試覆蓋率"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在gt-button.spec.js中，共計我寫了5個測試項目，vitest也會列出在這個測試過程使用到的檔案中，語句覆蓋率為91.5，且其他沒被覆蓋的行數(紅字)。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/9M4jfxt.jpg"},"children":[]}]},{"type":"element","tag":"info","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"覆蓋率報告"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"% Stmts (語句覆蓋率) 程式碼中的每個語句是否皆有執行。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"% branch(分支覆蓋率) 當程式碼中有分支時，例如 if-else，分支內容是否皆有執行。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"% Funcs(功能覆蓋率) 程式碼中的每個功能是否皆有執行。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"% Lines(行覆蓋率) 指的是程式碼文件中的每個可執行行，是否皆有執行。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Uncovered Line #s 未執行程式碼於檔案中的行數"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-6aa256{color:#A6ACCD}.ct-7fc561{color:#89DDFF}.ct-092475{color:#FF9CAC}.ct-ffcf7b{color:#82AAFF}.ct-2af554{color:#C792EA}.ct-3cb509{color:#89DDFF}.ct-3ac4a6{color:#A6ACCD}.ct-d8bc52{color:#F07178}.ct-e8d1de{color:#89DDFF}.ct-15ebc3{color:#C792EA}.ct-a476f2{color:#89DDFF}.ct-74b943{color:#89DDFF}.ct-bf8166{color:#C3E88D}.ct-2b32cd{color:#89DDFF}.ct-fb601c{color:#A6ACCD}.ct-0b44bf{color:#676E95}.ct-f1632b{color:#A6ACCD}.dark .ct-f1632b{color:#C9D1D9}.dark .ct-0b44bf{color:#8B949E}.dark .ct-fb601c{color:#C9D1D9}.dark .ct-2b32cd{color:#A5D6FF}.dark .ct-bf8166{color:#A5D6FF}.dark .ct-74b943{color:#C9D1D9}.dark .ct-a476f2{color:#79C0FF}.dark .ct-15ebc3{color:#79C0FF}.dark .ct-e8d1de{color:#FF7B72}.dark .ct-d8bc52{color:#C9D1D9}.dark .ct-3ac4a6{color:#FFA657}.dark .ct-3cb509{color:#FFA657}.dark .ct-2af554{color:#FF7B72}.dark .ct-ffcf7b{color:#D2A8FF}.dark .ct-092475{color:#79C0FF}.dark .ct-7fc561{color:#C9D1D9}.dark .ct-6aa256{color:#79C0FF}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"概念","depth":2,"text":"概念"},{"id":"工具","depth":2,"text":"工具"},{"id":"安裝vitest","depth":2,"text":"安裝vitest"},{"id":"語法","depth":2,"text":"語法"},{"id":"範例測試","depth":2,"text":"範例測試"},{"id":"測試覆蓋率","depth":2,"text":"測試覆蓋率"}]}},"_type":"markdown","_id":"content:1.blog:2.use vite build a UI Package:3.Vitest.md","_source":"content","_file":"1.blog/2.use vite build a UI Package/3.Vitest.md","_extension":"md"},{"_path":"/blog/use-vite-build-a-ui-package/vite-build","_draft":false,"_partial":false,"_empty":false,"title":"Vite build config","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vite-build-config"},"children":[{"type":"text","value":"Vite build config"}]},{"type":"element","tag":"h2","props":{"id":"情境一vite-build的chunk體積過大"},"children":[{"type":"text","value":"情境一:vite build的chunk體積過大"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"隨著專案內容的增加，在打包/分檔的策略上必須自行添加，否則會出現像截圖的錯誤訊息，單一個的chunk體積過大。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/WLC92uq.jpg"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"對應的優化"},"children":[{"type":"text","value":"對應的優化"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"依照提示的build.rollupOptions.output.manualChunks來建立規則。當倚賴的id包含node_modules時可以理解為這是專案中使用到的其他npm開源package，所以可以獨立成一個chunk，並只擷取其package name作為其"},{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":"，這樣就不會把倚賴的package打包在一起。"}]},{"type":"element","tag":"code","props":{"code":"//vite.config.js\nexport default ({ mode }) => {\n    const config ={\n        build : {\n          outDir: './dist',\n          chunkSizeWarningLimit: 1600,\n          rollupOptions: {\n            output: {\n              chunkFileNames: 'assets/js/[name]-[hash].js',\n              assetFileNames: 'assets/static/[name]-[hash].[ext]',\n              manualChunks(id) {\n                //也可以依據需求，再把指定的倚賴做分檔\n                if (id.includes('node_modules')) {\n                  return id.toString().split('node_modules/')[1].split('/')[0].toString();\n                }\n              },\n            },\n          },\n        };\n    }\n    \n}\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//vite.config.js\nexport default ({ mode }) => {\n    const config ={\n        build : {\n          outDir: './dist',\n          chunkSizeWarningLimit: 1600,\n          rollupOptions: {\n            output: {\n              chunkFileNames: 'assets/js/[name]-[hash].js',\n              assetFileNames: 'assets/static/[name]-[hash].[ext]',\n              manualChunks(id) {\n                //也可以依據需求，再把指定的倚賴做分檔\n                if (id.includes('node_modules')) {\n                  return id.toString().split('node_modules/')[1].split('/')[0].toString();\n                }\n              },\n            },\n          },\n        };\n    }\n    \n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://juejin.cn/post/7119455615840092173","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"參考文章"}]}]},{"type":"element","tag":"h3","props":{"id":"切分後的結果"},"children":[{"type":"text","value":"切分後的結果"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/FSL45my.jpg"},"children":[]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vite-build-config"},"children":[{"type":"text","value":"Vite build config"}]},{"type":"element","tag":"h2","props":{"id":"情境一vite-build的chunk體積過大"},"children":[{"type":"text","value":"情境一:vite build的chunk體積過大"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"隨著專案內容的增加，在打包/分檔的策略上必須自行添加，否則會出現像截圖的錯誤訊息，單一個的chunk體積過大。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/WLC92uq.jpg"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"對應的優化"},"children":[{"type":"text","value":"對應的優化"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"依照提示的build.rollupOptions.output.manualChunks來建立規則。當倚賴的id包含node_modules時可以理解為這是專案中使用到的其他npm開源package，所以可以獨立成一個chunk，並只擷取其package name作為其"},{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":"，這樣就不會把倚賴的package打包在一起。"}]},{"type":"element","tag":"code","props":{"code":"//vite.config.js\nexport default ({ mode }) => {\n    const config ={\n        build : {\n          outDir: './dist',\n          chunkSizeWarningLimit: 1600,\n          rollupOptions: {\n            output: {\n              chunkFileNames: 'assets/js/[name]-[hash].js',\n              assetFileNames: 'assets/static/[name]-[hash].[ext]',\n              manualChunks(id) {\n                //也可以依據需求，再把指定的倚賴做分檔\n                if (id.includes('node_modules')) {\n                  return id.toString().split('node_modules/')[1].split('/')[0].toString();\n                }\n              },\n            },\n          },\n        };\n    }\n    \n}\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-330e3a"},"children":[{"type":"text","value":"//vite.config.js"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-658112"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-8eda64"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-658112"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-8eda64"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9a04e0"},"children":[{"type":"text","value":"({"}]},{"type":"element","tag":"span","props":{"class":"ct-8eda64"},"children":[{"type":"text","value":" mode "}]},{"type":"element","tag":"span","props":{"class":"ct-9a04e0"},"children":[{"type":"text","value":"})"}]},{"type":"element","tag":"span","props":{"class":"ct-8eda64"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0f21c4"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8eda64"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-79df08"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c9c94f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-79df08"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-187e2b"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-79df08"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e7a0d6"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9eb10c"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"        build "}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"          outDir"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d3b449"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd830"},"children":[{"type":"text","value":"./dist"}]},{"type":"element","tag":"span","props":{"class":"ct-d3b449"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"          chunkSizeWarningLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-580d6b"},"children":[{"type":"text","value":"1600"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"          rollupOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"            output"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"              chunkFileNames"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d3b449"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd830"},"children":[{"type":"text","value":"assets/js/[name]-[hash].js"}]},{"type":"element","tag":"span","props":{"class":"ct-d3b449"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"              assetFileNames"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d3b449"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd830"},"children":[{"type":"text","value":"assets/static/[name]-[hash].[ext]"}]},{"type":"element","tag":"span","props":{"class":"ct-d3b449"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9eb10c"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-330e3a"},"children":[{"type":"text","value":"//也可以依據需求，再把指定的倚賴做分檔"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-658112"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-c75411"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72ec87"},"children":[{"type":"text","value":"includes"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d3b449"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd830"},"children":[{"type":"text","value":"node_modules"}]},{"type":"element","tag":"span","props":{"class":"ct-d3b449"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":")) "}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"                  "}]},{"type":"element","tag":"span","props":{"class":"ct-658112"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c75411"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72ec87"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72ec87"},"children":[{"type":"text","value":"split"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d3b449"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd830"},"children":[{"type":"text","value":"node_modules/"}]},{"type":"element","tag":"span","props":{"class":"ct-d3b449"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":")["}]},{"type":"element","tag":"span","props":{"class":"ct-580d6b"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72ec87"},"children":[{"type":"text","value":"split"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d3b449"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd830"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-d3b449"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":")["}]},{"type":"element","tag":"span","props":{"class":"ct-580d6b"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72ec87"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"              "}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-de3993"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0aceab"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-79df08"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9eb10c"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://juejin.cn/post/7119455615840092173","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"參考文章"}]}]},{"type":"element","tag":"h3","props":{"id":"切分後的結果"},"children":[{"type":"text","value":"切分後的結果"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/FSL45my.jpg"},"children":[]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-72ec87{color:#82AAFF}.ct-c75411{color:#A6ACCD}.ct-580d6b{color:#F78C6C}.ct-5cd830{color:#C3E88D}.ct-d3b449{color:#89DDFF}.ct-de3993{color:#F07178}.ct-9eb10c{color:#89DDFF}.ct-e7a0d6{color:#89DDFF}.ct-187e2b{color:#A6ACCD}.ct-c9c94f{color:#C792EA}.ct-79df08{color:#F07178}.ct-0aceab{color:#89DDFF}.ct-0f21c4{color:#C792EA}.ct-9a04e0{color:#89DDFF}.ct-8eda64{color:#A6ACCD}.ct-658112{color:#89DDFF}.ct-330e3a{color:#676E95}.dark .ct-330e3a{color:#8B949E}.dark .ct-658112{color:#FF7B72}.dark .ct-8eda64{color:#FFA657}.dark .ct-9a04e0{color:#FFA657}.dark .ct-0f21c4{color:#FF7B72}.dark .ct-0aceab{color:#C9D1D9}.dark .ct-79df08{color:#C9D1D9}.dark .ct-c9c94f{color:#FF7B72}.dark .ct-187e2b{color:#79C0FF}.dark .ct-e7a0d6{color:#FF7B72}.dark .ct-9eb10c{color:#C9D1D9}.dark .ct-de3993{color:#C9D1D9}.dark .ct-d3b449{color:#A5D6FF}.dark .ct-5cd830{color:#A5D6FF}.dark .ct-580d6b{color:#79C0FF}.dark .ct-c75411{color:#C9D1D9}.dark .ct-72ec87{color:#D2A8FF}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"情境一vite-build的chunk體積過大","depth":2,"text":"情境一:vite build的chunk體積過大","children":[{"id":"對應的優化","depth":3,"text":"對應的優化"},{"id":"切分後的結果","depth":3,"text":"切分後的結果"}]}]}},"_type":"markdown","_id":"content:1.blog:2.use vite build a UI Package:4.vite build.md","_source":"content","_file":"1.blog/2.use vite build a UI Package/4.vite build.md","_extension":"md"},{"_path":"/blog/use-vite-build-a-ui-package/gen-doc","_draft":false,"_partial":false,"_empty":false,"title":"自動生成demo文件","description":"在新的 GT UI 檔案結構中，packages 資料夾內包含了各元件的資料夾，這相對之前的改變是要讓展示的代碼分割出來，同時也是為了能自動化生成匯出檔做的安排，這能讓日後對相關的維護和開發容易。\n這裡的匯出檔(packages/insex.js)，即是透過模板和 list.json 的資料去生成。\n","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"自動生成demo文件"},"children":[{"type":"text","value":"自動生成demo文件"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在新的 GT UI 檔案結構中，packages 資料夾內包含了各元件的資料夾，這相對之前的改變是要讓展示的代碼分割出來，同時也是為了能自動化生成匯出檔做的安排，這能讓日後對相關的維護和開發容易。\n這裡的匯出檔(packages/insex.js)，即是透過模板和 list.json 的資料去生成。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/BZSxXhV.jpg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"展示頁的畫面，元件的效果和開發者的代碼可以一同顯示，也是透過路由參數改變後去對應該元件的 dmeo.vue 檔。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/INe38rl.jpg"},"children":[]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"概念來自:"},{"type":"element","tag":"a","props":{"href":"https://github.com/jrainlau/MY-Kit","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://github.com/jrainlau/MY-Kit"}]},{"type":"text","value":"\n主要調整的部分在於該專案使用一些方法要去動態 import md 檔，本地開發能正常，但打包後需要調整成 fetch 的作法，這部分我在使用 gitgub page 測試時未能成功。\n因此，我改成在打包前就去生成 demo 檔的內容，也就不用把 md 檔一併佈署在 web server。"}]}]},{"type":"element","tag":"h2","props":{"id":"工具一-inquirer"},"children":[{"type":"text","value":"工具一 inquirer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"很強大的輸入工具，可以自定義各種類型的問題，並做驗證、過濾、預設值、清單等等功能，最後會回傳一個回答的物件。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/inquirer#reactive","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"inquirer npm"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/vue-ui/blob/main/script/genNewComp/infoCollector.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"gt UI 使用部分"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"基本範例:"}]},{"type":"element","tag":"code","props":{"code":"()=>{\n  const inquirer = require(\"inquirer\");\n  const prompt = inquirer.createPromptModule();\n  const questions = [\n    {\n      type: \"input\",\n      name: \"Q1\",\n      message: \"Q1回答:\",\n      default: \"2\",\n      filter: (input) => {\n        return \"filter-\" + input;\n      },\n      validate: function (input) {\n        const done = this.async();\n        if (input == 1) {\n          done(\"答案不能是1\");\n          return;\n        }\n        done(null, true);\n      },\n    },\n    {\n      type: \"confirm\",\n      name: \"Q2\",\n      message: \"Q2回答:\",\n    },\n    {\n      type: \"list\",\n      name: \"Q3\",\n      message: \"Q3回答:\",\n      choices: [\"a\", \"b\", \"c\"],\n    },\n    {\n      type: \"input\",\n      name: \"Q4\",\n      message: \"身份證字號:\",\n      default: \"a123456789\",\n      validate: function (input) {\n        const done = this.async();\n        const idReg = /^[a-zA-Z][0-9]{9}$/;\n\n        if (!idReg.test(input)) {\n          done(\"身分證錯誤\");\n          return;\n        }\n\n        done(null, true);\n      },\n    },\n  ];\n\n  const answersCollect = async () => {\n    const result = await prompt(questions);\n    return result;\n  };\n\n  module.exports = {\n    answersCollect,\n  };\n}\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"()=>{\n  const inquirer = require(\"inquirer\");\n  const prompt = inquirer.createPromptModule();\n  const questions = [\n    {\n      type: \"input\",\n      name: \"Q1\",\n      message: \"Q1回答:\",\n      default: \"2\",\n      filter: (input) => {\n        return \"filter-\" + input;\n      },\n      validate: function (input) {\n        const done = this.async();\n        if (input == 1) {\n          done(\"答案不能是1\");\n          return;\n        }\n        done(null, true);\n      },\n    },\n    {\n      type: \"confirm\",\n      name: \"Q2\",\n      message: \"Q2回答:\",\n    },\n    {\n      type: \"list\",\n      name: \"Q3\",\n      message: \"Q3回答:\",\n      choices: [\"a\", \"b\", \"c\"],\n    },\n    {\n      type: \"input\",\n      name: \"Q4\",\n      message: \"身份證字號:\",\n      default: \"a123456789\",\n      validate: function (input) {\n        const done = this.async();\n        const idReg = /^[a-zA-Z][0-9]{9}$/;\n\n        if (!idReg.test(input)) {\n          done(\"身分證錯誤\");\n          return;\n        }\n\n        done(null, true);\n      },\n    },\n  ];\n\n  const answersCollect = async () => {\n    const result = await prompt(questions);\n    return result;\n  };\n\n  module.exports = {\n    answersCollect,\n  };\n}\n\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"工具二-fs-extra"},"children":[{"type":"text","value":"工具二 fs-extra"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"讀取檔案與寫入檔案的工具。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/fs-extra","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"fs-extra npm"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/vue-ui/blob/main/script/genGtDoc/index.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"gt UI 使用部分"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"基本範例:"}]},{"type":"element","tag":"code","props":{"code":"()=>{\nconst fs = require('fs-extra');\nconst path = require('path');\n\nfunction read() {\n  const filePath = path.resolve(__dirname, '../.template/demo.vue');\n  const fileContent = fs.readFileSync(filePath, 'utf-8');\n\n  //   console.log(fileContent);\n  return fileContent;\n}\n\nfunction write(fileContent) {\n  const destFilePath = path.resolve(__dirname, '../output/demo.txt');\n  fs.outputFile(destFilePath, fileContent, (err) => {\n    console.log(err);\n  });\n}\n\nwrite(read());\n}\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"()=>{\nconst fs = require('fs-extra');\nconst path = require('path');\n\nfunction read() {\n  const filePath = path.resolve(__dirname, '../.template/demo.vue');\n  const fileContent = fs.readFileSync(filePath, 'utf-8');\n\n  //   console.log(fileContent);\n  return fileContent;\n}\n\nfunction write(fileContent) {\n  const destFilePath = path.resolve(__dirname, '../output/demo.txt');\n  fs.outputFile(destFilePath, fileContent, (err) => {\n    console.log(err);\n  });\n}\n\nwrite(read());\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"工具三-handlebars"},"children":[{"type":"text","value":"工具三 handlebars"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"把.tpl 格式的模板檔案中，有用{{}}括號包起的變數替換掉，編譯成要匯出的檔案。\n"},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/handlebars","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"handlebars npm"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/vue-ui/blob/main/script/genGtDoc/index.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"gt UI 使用部分"}]}]},{"type":"element","tag":"code","props":{"code":"// /.template/obj.js.tpl\nexport const obj = {\n    {{objContent}}\n}\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// /.template/obj.js.tpl\nexport const obj = {\n    {{objContent}}\n}\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"const fs = require('fs-extra');\nconst handlebars = require('handlebars');\nconst { resolve, join } = require('path');\n\nfunction genObjFile() {\n  const answerFileContent = JSON.parse(\n    fs.readFileSync(join(process.cwd(), '/output/answers.json'), 'utf-8')\n  );\n\n  //讀取模板檔案\n  const tempFilePath = join(process.cwd(), '/.template/obj.js.tpl');\n  const tempFile = fs.readFileSync(tempFilePath, 'utf-8');\n\n  //產生模板檔案對應的字串 ex. {{objContent}}\n  const objContent = answerFileContent\n    .map((obj, idx) => {\n      return `answer${idx}:${JSON.stringify(obj)},`;\n    })\n    .join('\\n    ');\n\n  //透過handlebar將模板產生\n  const contentCompiled = handlebars.compile(tempFile, {\n    noEscape: true,\n  })({ objContent: objContent });\n\n  //寫出檔案\n  fs.outputFile(\n    join(process.cwd(), '/output/obj.js'),\n    contentCompiled,\n    (err) => {\n      if (err) console.log(err);\n    }\n  );\n}\n\nmodule.exports = {\n  genObjFile,\n};\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const fs = require('fs-extra');\nconst handlebars = require('handlebars');\nconst { resolve, join } = require('path');\n\nfunction genObjFile() {\n  const answerFileContent = JSON.parse(\n    fs.readFileSync(join(process.cwd(), '/output/answers.json'), 'utf-8')\n  );\n\n  //讀取模板檔案\n  const tempFilePath = join(process.cwd(), '/.template/obj.js.tpl');\n  const tempFile = fs.readFileSync(tempFilePath, 'utf-8');\n\n  //產生模板檔案對應的字串 ex. {{objContent}}\n  const objContent = answerFileContent\n    .map((obj, idx) => {\n      return `answer${idx}:${JSON.stringify(obj)},`;\n    })\n    .join('\\n    ');\n\n  //透過handlebar將模板產生\n  const contentCompiled = handlebars.compile(tempFile, {\n    noEscape: true,\n  })({ objContent: objContent });\n\n  //寫出檔案\n  fs.outputFile(\n    join(process.cwd(), '/output/obj.js'),\n    contentCompiled,\n    (err) => {\n      if (err) console.log(err);\n    }\n  );\n}\n\nmodule.exports = {\n  genObjFile,\n};\n"}]}]}]}]},"tags":"node 工具","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"自動生成demo文件"},"children":[{"type":"text","value":"自動生成demo文件"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在新的 GT UI 檔案結構中，packages 資料夾內包含了各元件的資料夾，這相對之前的改變是要讓展示的代碼分割出來，同時也是為了能自動化生成匯出檔做的安排，這能讓日後對相關的維護和開發容易。\n這裡的匯出檔(packages/insex.js)，即是透過模板和 list.json 的資料去生成。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/BZSxXhV.jpg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"展示頁的畫面，元件的效果和開發者的代碼可以一同顯示，也是透過路由參數改變後去對應該元件的 dmeo.vue 檔。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/INe38rl.jpg"},"children":[]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"概念來自:"},{"type":"element","tag":"a","props":{"href":"https://github.com/jrainlau/MY-Kit","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://github.com/jrainlau/MY-Kit"}]},{"type":"text","value":"\n主要調整的部分在於該專案使用一些方法要去動態 import md 檔，本地開發能正常，但打包後需要調整成 fetch 的作法，這部分我在使用 gitgub page 測試時未能成功。\n因此，我改成在打包前就去生成 demo 檔的內容，也就不用把 md 檔一併佈署在 web server。"}]}]},{"type":"element","tag":"h2","props":{"id":"工具一-inquirer"},"children":[{"type":"text","value":"工具一 inquirer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"很強大的輸入工具，可以自定義各種類型的問題，並做驗證、過濾、預設值、清單等等功能，最後會回傳一個回答的物件。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/inquirer#reactive","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"inquirer npm"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/vue-ui/blob/main/script/genNewComp/infoCollector.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"gt UI 使用部分"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"基本範例:"}]},{"type":"element","tag":"code","props":{"code":"()=>{\n  const inquirer = require(\"inquirer\");\n  const prompt = inquirer.createPromptModule();\n  const questions = [\n    {\n      type: \"input\",\n      name: \"Q1\",\n      message: \"Q1回答:\",\n      default: \"2\",\n      filter: (input) => {\n        return \"filter-\" + input;\n      },\n      validate: function (input) {\n        const done = this.async();\n        if (input == 1) {\n          done(\"答案不能是1\");\n          return;\n        }\n        done(null, true);\n      },\n    },\n    {\n      type: \"confirm\",\n      name: \"Q2\",\n      message: \"Q2回答:\",\n    },\n    {\n      type: \"list\",\n      name: \"Q3\",\n      message: \"Q3回答:\",\n      choices: [\"a\", \"b\", \"c\"],\n    },\n    {\n      type: \"input\",\n      name: \"Q4\",\n      message: \"身份證字號:\",\n      default: \"a123456789\",\n      validate: function (input) {\n        const done = this.async();\n        const idReg = /^[a-zA-Z][0-9]{9}$/;\n\n        if (!idReg.test(input)) {\n          done(\"身分證錯誤\");\n          return;\n        }\n\n        done(null, true);\n      },\n    },\n  ];\n\n  const answersCollect = async () => {\n    const result = await prompt(questions);\n    return result;\n  };\n\n  module.exports = {\n    answersCollect,\n  };\n}\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-4b428e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"inquirer"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-755d8c"},"children":[{"type":"text","value":"require"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"inquirer"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"prompt"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"inquirer"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"createPromptModule"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-4b428e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c94f61"},"children":[{"type":"text","value":"questions"}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-210722"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      type"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      name"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"Q1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      message"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"Q1回答:"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      default"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"filter"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f1a03c"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"filter-"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"validate"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f1a03c"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-4b428e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c94f61"},"children":[{"type":"text","value":"done"}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-210722"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-52e4f1"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f7a36e"},"children":[{"type":"text","value":"async"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"=="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0d4e59"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"done"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"答案不能是1"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-210722"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"done"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-8927c4"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      type"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"confirm"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      name"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"Q2"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      message"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"Q2回答:"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      type"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"list"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      name"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"Q3"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      message"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"Q3回答:"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      choices"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"a"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"b"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"c"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      type"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      name"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"Q4"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      message"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"身份證字號:"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      default"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"a123456789"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"validate"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f1a03c"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-4b428e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c94f61"},"children":[{"type":"text","value":"done"}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-210722"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-52e4f1"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f7a36e"},"children":[{"type":"text","value":"async"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"idReg"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"^"}]},{"type":"element","tag":"span","props":{"class":"ct-3af755"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-0fd6b9"},"children":[{"type":"text","value":"a-zA-Z"}]},{"type":"element","tag":"span","props":{"class":"ct-3af755"},"children":[{"type":"text","value":"]["}]},{"type":"element","tag":"span","props":{"class":"ct-0fd6b9"},"children":[{"type":"text","value":"0-9"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"idReg"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"test"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")) "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"done"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"身分證錯誤"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-210722"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"done"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-8927c4"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  ]"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c26cff"},"children":[{"type":"text","value":"answersCollect"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"prompt"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"questions"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-52e4f1"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-52e4f1"},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"answersCollect"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"工具二-fs-extra"},"children":[{"type":"text","value":"工具二 fs-extra"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"讀取檔案與寫入檔案的工具。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/fs-extra","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"fs-extra npm"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/vue-ui/blob/main/script/genGtDoc/index.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"gt UI 使用部分"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"基本範例:"}]},{"type":"element","tag":"code","props":{"code":"()=>{\nconst fs = require('fs-extra');\nconst path = require('path');\n\nfunction read() {\n  const filePath = path.resolve(__dirname, '../.template/demo.vue');\n  const fileContent = fs.readFileSync(filePath, 'utf-8');\n\n  //   console.log(fileContent);\n  return fileContent;\n}\n\nfunction write(fileContent) {\n  const destFilePath = path.resolve(__dirname, '../output/demo.txt');\n  fs.outputFile(destFilePath, fileContent, (err) => {\n    console.log(err);\n  });\n}\n\nwrite(read());\n}\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-4b428e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"fs"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-755d8c"},"children":[{"type":"text","value":"require"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"fs-extra"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"path"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-755d8c"},"children":[{"type":"text","value":"require"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"path"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"read"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"filePath"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"path"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"__dirname"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"../.template/demo.vue"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"fileContent"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"fs"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"readFileSync"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"filePath"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"utf-8"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-530f19"},"children":[{"type":"text","value":"//   console.log(fileContent);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"fileContent"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"write"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f1a03c"},"children":[{"type":"text","value":"fileContent"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"destFilePath"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"path"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"__dirname"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"../output/demo.txt"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"fs"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"outputFile"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"destFilePath"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"fileContent"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f1a03c"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"write"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"read"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"())"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"工具三-handlebars"},"children":[{"type":"text","value":"工具三 handlebars"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"把.tpl 格式的模板檔案中，有用{{}}括號包起的變數替換掉，編譯成要匯出的檔案。\n"},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/handlebars","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"handlebars npm"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/vue-ui/blob/main/script/genGtDoc/index.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"gt UI 使用部分"}]}]},{"type":"element","tag":"code","props":{"code":"// /.template/obj.js.tpl\nexport const obj = {\n    {{objContent}}\n}\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-530f19"},"children":[{"type":"text","value":"// /.template/obj.js.tpl"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-210722"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-fa3da0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4b428e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fa3da0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c94f61"},"children":[{"type":"text","value":"obj"}]},{"type":"element","tag":"span","props":{"class":"ct-fa3da0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-210722"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"    {{objContent"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fa3da0"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"const fs = require('fs-extra');\nconst handlebars = require('handlebars');\nconst { resolve, join } = require('path');\n\nfunction genObjFile() {\n  const answerFileContent = JSON.parse(\n    fs.readFileSync(join(process.cwd(), '/output/answers.json'), 'utf-8')\n  );\n\n  //讀取模板檔案\n  const tempFilePath = join(process.cwd(), '/.template/obj.js.tpl');\n  const tempFile = fs.readFileSync(tempFilePath, 'utf-8');\n\n  //產生模板檔案對應的字串 ex. {{objContent}}\n  const objContent = answerFileContent\n    .map((obj, idx) => {\n      return `answer${idx}:${JSON.stringify(obj)},`;\n    })\n    .join('\\n    ');\n\n  //透過handlebar將模板產生\n  const contentCompiled = handlebars.compile(tempFile, {\n    noEscape: true,\n  })({ objContent: objContent });\n\n  //寫出檔案\n  fs.outputFile(\n    join(process.cwd(), '/output/obj.js'),\n    contentCompiled,\n    (err) => {\n      if (err) console.log(err);\n    }\n  );\n}\n\nmodule.exports = {\n  genObjFile,\n};\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"genObjFile"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-4b428e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c94f61"},"children":[{"type":"text","value":"answerFileContent"}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-210722"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c94f61"},"children":[{"type":"text","value":"JSON"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-74ad7d"},"children":[{"type":"text","value":"parse"}]},{"type":"element","tag":"span","props":{"class":"ct-e3de8f"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"fs"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"readFileSync"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"join"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"cwd"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"/output/answers.json"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"utf-8"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  )"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-530f19"},"children":[{"type":"text","value":"//讀取模板檔案"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"tempFilePath"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"join"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"cwd"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"/.template/obj.js.tpl"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"tempFile"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"fs"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"readFileSync"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"tempFilePath"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"utf-8"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-530f19"},"children":[{"type":"text","value":"//產生模板檔案對應的字串 ex. {{objContent}}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"objContent"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"answerFileContent"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f1a03c"},"children":[{"type":"text","value":"obj"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1a03c"},"children":[{"type":"text","value":"idx"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"answer"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"idx"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"JSON"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-755d8c"},"children":[{"type":"text","value":"stringify"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"join"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-530f19"},"children":[{"type":"text","value":"//透過handlebar將模板產生"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73a92e"},"children":[{"type":"text","value":"contentCompiled"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"handlebars"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"compile"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"tempFile"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    noEscape"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8927c4"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")("}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" objContent"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"objContent"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-530f19"},"children":[{"type":"text","value":"//寫出檔案"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"fs"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"outputFile"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"join"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"cwd"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-75dd6b"},"children":[{"type":"text","value":"/output/obj.js"}]},{"type":"element","tag":"span","props":{"class":"ct-fda6c9"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"contentCompiled"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f1a03c"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b2853e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-38edf7"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b965f2"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df21b7"},"children":[{"type":"text","value":"  )"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-52e4f1"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-52e4f1"},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"class":"ct-fa3da0"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9115f"},"children":[{"type":"text","value":"  genObjFile"}]},{"type":"element","tag":"span","props":{"class":"ct-713d1b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5cd701"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-74ad7d{color:#82AAFF}.ct-fa3da0{color:#A6ACCD}.ct-530f19{color:#676E95}.ct-c26cff{color:#A6ACCD}.ct-0fd6b9{color:#C3E88D}.ct-3af755{color:#89DDFF}.ct-8927c4{color:#FF9CAC}.ct-0d4e59{color:#F78C6C}.ct-f7a36e{color:#82AAFF}.ct-52e4f1{color:#89DDFF}.ct-f1a03c{color:#A6ACCD}.ct-210722{color:#89DDFF}.ct-c94f61{color:#A6ACCD}.ct-e3de8f{color:#F07178}.ct-b965f2{color:#82AAFF}.ct-e9115f{color:#A6ACCD}.ct-713d1b{color:#89DDFF}.ct-75dd6b{color:#C3E88D}.ct-fda6c9{color:#89DDFF}.ct-755d8c{color:#82AAFF}.ct-38edf7{color:#89DDFF}.ct-73a92e{color:#A6ACCD}.ct-b2853e{color:#C792EA}.ct-df21b7{color:#F07178}.ct-4b428e{color:#C792EA}.ct-5cd701{color:#89DDFF}.dark .ct-5cd701{color:#C9D1D9}.dark .ct-4b428e{color:#FF7B72}.dark .ct-df21b7{color:#C9D1D9}.dark .ct-b2853e{color:#FF7B72}.dark .ct-73a92e{color:#79C0FF}.dark .ct-38edf7{color:#FF7B72}.dark .ct-755d8c{color:#79C0FF}.dark .ct-fda6c9{color:#A5D6FF}.dark .ct-75dd6b{color:#A5D6FF}.dark .ct-713d1b{color:#C9D1D9}.dark .ct-e9115f{color:#C9D1D9}.dark .ct-b965f2{color:#D2A8FF}.dark .ct-e3de8f{color:#C9D1D9}.dark .ct-c94f61{color:#79C0FF}.dark .ct-210722{color:#FF7B72}.dark .ct-f1a03c{color:#FFA657}.dark .ct-52e4f1{color:#79C0FF}.dark .ct-f7a36e{color:#D2A8FF}.dark .ct-0d4e59{color:#79C0FF}.dark .ct-8927c4{color:#79C0FF}.dark .ct-3af755{color:#79C0FF}.dark .ct-0fd6b9{color:#79C0FF}.dark .ct-c26cff{color:#D2A8FF}.dark .ct-530f19{color:#8B949E}.dark .ct-fa3da0{color:#C9D1D9}.dark .ct-74ad7d{color:#79C0FF}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"工具一-inquirer","depth":2,"text":"工具一 inquirer"},{"id":"工具二-fs-extra","depth":2,"text":"工具二 fs-extra"},{"id":"工具三-handlebars","depth":2,"text":"工具三 handlebars"}]}},"_type":"markdown","_id":"content:1.blog:2.use vite build a UI Package:5. Gen doc.md","_source":"content","_file":"1.blog/2.use vite build a UI Package/5. Gen doc.md","_extension":"md"},{"_path":"/blog/vue-pratice/quasarapp","_draft":false,"_partial":false,"_empty":false,"title":"vue3 Quasar Apps","description":"github","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vue3-quasar-apps"},"children":[{"type":"text","value":"vue3 Quasar Apps"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/quasar-apps","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"github"}]}]},{"type":"element","tag":"h2","props":{"id":"branch-main"},"children":[{"type":"text","value":"branch main"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"實作一個紀錄花費的服務。\n功能:使用者註冊/登入、花費管理、標籤管理。\n特色:Quasar PWA、圖表顯示"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://account-app-f70c0.web.app/#/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"花費紀錄"}]},{"type":"text","value":"\n-2022.01"}]},{"type":"element","tag":"h2","props":{"id":"branch-prevention"},"children":[{"type":"text","value":"branch prevention"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"實作一個回報公司單位健康狀況的服務。\n功能:表單填寫、螢幕截圖\n特色:疫情時代下的小產物吧!"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://gt-prevent-record.firebaseapp.com/#/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"疫情回報"}]},{"type":"text","value":"\n-2022.01"}]},{"type":"element","tag":"h2","props":{"id":"branch-booking-service"},"children":[{"type":"text","value":"branch booking-service"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"實作一個預約服務系統，服務提供者可建立服務給使用者預約。\n功能：使用者管理、角色權限管理、服務管理、場館管理、圖片上傳\n特色:NoSQL資料、Firestore Database、Storage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://book-service.firebaseapp.com/#/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"預約服務"}]},{"type":"text","value":"\n-2022.04"}]}]},"tags":"學習","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vue3-quasar-apps"},"children":[{"type":"text","value":"vue3 Quasar Apps"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/quasar-apps","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"github"}]}]},{"type":"element","tag":"h2","props":{"id":"branch-main"},"children":[{"type":"text","value":"branch main"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"實作一個紀錄花費的服務。\n功能:使用者註冊/登入、花費管理、標籤管理。\n特色:Quasar PWA、圖表顯示"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://account-app-f70c0.web.app/#/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"花費紀錄"}]},{"type":"text","value":"\n-2022.01"}]},{"type":"element","tag":"h2","props":{"id":"branch-prevention"},"children":[{"type":"text","value":"branch prevention"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"實作一個回報公司單位健康狀況的服務。\n功能:表單填寫、螢幕截圖\n特色:疫情時代下的小產物吧!"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://gt-prevent-record.firebaseapp.com/#/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"疫情回報"}]},{"type":"text","value":"\n-2022.01"}]},{"type":"element","tag":"h2","props":{"id":"branch-booking-service"},"children":[{"type":"text","value":"branch booking-service"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"實作一個預約服務系統，服務提供者可建立服務給使用者預約。\n功能：使用者管理、角色權限管理、服務管理、場館管理、圖片上傳\n特色:NoSQL資料、Firestore Database、Storage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://book-service.firebaseapp.com/#/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"預約服務"}]},{"type":"text","value":"\n-2022.04"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"branch-main","depth":2,"text":"branch main"},{"id":"branch-prevention","depth":2,"text":"branch prevention"},{"id":"branch-booking-service","depth":2,"text":"branch booking-service"}]}},"_type":"markdown","_id":"content:1.blog:4.Vue Pratice:1.QuasarApp.md","_source":"content","_file":"1.blog/4.Vue Pratice/1.QuasarApp.md","_extension":"md"},{"_path":"/blog/vue-pratice/vue2-vue-cli","_draft":false,"_partial":false,"_empty":false,"title":"Vue2 與vue-cli建置專案","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vue2-與vue-cli建置專案"},"children":[{"type":"text","value":"Vue2 與vue-cli建置專案"}]},{"type":"element","tag":"h2","props":{"id":"安裝流程"},"children":[{"type":"element","tag":"a","props":{"href":"https://cli.vuejs.org/guide/installation.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"安裝流程"}]}]},{"type":"element","tag":"code","props":{"code":"npm install -g @vue/cli\n\nvue --version\n\nvue create ${app-name}\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install -g @vue/cli\n\nvue --version\n\nvue create ${app-name}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"env檔"},"children":[{"type":"text","value":".env檔"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":".env設定要有VUE_APP 作為變數命名的開頭。添加後，需要重啟專案。"}]}]},{"type":"element","tag":"code","props":{"code":"#VUE_APP開頭\nVUE_APP_BASEURL=\"http://sibase.sample.com\"\n","language":".env"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#VUE_APP開頭\nVUE_APP_BASEURL=\"http://sibase.sample.com\"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"tailwind設定"},"children":[{"type":"text","value":"tailwind設定"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在需要客製的css樣式上用tailwind來添加，方便日後管理，只要在tailwind.config.js中修改定義值。\n"},{"type":"element","tag":"a","props":{"href":"https://tailwindcss.com/docs/installation","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"參考官網設定"}]}]},{"type":"element","tag":"code","props":{"code":"module.exports = {\n  mode: \"jit\", //只編譯有使用到的樣式\n  purge: [\"./index.html\", \"./src/**/*.{vue,js}\"],\n  darkMode: false, // or 'media' or 'class'\n  theme: {\n    fontSize: {\n      100: [\"100px\", { lineHeight: \"1\" }], //自行添加的定義\n    },\n  },\n  variantOrder: [],\n  variants: {},\n  plugins: [],\n};\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"module.exports = {\n  mode: \"jit\", //只編譯有使用到的樣式\n  purge: [\"./index.html\", \"./src/**/*.{vue,js}\"],\n  darkMode: false, // or 'media' or 'class'\n  theme: {\n    fontSize: {\n      100: [\"100px\", { lineHeight: \"1\" }], //自行添加的定義\n    },\n  },\n  variantOrder: [],\n  variants: {},\n  plugins: [],\n};\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vue-config設定"},"children":[{"type":"text","value":"Vue config設定"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"參照vue-admin的設定做打包優化，在build production版時，會處理lib的分割，像是elementUI和vuejs。\n"},{"type":"element","tag":"a","props":{"href":"https://github.com/PanJiaChen/vue-element-admin","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"參考開源專案vue-admin"}]},{"type":"element","tag":"a","props":{"href":"https://cli.vuejs.org/zh/config/#vue-config-js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方配置說明"}]}]}]},{"type":"element","tag":"code","props":{"code":"module.exports = {\n      publicPath: \"/\",\n      outputDir: \"dist\",\n      assetsDir: \"static\",\n      lintOnSave: process.env.NODE_ENV !== \"production\",\n      productionSourceMap: false,\n      configureWebpack: {\n        name: \"SIapp\",\n        resolve: {\n          alias: {\n            \"@\": resolve(\"src\"),\n          },\n        },\n      },\n      chainWebpack(config) {\n        config.plugin(\"preload\").tap(() => [\n          {\n            rel: \"preload\",\n            // to ignore runtime.js\n            // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171\n            fileBlacklist: [/\\.map$/, /hot-update\\.js$/, /runtime\\..*\\.js$/],\n            include: \"initial\",\n          },\n        ]);\n\n        // when there are many pages, it will cause too many meaningless requests\n        config.plugins.delete(\"prefetch\");\n\n        config.when(process.env.NODE_ENV !== \"development\", (config) => {\n          config.optimization.splitChunks({\n            chunks: \"all\",\n            cacheGroups: {\n              vue: {\n                name: \"chunk-vuejs\",\n                test: /[\\\\/]node_modules[\\\\/]_?vue(.*)/,\n                priority: 20,\n              },\n              elementUI: {\n                name: \"chunk-elementUI\", // split elementUI into a single    package\n                priority: 30, // the weight needs to be larger than libs and app or it will be packaged into libs or app\n                test: /[\\\\/]node_modules[\\\\/]_?element-ui(.*)/, // in order to adapt to cnpm\n              },\n              commons: {\n                // split async commons chunk\n                name: \"chunk-async-commons\",\n                minChunks: 2,\n                priority: 40,\n                chunks: \"async\",\n              },\n            },\n          });\n\n          // config\n          //   .plugin(\"webpack-bundle-analyzer\")\n          //   .use(require(\"webpack-bundle-analyzer\").BundleAnalyzerPlugin);\n        });\n      },\n};\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"module.exports = {\n      publicPath: \"/\",\n      outputDir: \"dist\",\n      assetsDir: \"static\",\n      lintOnSave: process.env.NODE_ENV !== \"production\",\n      productionSourceMap: false,\n      configureWebpack: {\n        name: \"SIapp\",\n        resolve: {\n          alias: {\n            \"@\": resolve(\"src\"),\n          },\n        },\n      },\n      chainWebpack(config) {\n        config.plugin(\"preload\").tap(() => [\n          {\n            rel: \"preload\",\n            // to ignore runtime.js\n            // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171\n            fileBlacklist: [/\\.map$/, /hot-update\\.js$/, /runtime\\..*\\.js$/],\n            include: \"initial\",\n          },\n        ]);\n\n        // when there are many pages, it will cause too many meaningless requests\n        config.plugins.delete(\"prefetch\");\n\n        config.when(process.env.NODE_ENV !== \"development\", (config) => {\n          config.optimization.splitChunks({\n            chunks: \"all\",\n            cacheGroups: {\n              vue: {\n                name: \"chunk-vuejs\",\n                test: /[\\\\/]node_modules[\\\\/]_?vue(.*)/,\n                priority: 20,\n              },\n              elementUI: {\n                name: \"chunk-elementUI\", // split elementUI into a single    package\n                priority: 30, // the weight needs to be larger than libs and app or it will be packaged into libs or app\n                test: /[\\\\/]node_modules[\\\\/]_?element-ui(.*)/, // in order to adapt to cnpm\n              },\n              commons: {\n                // split async commons chunk\n                name: \"chunk-async-commons\",\n                minChunks: 2,\n                priority: 40,\n                chunks: \"async\",\n              },\n            },\n          });\n\n          // config\n          //   .plugin(\"webpack-bundle-analyzer\")\n          //   .use(require(\"webpack-bundle-analyzer\").BundleAnalyzerPlugin);\n        });\n      },\n};\n\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"axios封裝"},"children":[{"type":"text","value":"axios封裝"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"axios封裝初版。透過axios建立請求實例，並設置request和response的攔截，API定義時可使用該實例下有定義的呼叫方式。\n"},{"type":"element","tag":"a","props":{"href":"https://zhuanlan.zhihu.com/p/136035219","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"axios怎么封装，才能提升效率？"}]}]}]},{"type":"element","tag":"code","props":{"code":" //request.js\nimport axios from \"axios\";\nimport { Message } from \"element-ui\";\n\n//todo\n//console.log(process.env.NODE_ENV)\n\nconst instance = axios.create({\n  baseURL: \"https://jsonplaceholder.typicode.com\",\n  headers: {\n    \"Content-Type\": \"application/x-www-form-urlencoded;charset=UTF-8\",\n  },\n  timeout: 10000,\n});\n\n//請求攔截\ninstance.interceptors.request.use(config => {\n    // console.log(\"config\",config)\n    config.headers.token = 'token';\n    return config;\n});\n\n//回傳攔截\ninstance.interceptors.response.use((response)=>{\n    console.log(\"response\",response);\n    //todo 錯誤處理\n    return response;\n},()=>{\n    Message.error('請求有誤');\n});\n\nexport default function(method, url, data = null, config) {\n  method = method.toLowerCase();\n  switch (method) {\n    case \"post\":\n      return instance.post(url, data, config);\n    case \"get\":\n      return instance.get(url, { params: data });\n    case \"delete\":\n      return instance.delete(url, { params: data });\n    case \"put\":\n      return instance.put(url, data);\n    case \"patch\":\n      return instance.patch(url, data);\n    default:\n      console.log(`未知的 method: ${method}`);\n      return false;\n  }\n};\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" //request.js\nimport axios from \"axios\";\nimport { Message } from \"element-ui\";\n\n//todo\n//console.log(process.env.NODE_ENV)\n\nconst instance = axios.create({\n  baseURL: \"https://jsonplaceholder.typicode.com\",\n  headers: {\n    \"Content-Type\": \"application/x-www-form-urlencoded;charset=UTF-8\",\n  },\n  timeout: 10000,\n});\n\n//請求攔截\ninstance.interceptors.request.use(config => {\n    // console.log(\"config\",config)\n    config.headers.token = 'token';\n    return config;\n});\n\n//回傳攔截\ninstance.interceptors.response.use((response)=>{\n    console.log(\"response\",response);\n    //todo 錯誤處理\n    return response;\n},()=>{\n    Message.error('請求有誤');\n});\n\nexport default function(method, url, data = null, config) {\n  method = method.toLowerCase();\n  switch (method) {\n    case \"post\":\n      return instance.post(url, data, config);\n    case \"get\":\n      return instance.get(url, { params: data });\n    case \"delete\":\n      return instance.delete(url, { params: data });\n    case \"put\":\n      return instance.put(url, data);\n    case \"patch\":\n      return instance.patch(url, data);\n    default:\n      console.log(`未知的 method: ${method}`);\n      return false;\n  }\n};\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"路由"},"children":[{"type":"text","value":"路由"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"佈署在server需要在server端做路由指向的調整，應把請求都指向前端路由去處理。\n"},{"type":"element","tag":"a","props":{"href":"https://book.vue.tw/CH4/4-1-vue-router-intro.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"參考Vue路由解說"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vscode-vetur"},"children":[{"type":"text","value":"vscode vetur"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"情境:在.vue file中若出現scss的語法，vscode vetur套件會檢查.vue file可能出現警告訊息，原因推測是vetur無法認得scss的語法。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"警告訊息","src":"https://i.imgur.com/SL4En2X.jpg"},"children":[]}]},{"type":"element","tag":"info","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"解決方法:在vscode vetur 套件的設定中 取消對style tag內容的驗證。"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"關閉驗證","src":"https://i.imgur.com/zHGjiiq.jpg"},"children":[]}]}]},"tags":"學習","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vue2-與vue-cli建置專案"},"children":[{"type":"text","value":"Vue2 與vue-cli建置專案"}]},{"type":"element","tag":"h2","props":{"id":"安裝流程"},"children":[{"type":"element","tag":"a","props":{"href":"https://cli.vuejs.org/guide/installation.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"安裝流程"}]}]},{"type":"element","tag":"code","props":{"code":"npm install -g @vue/cli\n\nvue --version\n\nvue create ${app-name}\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"npm install -g @vue/cli\n\nvue --version\n\nvue create ${app-name}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"env檔"},"children":[{"type":"text","value":".env檔"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":".env設定要有VUE_APP 作為變數命名的開頭。添加後，需要重啟專案。"}]}]},{"type":"element","tag":"code","props":{"code":"#VUE_APP開頭\nVUE_APP_BASEURL=\"http://sibase.sample.com\"\n","language":".env"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"#VUE_APP開頭\nVUE_APP_BASEURL=\"http://sibase.sample.com\""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"tailwind設定"},"children":[{"type":"text","value":"tailwind設定"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在需要客製的css樣式上用tailwind來添加，方便日後管理，只要在tailwind.config.js中修改定義值。\n"},{"type":"element","tag":"a","props":{"href":"https://tailwindcss.com/docs/installation","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"參考官網設定"}]}]},{"type":"element","tag":"code","props":{"code":"module.exports = {\n  mode: \"jit\", //只編譯有使用到的樣式\n  purge: [\"./index.html\", \"./src/**/*.{vue,js}\"],\n  darkMode: false, // or 'media' or 'class'\n  theme: {\n    fontSize: {\n      100: [\"100px\", { lineHeight: \"1\" }], //自行添加的定義\n    },\n  },\n  variantOrder: [],\n  variants: {},\n  plugins: [],\n};\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ee3b5b"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ee3b5b"},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"class":"ct-b1a175"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"mode"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"jit"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d49ee"},"children":[{"type":"text","value":"//只編譯有使用到的樣式"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"purge"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"./index.html"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"./src/**/*.{vue,js}"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"darkMode"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b82ce"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d49ee"},"children":[{"type":"text","value":"// or 'media' or 'class'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"fontSize"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-bbb975"},"children":[{"type":"text","value":"100"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"100px"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"lineHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d49ee"},"children":[{"type":"text","value":"//自行添加的定義"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"variantOrder"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" []"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"variants"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"plugins"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" []"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"vue-config設定"},"children":[{"type":"text","value":"Vue config設定"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"參照vue-admin的設定做打包優化，在build production版時，會處理lib的分割，像是elementUI和vuejs。\n"},{"type":"element","tag":"a","props":{"href":"https://github.com/PanJiaChen/vue-element-admin","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"參考開源專案vue-admin"}]},{"type":"element","tag":"a","props":{"href":"https://cli.vuejs.org/zh/config/#vue-config-js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方配置說明"}]}]}]},{"type":"element","tag":"code","props":{"code":"module.exports = {\n      publicPath: \"/\",\n      outputDir: \"dist\",\n      assetsDir: \"static\",\n      lintOnSave: process.env.NODE_ENV !== \"production\",\n      productionSourceMap: false,\n      configureWebpack: {\n        name: \"SIapp\",\n        resolve: {\n          alias: {\n            \"@\": resolve(\"src\"),\n          },\n        },\n      },\n      chainWebpack(config) {\n        config.plugin(\"preload\").tap(() => [\n          {\n            rel: \"preload\",\n            // to ignore runtime.js\n            // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171\n            fileBlacklist: [/\\.map$/, /hot-update\\.js$/, /runtime\\..*\\.js$/],\n            include: \"initial\",\n          },\n        ]);\n\n        // when there are many pages, it will cause too many meaningless requests\n        config.plugins.delete(\"prefetch\");\n\n        config.when(process.env.NODE_ENV !== \"development\", (config) => {\n          config.optimization.splitChunks({\n            chunks: \"all\",\n            cacheGroups: {\n              vue: {\n                name: \"chunk-vuejs\",\n                test: /[\\\\/]node_modules[\\\\/]_?vue(.*)/,\n                priority: 20,\n              },\n              elementUI: {\n                name: \"chunk-elementUI\", // split elementUI into a single    package\n                priority: 30, // the weight needs to be larger than libs and app or it will be packaged into libs or app\n                test: /[\\\\/]node_modules[\\\\/]_?element-ui(.*)/, // in order to adapt to cnpm\n              },\n              commons: {\n                // split async commons chunk\n                name: \"chunk-async-commons\",\n                minChunks: 2,\n                priority: 40,\n                chunks: \"async\",\n              },\n            },\n          });\n\n          // config\n          //   .plugin(\"webpack-bundle-analyzer\")\n          //   .use(require(\"webpack-bundle-analyzer\").BundleAnalyzerPlugin);\n        });\n      },\n};\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ee3b5b"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ee3b5b"},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"class":"ct-b1a175"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"publicPath"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"outputDir"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"dist"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"assetsDir"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"static"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"lintOnSave"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" process"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"productionSourceMap"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8b82ce"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"configureWebpack"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"SIapp"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"alias"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-43804a"},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-bc5417"},"children":[{"type":"text","value":"chainWebpack"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-964516"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"plugin"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"preload"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"tap"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6891b4"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"            rel"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"preload"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"// to ignore runtime.js"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"            fileBlacklist"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-19a1a4"},"children":[{"type":"text","value":"\\."}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"hot-update"}]},{"type":"element","tag":"span","props":{"class":"ct-19a1a4"},"children":[{"type":"text","value":"\\."}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"js"}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"runtime"}]},{"type":"element","tag":"span","props":{"class":"ct-19a1a4"},"children":[{"type":"text","value":"\\."}]},{"type":"element","tag":"span","props":{"class":"ct-77a696"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-19a1a4"},"children":[{"type":"text","value":"\\."}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"js"}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"            include"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"initial"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"        ])"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"// when there are many pages, it will cause too many meaningless requests"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"plugins"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"delete"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"prefetch"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"when"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f7c313"},"children":[{"type":"text","value":"NODE_ENV"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"!=="}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"development"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-964516"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6891b4"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"optimization"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"splitChunks"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"            chunks"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"all"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"            cacheGroups"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"              vue"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"                name"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"chunk-vuejs"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"                test"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-3e2f53"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-19a1a4"},"children":[{"type":"text","value":"\\\\"}]},{"type":"element","tag":"span","props":{"class":"ct-77a696"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-3e2f53"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"                priority"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bbb975"},"children":[{"type":"text","value":"20"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"              "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"              elementUI"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"                name"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"chunk-elementUI"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d49ee"},"children":[{"type":"text","value":"// split elementUI into a single    package"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"                priority"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bbb975"},"children":[{"type":"text","value":"30"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8d49ee"},"children":[{"type":"text","value":"// the weight needs to be larger than libs and app or it will be packaged into libs or app"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"                test"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-3e2f53"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-19a1a4"},"children":[{"type":"text","value":"\\\\"}]},{"type":"element","tag":"span","props":{"class":"ct-77a696"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-3e2f53"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"              "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"              commons"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"// split async commons chunk"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"                name"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"chunk-async-commons"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"                minChunks"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bbb975"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"                priority"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bbb975"},"children":[{"type":"text","value":"40"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"                chunks"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"              "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"// config"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"//   .plugin(\"webpack-bundle-analyzer\")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"//   .use(require(\"webpack-bundle-analyzer\").BundleAnalyzerPlugin);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"axios封裝"},"children":[{"type":"text","value":"axios封裝"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"axios封裝初版。透過axios建立請求實例，並設置request和response的攔截，API定義時可使用該實例下有定義的呼叫方式。\n"},{"type":"element","tag":"a","props":{"href":"https://zhuanlan.zhihu.com/p/136035219","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"axios怎么封装，才能提升效率？"}]}]}]},{"type":"element","tag":"code","props":{"code":" //request.js\nimport axios from \"axios\";\nimport { Message } from \"element-ui\";\n\n//todo\n//console.log(process.env.NODE_ENV)\n\nconst instance = axios.create({\n  baseURL: \"https://jsonplaceholder.typicode.com\",\n  headers: {\n    \"Content-Type\": \"application/x-www-form-urlencoded;charset=UTF-8\",\n  },\n  timeout: 10000,\n});\n\n//請求攔截\ninstance.interceptors.request.use(config => {\n    // console.log(\"config\",config)\n    config.headers.token = 'token';\n    return config;\n});\n\n//回傳攔截\ninstance.interceptors.response.use((response)=>{\n    console.log(\"response\",response);\n    //todo 錯誤處理\n    return response;\n},()=>{\n    Message.error('請求有誤');\n});\n\nexport default function(method, url, data = null, config) {\n  method = method.toLowerCase();\n  switch (method) {\n    case \"post\":\n      return instance.post(url, data, config);\n    case \"get\":\n      return instance.get(url, { params: data });\n    case \"delete\":\n      return instance.delete(url, { params: data });\n    case \"put\":\n      return instance.put(url, data);\n    case \"patch\":\n      return instance.patch(url, data);\n    default:\n      console.log(`未知的 method: ${method}`);\n      return false;\n  }\n};\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"//request.js"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" axios "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"Message"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"element-ui"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"//todo"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"//console.log(process.env.NODE_ENV)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-26b60b"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b1a175"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ceb4d5"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-b1a175"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9ebf8e"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"baseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"https://jsonplaceholder.typicode.com"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-43804a"},"children":[{"type":"text","value":"Content-Type"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"application/x-www-form-urlencoded;charset=UTF-8"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"timeout"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-bbb975"},"children":[{"type":"text","value":"10000"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"//請求攔截"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"use"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"// console.log(\"config\",config)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"token"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"token"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"//回傳攔截"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-964516"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-6891b4"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-65b52d"},"children":[{"type":"text","value":"//todo 錯誤處理"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"},()"}]},{"type":"element","tag":"span","props":{"class":"ct-26b60b"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"Message"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"請求有誤"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-964516"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-964516"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6891b4"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-9aac3f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-964516"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-9aac3f"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-964516"},"children":[{"type":"text","value":" url"}]},{"type":"element","tag":"span","props":{"class":"ct-9aac3f"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-964516"},"children":[{"type":"text","value":" data "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-964516"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"toLowerCase"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"switch"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"case"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"post"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"post"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"case"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" params"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"case"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"delete"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"delete"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" params"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"case"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"put"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"put"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"case"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"patch"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-069d0c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"patch"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-93a089"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-9ebf8e"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0d8a91"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-44b3a6"},"children":[{"type":"text","value":"未知的 method: "}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-067164"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-a91fd3"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-93a089"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-9ebf8e"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-93a089"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c3a293"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8130f8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-fb9e22"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a84a39"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"路由"},"children":[{"type":"text","value":"路由"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"佈署在server需要在server端做路由指向的調整，應把請求都指向前端路由去處理。\n"},{"type":"element","tag":"a","props":{"href":"https://book.vue.tw/CH4/4-1-vue-router-intro.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"參考Vue路由解說"}]}]}]},{"type":"element","tag":"h2","props":{"id":"vscode-vetur"},"children":[{"type":"text","value":"vscode vetur"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"情境:在.vue file中若出現scss的語法，vscode vetur套件會檢查.vue file可能出現警告訊息，原因推測是vetur無法認得scss的語法。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"警告訊息","src":"https://i.imgur.com/SL4En2X.jpg"},"children":[]}]},{"type":"element","tag":"info","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"解決方法:在vscode vetur 套件的設定中 取消對style tag內容的驗證。"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"關閉驗證","src":"https://i.imgur.com/zHGjiiq.jpg"},"children":[]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-c3a293{color:#FF9CAC}.ct-93a089{color:#F07178}.ct-9aac3f{color:#89DDFF}.ct-9ebf8e{color:#89DDFF}.ct-ceb4d5{color:#A6ACCD}.ct-26b60b{color:#C792EA}.ct-3e2f53{color:#89DDFF}.ct-f7c313{color:#A6ACCD}.ct-77a696{color:#C3E88D}.ct-069d0c{color:#89DDFF}.ct-19a1a4{color:#A6ACCD}.ct-65b52d{color:#676E95}.ct-6891b4{color:#C792EA}.ct-964516{color:#A6ACCD}.ct-bc5417{color:#F07178}.ct-0d8a91{color:#82AAFF}.ct-43804a{color:#F07178}.ct-bbb975{color:#F78C6C}.ct-8b82ce{color:#FF9CAC}.ct-8d49ee{color:#676E95}.ct-44b3a6{color:#C3E88D}.ct-a91fd3{color:#89DDFF}.ct-fb9e22{color:#89DDFF}.ct-8130f8{color:#F07178}.ct-067164{color:#A6ACCD}.ct-b1a175{color:#A6ACCD}.ct-a84a39{color:#89DDFF}.ct-ee3b5b{color:#89DDFF}.dark .ct-ee3b5b{color:#79C0FF}.dark .ct-a84a39{color:#C9D1D9}.dark .ct-b1a175{color:#C9D1D9}.dark .ct-067164{color:#C9D1D9}.dark .ct-8130f8{color:#C9D1D9}.dark .ct-fb9e22{color:#C9D1D9}.dark .ct-a91fd3{color:#A5D6FF}.dark .ct-44b3a6{color:#A5D6FF}.dark .ct-8d49ee{color:#8B949E}.dark .ct-8b82ce{color:#79C0FF}.dark .ct-bbb975{color:#79C0FF}.dark .ct-43804a{color:#A5D6FF}.dark .ct-0d8a91{color:#D2A8FF}.dark .ct-bc5417{color:#D2A8FF}.dark .ct-964516{color:#FFA657}.dark .ct-6891b4{color:#FF7B72}.dark .ct-65b52d{color:#8B949E}.dark .ct-19a1a4{color:#7EE787}.dark .ct-069d0c{color:#FF7B72}.dark .ct-77a696{color:#79C0FF}.dark .ct-f7c313{color:#79C0FF}.dark .ct-3e2f53{color:#79C0FF}.dark .ct-26b60b{color:#FF7B72}.dark .ct-ceb4d5{color:#79C0FF}.dark .ct-9ebf8e{color:#FF7B72}.dark .ct-9aac3f{color:#FFA657}.dark .ct-93a089{color:#C9D1D9}.dark .ct-c3a293{color:#79C0FF}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"安裝流程","depth":2,"text":"安裝流程"},{"id":"env檔","depth":2,"text":".env檔"},{"id":"tailwind設定","depth":2,"text":"tailwind設定"},{"id":"vue-config設定","depth":2,"text":"Vue config設定"},{"id":"axios封裝","depth":2,"text":"axios封裝"},{"id":"路由","depth":2,"text":"路由"},{"id":"vscode-vetur","depth":2,"text":"vscode vetur"}]}},"_type":"markdown","_id":"content:1.blog:4.Vue Pratice:1.Vue2 與vue-cli建置專案.md","_source":"content","_file":"1.blog/4.Vue Pratice/1.Vue2 與vue-cli建置專案.md","_extension":"md"},{"_path":"/blog/vue-pratice/card","_draft":false,"_partial":false,"_empty":false,"title":"vue3 slot & Card組件實作","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vue3-slot--card組件實作"},"children":[{"type":"text","value":"vue3 slot & Card組件實作"}]},{"type":"element","tag":"h2","props":{"id":"畫面需求"},"children":[{"type":"text","value":"畫面需求"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.圖片寬高比16:9"}]},{"type":"element","tag":"code","props":{"code":".img {\n  max-width: '100%';\n  aspect-ratio: 16 / 9;\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".img {\n  max-width: '100%';\n  aspect-ratio: 16 / 9;\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2.使用vue3 props & slot\n在vue3的template中可以直接使用不具名或具名的slot標籤。"}]},{"type":"element","tag":"code","props":{"code":"//子層  \n<slot name=\"dics\"></slot>\n\n//父層\n<template v-slot:dics>\n    <p v-for=\"key in Object.keys(item.dics)\" :key=\"key\">\n      <span>{{ key }}:</span>{{ item.dics[key] }}\n    </p>\n</template> \n    \n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//子層  \n<slot name=\"dics\"></slot>\n\n//父層\n<template v-slot:dics>\n    <p v-for=\"key in Object.keys(item.dics)\" :key=\"key\">\n      <span>{{ key }}:</span>{{ item.dics[key] }}\n    </p>\n</template> \n    \n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3.子層註冊事件並回傳操作父層資料\n-> 我在父層定義fn傳給子層做呼叫，達到callback作用"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"4.排版使用flex & grid"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/poCoY2t.jpg"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"cardvue"},"children":[{"type":"text","value":"Card.vue"}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nconst props = defineProps({\n  img: String,\n  isClick: Boolean,\n  handleBtnClick: Function,\n});\n</script>\n\n<template>\n  <div class=\"card\">\n    <div class=\"ratioBox\"><img class=\"img\" :src=\"props.img\" alt=\"\" /></div>\n    <div class=\"dics\">\n      <slot name=\"dics\"></slot>\n\n      <div class=\"btnP\">\n        <button\n          class=\"btn\"\n          :class=\"props.isClick ? 'btnDelete' : 'btnPrimary'\"\n          @click=\"handleBtnClick\"\n        >\n          {{ props.isClick ? \"DELETE\" : \"ADD\" }}\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.card {\n  display: flex;\n  flex-direction: column;\n  background: #333;\n  padding: 0px 10px;\n  max-width: 350px;\n}\n\n.img {\n  max-width: 100%;\n  aspect-ratio: 16 / 9;\n}\n\n.dics {\n  display: flex;\n  flex-direction: column;\n  color: #fff;\n  padding: 10px 0;\n}\np {\n  padding: 6px 10px;\n  display: grid;\n  grid-template-columns: 1fr 3fr;\n}\n\nspan {\n  color: #ccc;\n}\n.btnP {\n  padding: 6px 10px;\n  text-align: right;\n}\n\n.btn {\n  padding: 6px 10px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.5s;\n}\n\n.btnPrimary {\n  background-color: paleturquoise;\n}\n\n.btnDelete {\n  background-color: red;\n}\n</style>\n\n\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup>\nconst props = defineProps({\n  img: String,\n  isClick: Boolean,\n  handleBtnClick: Function,\n});\n</script>\n\n<template>\n  <div class=\"card\">\n    <div class=\"ratioBox\"><img class=\"img\" :src=\"props.img\" alt=\"\" /></div>\n    <div class=\"dics\">\n      <slot name=\"dics\"></slot>\n\n      <div class=\"btnP\">\n        <button\n          class=\"btn\"\n          :class=\"props.isClick ? 'btnDelete' : 'btnPrimary'\"\n          @click=\"handleBtnClick\"\n        >\n          {{ props.isClick ? \"DELETE\" : \"ADD\" }}\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.card {\n  display: flex;\n  flex-direction: column;\n  background: #333;\n  padding: 0px 10px;\n  max-width: 350px;\n}\n\n.img {\n  max-width: 100%;\n  aspect-ratio: 16 / 9;\n}\n\n.dics {\n  display: flex;\n  flex-direction: column;\n  color: #fff;\n  padding: 10px 0;\n}\np {\n  padding: 6px 10px;\n  display: grid;\n  grid-template-columns: 1fr 3fr;\n}\n\nspan {\n  color: #ccc;\n}\n.btnP {\n  padding: 6px 10px;\n  text-align: right;\n}\n\n.btn {\n  padding: 6px 10px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.5s;\n}\n\n.btnPrimary {\n  background-color: paleturquoise;\n}\n\n.btnDelete {\n  background-color: red;\n}\n</style>\n\n\n\n"}]}]}]}]},"tags":"學習","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vue3-slot--card組件實作"},"children":[{"type":"text","value":"vue3 slot & Card組件實作"}]},{"type":"element","tag":"h2","props":{"id":"畫面需求"},"children":[{"type":"text","value":"畫面需求"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.圖片寬高比16:9"}]},{"type":"element","tag":"code","props":{"code":".img {\n  max-width: '100%';\n  aspect-ratio: 16 / 9;\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7e5a25"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8ede79"},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-f26ef4"},"children":[{"type":"text","value":"max-width"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-405047"},"children":[{"type":"text","value":"100%"}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-888445"},"children":[{"type":"text","value":"aspect-ratio"}]},{"type":"element","tag":"span","props":{"class":"ct-2dda4b"},"children":[{"type":"text","value":"16"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":" / "}]},{"type":"element","tag":"span","props":{"class":"ct-2dda4b"},"children":[{"type":"text","value":"9"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2.使用vue3 props & slot\n在vue3的template中可以直接使用不具名或具名的slot標籤。"}]},{"type":"element","tag":"code","props":{"code":"//子層  \n<slot name=\"dics\"></slot>\n\n//父層\n<template v-slot:dics>\n    <p v-for=\"key in Object.keys(item.dics)\" :key=\"key\">\n      <span>{{ key }}:</span>{{ item.dics[key] }}\n    </p>\n</template> \n    \n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e96c86"},"children":[{"type":"text","value":"//子層  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d9da6"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-54e8c5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-405047"},"children":[{"type":"text","value":"dics"}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e96c86"},"children":[{"type":"text","value":"//父層"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-ba94d3"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea635a"},"children":[{"type":"text","value":"v-slot"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-ea635a"},"children":[{"type":"text","value":"dics"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"p"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d9da6"},"children":[{"type":"text","value":"v-for"}]},{"type":"element","tag":"span","props":{"class":"ct-54e8c5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-405047"},"children":[{"type":"text","value":"key in Object.keys(item.dics)"}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-5bd24e"},"children":[{"type":"text","value":"<span>{{"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea635a"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5bd24e"},"children":[{"type":"text","value":"}}:</span>{{"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5bd24e"},"children":[{"type":"text","value":"item.dics[key]"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5bd24e"},"children":[{"type":"text","value":"}}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-5bd24e"},"children":[{"type":"text","value":"</p>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5bd24e"},"children":[{"type":"text","value":"</template>"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"    "}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3.子層註冊事件並回傳操作父層資料\n-> 我在父層定義fn傳給子層做呼叫，達到callback作用"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"4.排版使用flex & grid"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/poCoY2t.jpg"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"cardvue"},"children":[{"type":"text","value":"Card.vue"}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nconst props = defineProps({\n  img: String,\n  isClick: Boolean,\n  handleBtnClick: Function,\n});\n</script>\n\n<template>\n  <div class=\"card\">\n    <div class=\"ratioBox\"><img class=\"img\" :src=\"props.img\" alt=\"\" /></div>\n    <div class=\"dics\">\n      <slot name=\"dics\"></slot>\n\n      <div class=\"btnP\">\n        <button\n          class=\"btn\"\n          :class=\"props.isClick ? 'btnDelete' : 'btnPrimary'\"\n          @click=\"handleBtnClick\"\n        >\n          {{ props.isClick ? \"DELETE\" : \"ADD\" }}\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.card {\n  display: flex;\n  flex-direction: column;\n  background: #333;\n  padding: 0px 10px;\n  max-width: 350px;\n}\n\n.img {\n  max-width: 100%;\n  aspect-ratio: 16 / 9;\n}\n\n.dics {\n  display: flex;\n  flex-direction: column;\n  color: #fff;\n  padding: 10px 0;\n}\np {\n  padding: 6px 10px;\n  display: grid;\n  grid-template-columns: 1fr 3fr;\n}\n\nspan {\n  color: #ccc;\n}\n.btnP {\n  padding: 6px 10px;\n  text-align: right;\n}\n\n.btn {\n  padding: 6px 10px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.5s;\n}\n\n.btnPrimary {\n  background-color: paleturquoise;\n}\n\n.btnDelete {\n  background-color: red;\n}\n</style>\n\n\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-ba94d3"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ea635a"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"const props = defineProps("}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  img: "}]},{"type":"element","tag":"span","props":{"class":"ct-33a165"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  isClick: "}]},{"type":"element","tag":"span","props":{"class":"ct-33a165"},"children":[{"type":"text","value":"Boolean"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  handleBtnClick: "}]},{"type":"element","tag":"span","props":{"class":"ct-33a165"},"children":[{"type":"text","value":"Function"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-ba94d3"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-ba94d3"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d9da6"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-54e8c5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-405047"},"children":[{"type":"text","value":"card"}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d9da6"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-54e8c5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-405047"},"children":[{"type":"text","value":"ratioBox"}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"><"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d9da6"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-54e8c5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-405047"},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d9da6"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-54e8c5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-405047"},"children":[{"type":"text","value":"dics"}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d9da6"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-54e8c5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-405047"},"children":[{"type":"text","value":"dics"}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7d9da6"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-54e8c5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-405047"},"children":[{"type":"text","value":"btnP"}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"button"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-7d9da6"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-54e8c5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-405047"},"children":[{"type":"text","value":"btn"}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-5bd24e"},"children":[{"type":"text","value":":class=\"props.isClick"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5bd24e"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-405047"},"children":[{"type":"text","value":"          @click="}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1c433c"},"children":[{"type":"text","value":"handleBtnClick\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"        >"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"{{"}]},{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":" props.isClick ? "}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-af10e5"},"children":[{"type":"text","value":"DELETE"}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ccd18e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-405047"},"children":[{"type":"text","value":"ADD"}]},{"type":"element","tag":"span","props":{"class":"ct-521d53"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"}}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"button"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-853341"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-ba94d3"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-ba94d3"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":".card "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  display: flex;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  flex"}]},{"type":"element","tag":"span","props":{"class":"ct-f20105"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"direction: column;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  background: #"}]},{"type":"element","tag":"span","props":{"class":"ct-2dda4b"},"children":[{"type":"text","value":"333"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  padding: 0px 10px;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  max"}]},{"type":"element","tag":"span","props":{"class":"ct-f20105"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"width: 350px;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":".img "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  max"}]},{"type":"element","tag":"span","props":{"class":"ct-f20105"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"width: "}]},{"type":"element","tag":"span","props":{"class":"ct-2dda4b"},"children":[{"type":"text","value":"100"}]},{"type":"element","tag":"span","props":{"class":"ct-f20105"},"children":[{"type":"text","value":"%"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  aspect"}]},{"type":"element","tag":"span","props":{"class":"ct-f20105"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"ratio: "}]},{"type":"element","tag":"span","props":{"class":"ct-2dda4b"},"children":[{"type":"text","value":"16"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f20105"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2dda4b"},"children":[{"type":"text","value":"9"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":".dics "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  display: flex;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  flex"}]},{"type":"element","tag":"span","props":{"class":"ct-f20105"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"direction: column;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  color: #fff;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  padding: 10px "}]},{"type":"element","tag":"span","props":{"class":"ct-2dda4b"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"p "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  padding: 6px 10px;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  display: grid;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  grid"}]},{"type":"element","tag":"span","props":{"class":"ct-f20105"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-f20105"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"columns: 1fr 3fr;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"span "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  color: #ccc;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":".btnP "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  padding: 6px 10px;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  text"}]},{"type":"element","tag":"span","props":{"class":"ct-f20105"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"align: right;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":".btn "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  padding: 6px 10px;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  text"}]},{"type":"element","tag":"span","props":{"class":"ct-f20105"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"align: center;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  cursor: pointer;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"  transition: all 0"}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":"5s;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":".btnPrimary "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  background"}]},{"type":"element","tag":"span","props":{"class":"ct-f20105"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"color: paleturquoise;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dfb5d2"},"children":[{"type":"text","value":".btnDelete "}]},{"type":"element","tag":"span","props":{"class":"ct-6d44de"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"  background"}]},{"type":"element","tag":"span","props":{"class":"ct-f20105"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-5003c8"},"children":[{"type":"text","value":"color: red;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-ba94d3"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-f6ab22"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f20105{color:#89DDFF}.ct-ccd18e{color:#F07178}.ct-af10e5{color:#F07178}.ct-1c433c{color:#89DDFF}.ct-33a165{color:#FFCB6B}.ct-5bd24e{color:#89DDFF}.ct-ea635a{color:#C792EA}.ct-ba94d3{color:#F07178}.ct-54e8c5{color:#89DDFF}.ct-7d9da6{color:#C792EA}.ct-853341{color:#F07178}.ct-e96c86{color:#676E95}.ct-f6ab22{color:#89DDFF}.ct-2dda4b{color:#F78C6C}.ct-888445{color:#A6ACCD}.ct-5003c8{color:#A6ACCD}.ct-405047{color:#C3E88D}.ct-521d53{color:#89DDFF}.ct-f26ef4{color:#B2CCD6}.ct-6d44de{color:#89DDFF}.ct-dfb5d2{color:#A6ACCD}.ct-8ede79{color:#FFCB6B}.ct-7e5a25{color:#89DDFF}.dark .ct-7e5a25{color:#79C0FF}.dark .ct-8ede79{color:#79C0FF}.dark .ct-dfb5d2{color:#C9D1D9}.dark .ct-6d44de{color:#C9D1D9}.dark .ct-f26ef4{color:#79C0FF}.dark .ct-521d53{color:#A5D6FF}.dark .ct-405047{color:#A5D6FF}.dark .ct-5003c8{color:#C9D1D9}.dark .ct-888445{color:#79C0FF}.dark .ct-2dda4b{color:#79C0FF}.dark .ct-f6ab22{color:#C9D1D9}.dark .ct-e96c86{color:#8B949E}.dark .ct-853341{color:#7EE787}.dark .ct-7d9da6{color:#79C0FF}.dark .ct-54e8c5{color:#FF7B72}.dark .ct-ba94d3{color:#7EE787}.dark .ct-ea635a{color:#79C0FF}.dark .ct-5bd24e{color:#FFA198}.dark .ct-33a165{color:#79C0FF}.dark .ct-1c433c{color:#FFA198}.dark .ct-af10e5{color:#A5D6FF}.dark .ct-ccd18e{color:#C9D1D9}.dark .ct-f20105{color:#FF7B72}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"畫面需求","depth":2,"text":"畫面需求"},{"id":"cardvue","depth":2,"text":"Card.vue"}]}},"_type":"markdown","_id":"content:1.blog:4.Vue Pratice:2.Card.md","_source":"content","_file":"1.blog/4.Vue Pratice/2.Card.md","_extension":"md"},{"_path":"/blog/vue-pratice/accountapp","_draft":false,"_partial":false,"_empty":false,"title":"vue3 花費紀錄 APP","description":"這次主要想測試以Vue為基底的UI庫\"Quasar\"，搭配Google Firebase9平台的API，來實現記帳的應用。Quasar的Tab、Dialog、Form、和Dialog在使用上和ElementUI的風格有不少差異，Quasar在可控的參數上有更多選項，在熟悉的情況下開發是很便利的。另外，這個專案是使用Quasar提供的CLI工具，而不是使用vue-cli或vite，在官方文檔中雖然是有提供這些工具的配置方式，但官方推薦是自家的工具。","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vue3-花費紀錄-app"},"children":[{"type":"text","value":"vue3 花費紀錄 APP"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"這次主要想測試以Vue為基底的UI庫\"Quasar\"，搭配Google Firebase9平台的API，來實現記帳的應用。Quasar的Tab、Dialog、Form、和Dialog在使用上和ElementUI的風格有不少差異，Quasar在可控的參數上有更多選項，在熟悉的情況下開發是很便利的。另外，這個專案是使用Quasar提供的CLI工具，而不是使用vue-cli或vite，在官方文檔中雖然是有提供這些工具的配置方式，但官方推薦是自家的工具。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/quasar-accountApp","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"github"}]}]},{"type":"element","tag":"h2","props":{"id":"stacks"},"children":[{"type":"text","value":"Stacks"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Firebase 9:權限、realtimeDB、hosting\nVue3\nPinia:替代Vuex為全域的資料管控\nQuasar v2.0.0 & Quasar cli\nTailwindcss\nVue3apexchart"}]},{"type":"element","tag":"h2","props":{"id":"權限"},"children":[{"type":"text","value":"權限"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"註冊user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"登入/登出"}]}]},{"type":"element","tag":"h3","props":{"id":"記帳"},"children":[{"type":"text","value":"記帳"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"新/刪/查/改 消費紀錄"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"新/刪/查/改 記帳Tag"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"消費紀錄統計圖表"}]}]},{"type":"element","tag":"h2","props":{"id":"pwa"},"children":[{"type":"text","value":"PWA"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在佈署的版本，這次透過Quasar cli打包出PWA的版本，所以在桌機chrome和移動端sarfari中可以下載成APP。"}]},{"type":"element","tag":"div","props":{"style":"{display:\"flex\"}"},"children":[{"type":"text","value":"\n    "},{"type":"element","tag":"img","props":{"src":"https://i.imgur.com/WA6H8s5.jpg","width":250,"alt":""},"children":[]},{"type":"text","value":"\n    "},{"type":"element","tag":"img","props":{"src":"https://i.imgur.com/eAxLq5P.jpg","width":250,"alt":""},"children":[]},{"type":"text","value":"\n    "},{"type":"element","tag":"img","props":{"src":"https://i.imgur.com/4oMvR5Z.jpg","width":250,"alt":""},"children":[]},{"type":"text","value":"\n    "},{"type":"element","tag":"img","props":{"src":"https://i.imgur.com/kWiwl2m.jpg","width":250,"alt":""},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"email註冊登入"},"children":[{"type":"text","value":"email註冊/登入"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在權限部分有多種可以註冊的方式，這個APP是使用email來註冊，註冊後的uid也可以拿來識別使用者。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/mzBvQUZ.jpg"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"專案中的配置"},"children":[{"type":"text","value":"專案中的配置"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"必須在專案中引入Firebase提供的SDK，並使用後台提供的資訊做APP跟Firebase服務的綁定。"}]},{"type":"element","tag":"code","props":{"code":"//src/firebase/index.js\n// Import the functions you need from the SDKs you need\nimport { initializeApp } from \"firebase/app\";\nimport { getAnalytics } from \"firebase/analytics\";\n// TODO: Add SDKs for Firebase products that you want to use\n// https://firebase.google.com/docs/web/setup#available-libraries\n\n// Your web app's Firebase configuration\n// For Firebase JS SDK v7.20.0 and later, measurementId is optional\nconst firebaseConfig = {\n  apiKey: \"AIzaSyBncSexDmqEHo1V_SgpHsi6FUdiNiiayoA\",\n  authDomain: \"account-app-f70c0.firebaseapp.com\",\n  projectId: \"account-app-f70c0\",\n  storageBucket: \"account-app-f70c0.appspot.com\",\n  databaseURL:\n    \"https://account-app-f70c0-default-rtdb.asia-southeast1.firebasedatabase.app/\",\n  messagingSenderId: \"893886700460\",\n  appId: \"1:893886700460:web:fbcc5bd3fc95013714f809\",\n  measurementId: \"G-J6SMYP2MZM\",\n};\n\n// Initialize Firebase\nconst app = initializeApp(firebaseConfig);\nconst analytics = getAnalytics(app);\n\nexport default app;\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//src/firebase/index.js\n// Import the functions you need from the SDKs you need\nimport { initializeApp } from \"firebase/app\";\nimport { getAnalytics } from \"firebase/analytics\";\n// TODO: Add SDKs for Firebase products that you want to use\n// https://firebase.google.com/docs/web/setup#available-libraries\n\n// Your web app's Firebase configuration\n// For Firebase JS SDK v7.20.0 and later, measurementId is optional\nconst firebaseConfig = {\n  apiKey: \"AIzaSyBncSexDmqEHo1V_SgpHsi6FUdiNiiayoA\",\n  authDomain: \"account-app-f70c0.firebaseapp.com\",\n  projectId: \"account-app-f70c0\",\n  storageBucket: \"account-app-f70c0.appspot.com\",\n  databaseURL:\n    \"https://account-app-f70c0-default-rtdb.asia-southeast1.firebasedatabase.app/\",\n  messagingSenderId: \"893886700460\",\n  appId: \"1:893886700460:web:fbcc5bd3fc95013714f809\",\n  measurementId: \"G-J6SMYP2MZM\",\n};\n\n// Initialize Firebase\nconst app = initializeApp(firebaseConfig);\nconst analytics = getAnalytics(app);\n\nexport default app;\n\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"api"},"children":[{"type":"text","value":"API"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"firebase後台提供的API可以註冊/登入/登出使用者和對DB的操作。DB的資料結構是一個JSON格式，所以每一層的設計要思考一下key/value的對應關係。"}]},{"type":"element","tag":"code","props":{"code":"//auth.js\nimport {\n  createUserWithEmailAndPassword,\n  getAuth,\n  signOut,\n  signInWithEmailAndPassword,\n} from \"firebase/auth\";\n\n...(略)\n\n//spend.js\nimport { getDatabase, ref, set, push, remove } from \"firebase/database\";\nexport const getMemberSpendRef = (uid) => {\n  if (!uid) return false;\n\n  return ref(db, `spend/${uid}`);\n};\n\nexport function pushSpend(obj = {}, uid) {\n  if (!uid) return false;\n\n  const newPostRef = push(ref(db, `spend/${uid}`));\n  const timeId = new Date().valueOf();\n  set(newPostRef, {\n    ...obj,\n    time: timeId,\n    tag:!!obj.tag?obj.tag:\"無tag\"\n  });\n}\n\nexport function removeSpend(uid, key) {\n  if (!uid || !key) return false;\n\n  remove(ref(db, `spend/${uid}/${key}`));\n}\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//auth.js\nimport {\n  createUserWithEmailAndPassword,\n  getAuth,\n  signOut,\n  signInWithEmailAndPassword,\n} from \"firebase/auth\";\n\n...(略)\n\n//spend.js\nimport { getDatabase, ref, set, push, remove } from \"firebase/database\";\nexport const getMemberSpendRef = (uid) => {\n  if (!uid) return false;\n\n  return ref(db, `spend/${uid}`);\n};\n\nexport function pushSpend(obj = {}, uid) {\n  if (!uid) return false;\n\n  const newPostRef = push(ref(db, `spend/${uid}`));\n  const timeId = new Date().valueOf();\n  set(newPostRef, {\n    ...obj,\n    time: timeId,\n    tag:!!obj.tag?obj.tag:\"無tag\"\n  });\n}\n\nexport function removeSpend(uid, key) {\n  if (!uid || !key) return false;\n\n  remove(ref(db, `spend/${uid}/${key}`));\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"db"},"children":[{"type":"text","value":"DB"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在spend紀錄中，我把user uid作為key。每一個user會對應多筆花費的紀錄，資料的uid則是透過API自動生成，而在更新/刪除時也可以去組出該筆資料的路徑做操作。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/2Z29kaZ.jpg"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"pwa換icon"},"children":[{"type":"text","value":"PWA換icon"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在換icon的過程，可能遇到錯誤會導致chrome和safari不能把APP作為PWA來下載，此時要確認dev tool中的錯誤訊息。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/9qlFnQJ.jpg"},"children":[]}]}]},"tags":"實作","categories":"開發","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vue3-花費紀錄-app"},"children":[{"type":"text","value":"vue3 花費紀錄 APP"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"這次主要想測試以Vue為基底的UI庫\"Quasar\"，搭配Google Firebase9平台的API，來實現記帳的應用。Quasar的Tab、Dialog、Form、和Dialog在使用上和ElementUI的風格有不少差異，Quasar在可控的參數上有更多選項，在熟悉的情況下開發是很便利的。另外，這個專案是使用Quasar提供的CLI工具，而不是使用vue-cli或vite，在官方文檔中雖然是有提供這些工具的配置方式，但官方推薦是自家的工具。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/quasar-accountApp","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"github"}]}]},{"type":"element","tag":"h2","props":{"id":"stacks"},"children":[{"type":"text","value":"Stacks"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Firebase 9:權限、realtimeDB、hosting\nVue3\nPinia:替代Vuex為全域的資料管控\nQuasar v2.0.0 & Quasar cli\nTailwindcss\nVue3apexchart"}]},{"type":"element","tag":"h2","props":{"id":"權限"},"children":[{"type":"text","value":"權限"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"註冊user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"登入/登出"}]}]},{"type":"element","tag":"h3","props":{"id":"記帳"},"children":[{"type":"text","value":"記帳"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"新/刪/查/改 消費紀錄"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"新/刪/查/改 記帳Tag"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"消費紀錄統計圖表"}]}]},{"type":"element","tag":"h2","props":{"id":"pwa"},"children":[{"type":"text","value":"PWA"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在佈署的版本，這次透過Quasar cli打包出PWA的版本，所以在桌機chrome和移動端sarfari中可以下載成APP。"}]},{"type":"element","tag":"div","props":{"style":"{display:\"flex\"}"},"children":[{"type":"text","value":"\n    "},{"type":"element","tag":"img","props":{"src":"https://i.imgur.com/WA6H8s5.jpg","width":250,"alt":""},"children":[]},{"type":"text","value":"\n    "},{"type":"element","tag":"img","props":{"src":"https://i.imgur.com/eAxLq5P.jpg","width":250,"alt":""},"children":[]},{"type":"text","value":"\n    "},{"type":"element","tag":"img","props":{"src":"https://i.imgur.com/4oMvR5Z.jpg","width":250,"alt":""},"children":[]},{"type":"text","value":"\n    "},{"type":"element","tag":"img","props":{"src":"https://i.imgur.com/kWiwl2m.jpg","width":250,"alt":""},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"email註冊登入"},"children":[{"type":"text","value":"email註冊/登入"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在權限部分有多種可以註冊的方式，這個APP是使用email來註冊，註冊後的uid也可以拿來識別使用者。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/mzBvQUZ.jpg"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"專案中的配置"},"children":[{"type":"text","value":"專案中的配置"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"必須在專案中引入Firebase提供的SDK，並使用後台提供的資訊做APP跟Firebase服務的綁定。"}]},{"type":"element","tag":"code","props":{"code":"//src/firebase/index.js\n// Import the functions you need from the SDKs you need\nimport { initializeApp } from \"firebase/app\";\nimport { getAnalytics } from \"firebase/analytics\";\n// TODO: Add SDKs for Firebase products that you want to use\n// https://firebase.google.com/docs/web/setup#available-libraries\n\n// Your web app's Firebase configuration\n// For Firebase JS SDK v7.20.0 and later, measurementId is optional\nconst firebaseConfig = {\n  apiKey: \"AIzaSyBncSexDmqEHo1V_SgpHsi6FUdiNiiayoA\",\n  authDomain: \"account-app-f70c0.firebaseapp.com\",\n  projectId: \"account-app-f70c0\",\n  storageBucket: \"account-app-f70c0.appspot.com\",\n  databaseURL:\n    \"https://account-app-f70c0-default-rtdb.asia-southeast1.firebasedatabase.app/\",\n  messagingSenderId: \"893886700460\",\n  appId: \"1:893886700460:web:fbcc5bd3fc95013714f809\",\n  measurementId: \"G-J6SMYP2MZM\",\n};\n\n// Initialize Firebase\nconst app = initializeApp(firebaseConfig);\nconst analytics = getAnalytics(app);\n\nexport default app;\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-af3a19"},"children":[{"type":"text","value":"//src/firebase/index.js"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-af3a19"},"children":[{"type":"text","value":"// Import the functions you need from the SDKs you need"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"initializeApp"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"firebase/app"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"getAnalytics"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"firebase/analytics"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-af3a19"},"children":[{"type":"text","value":"// TODO: Add SDKs for Firebase products that you want to use"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-af3a19"},"children":[{"type":"text","value":"// https://firebase.google.com/docs/web/setup#available-libraries"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-af3a19"},"children":[{"type":"text","value":"// Your web app's Firebase configuration"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-af3a19"},"children":[{"type":"text","value":"// For Firebase JS SDK v7.20.0 and later, measurementId is optional"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7d9723"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b657ba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b3626c"},"children":[{"type":"text","value":"firebaseConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-b657ba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8db3db"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"apiKey"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"AIzaSyBncSexDmqEHo1V_SgpHsi6FUdiNiiayoA"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"authDomain"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"account-app-f70c0.firebaseapp.com"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"projectId"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"account-app-f70c0"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"storageBucket"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"account-app-f70c0.appspot.com"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"databaseURL"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"https://account-app-f70c0-default-rtdb.asia-southeast1.firebasedatabase.app/"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"messagingSenderId"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"893886700460"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"appId"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"1:893886700460:web:fbcc5bd3fc95013714f809"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"measurementId"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"G-J6SMYP2MZM"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-406aa6"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-af3a19"},"children":[{"type":"text","value":"// Initialize Firebase"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7d9723"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b657ba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b3626c"},"children":[{"type":"text","value":"app"}]},{"type":"element","tag":"span","props":{"class":"ct-b657ba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8db3db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b657ba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-92cc8a"},"children":[{"type":"text","value":"initializeApp"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7d9723"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b657ba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b3626c"},"children":[{"type":"text","value":"analytics"}]},{"type":"element","tag":"span","props":{"class":"ct-b657ba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8db3db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b657ba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-92cc8a"},"children":[{"type":"text","value":"getAnalytics"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8db3db"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-869286"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8db3db"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-869286"},"children":[{"type":"text","value":" "}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"api"},"children":[{"type":"text","value":"API"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"firebase後台提供的API可以註冊/登入/登出使用者和對DB的操作。DB的資料結構是一個JSON格式，所以每一層的設計要思考一下key/value的對應關係。"}]},{"type":"element","tag":"code","props":{"code":"//auth.js\nimport {\n  createUserWithEmailAndPassword,\n  getAuth,\n  signOut,\n  signInWithEmailAndPassword,\n} from \"firebase/auth\";\n\n...(略)\n\n//spend.js\nimport { getDatabase, ref, set, push, remove } from \"firebase/database\";\nexport const getMemberSpendRef = (uid) => {\n  if (!uid) return false;\n\n  return ref(db, `spend/${uid}`);\n};\n\nexport function pushSpend(obj = {}, uid) {\n  if (!uid) return false;\n\n  const newPostRef = push(ref(db, `spend/${uid}`));\n  const timeId = new Date().valueOf();\n  set(newPostRef, {\n    ...obj,\n    time: timeId,\n    tag:!!obj.tag?obj.tag:\"無tag\"\n  });\n}\n\nexport function removeSpend(uid, key) {\n  if (!uid || !key) return false;\n\n  remove(ref(db, `spend/${uid}/${key}`));\n}\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-af3a19"},"children":[{"type":"text","value":"//auth.js"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"createUserWithEmailAndPassword"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"getAuth"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"signOut"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"signInWithEmailAndPassword"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"firebase/auth"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8db3db"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-b657ba"},"children":[{"type":"text","value":"(略)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-af3a19"},"children":[{"type":"text","value":"//spend.js"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"getDatabase"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"set"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"push"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"remove"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"firebase/database"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-773a82"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-773a82"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"uid"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c527c2"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-56dd7f"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"db"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"spend/"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"uid"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-406aa6"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-773a82"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-56dd7f"},"children":[{"type":"text","value":"pushSpend"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"uid"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c527c2"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-773a82"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0afc91"},"children":[{"type":"text","value":"newPostRef"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-56dd7f"},"children":[{"type":"text","value":"push"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-56dd7f"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"db"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"spend/"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"uid"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"))"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-773a82"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0afc91"},"children":[{"type":"text","value":"timeId"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9064ab"},"children":[{"type":"text","value":"Date"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-56dd7f"},"children":[{"type":"text","value":"valueOf"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-56dd7f"},"children":[{"type":"text","value":"set"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"newPostRef"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"obj"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"    time"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"timeId"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"    tag"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-406aa6"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-773a82"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-56dd7f"},"children":[{"type":"text","value":"removeSpend"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-935b9c"},"children":[{"type":"text","value":"uid"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"uid"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8c76"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c527c2"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-56dd7f"},"children":[{"type":"text","value":"remove"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-56dd7f"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"db"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"spend/"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"uid"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-eeaec1"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-2e34e9"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-42338b"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-07267f"},"children":[{"type":"text","value":"))"}]},{"type":"element","tag":"span","props":{"class":"ct-f1dbed"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-406aa6"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"db"},"children":[{"type":"text","value":"DB"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在spend紀錄中，我把user uid作為key。每一個user會對應多筆花費的紀錄，資料的uid則是透過API自動生成，而在更新/刪除時也可以去組出該筆資料的路徑做操作。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/2Z29kaZ.jpg"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"pwa換icon"},"children":[{"type":"text","value":"PWA換icon"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在換icon的過程，可能遇到錯誤會導致chrome和safari不能把APP作為PWA來下載，此時要確認dev tool中的錯誤訊息。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/9qlFnQJ.jpg"},"children":[]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-935b9c{color:#A6ACCD}.ct-9064ab{color:#FFCB6B}.ct-0afc91{color:#A6ACCD}.ct-56dd7f{color:#82AAFF}.ct-c527c2{color:#FF9CAC}.ct-773a82{color:#C792EA}.ct-869286{color:#A6ACCD}.ct-92cc8a{color:#82AAFF}.ct-406aa6{color:#89DDFF}.ct-8db3db{color:#89DDFF}.ct-b3626c{color:#A6ACCD}.ct-b657ba{color:#A6ACCD}.ct-7d9723{color:#C792EA}.ct-eeaec1{color:#C3E88D}.ct-42338b{color:#89DDFF}.ct-07267f{color:#F07178}.ct-f1dbed{color:#89DDFF}.ct-2e34e9{color:#A6ACCD}.ct-1e8c76{color:#89DDFF}.ct-af3a19{color:#676E95}.dark .ct-af3a19{color:#8B949E}.dark .ct-1e8c76{color:#FF7B72}.dark .ct-2e34e9{color:#C9D1D9}.dark .ct-f1dbed{color:#C9D1D9}.dark .ct-07267f{color:#C9D1D9}.dark .ct-42338b{color:#A5D6FF}.dark .ct-eeaec1{color:#A5D6FF}.dark .ct-7d9723{color:#FF7B72}.dark .ct-b657ba{color:#C9D1D9}.dark .ct-b3626c{color:#79C0FF}.dark .ct-8db3db{color:#FF7B72}.dark .ct-406aa6{color:#C9D1D9}.dark .ct-92cc8a{color:#D2A8FF}.dark .ct-869286{color:#FFA657}.dark .ct-773a82{color:#FF7B72}.dark .ct-c527c2{color:#79C0FF}.dark .ct-56dd7f{color:#D2A8FF}.dark .ct-0afc91{color:#79C0FF}.dark .ct-9064ab{color:#79C0FF}.dark .ct-935b9c{color:#FFA657}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"stacks","depth":2,"text":"Stacks"},{"id":"權限","depth":2,"text":"權限","children":[{"id":"記帳","depth":3,"text":"記帳"}]},{"id":"pwa","depth":2,"text":"PWA","children":[{"id":"email註冊登入","depth":3,"text":"email註冊/登入"},{"id":"專案中的配置","depth":3,"text":"專案中的配置"},{"id":"api","depth":3,"text":"API"},{"id":"db","depth":3,"text":"DB"},{"id":"pwa換icon","depth":3,"text":"PWA換icon"}]}]}},"_type":"markdown","_id":"content:1.blog:4.Vue Pratice:4.AccountApp.md","_source":"content","_file":"1.blog/4.Vue Pratice/4.AccountApp.md","_extension":"md"},{"_path":"/blog/vue-pratice/vue3viteelementplus","_draft":false,"_partial":false,"_empty":false,"title":"vue3、vite和ElementPlus專案建置","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vue3vite和elementplus專案建置"},"children":[{"type":"text","value":"vue3、vite和ElementPlus專案建置"}]},{"type":"element","tag":"h2","props":{"id":"安裝流程"},"children":[{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/guide/#trying-vite-online","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"安裝流程"}]}]},{"type":"element","tag":"code","props":{"code":"# node -v //16.13.0\n# npm -v //8.1.0\n\nnpm create vite@latest\n\ncd ${folder-name}\n\nnpm install\n\nnpm run dev\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# node -v //16.13.0\n# npm -v //8.1.0\n\nnpm create vite@latest\n\ncd ${folder-name}\n\nnpm install\n\nnpm run dev\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"啟動結果\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/oMXZAer.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"viteconfigjs"},"children":[{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite.config.js"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"這個設定屬性有插件(plugin)、打包配置(build)、樣式(css)、開發(server)等配置。\n以下範例是在專案中使用了vue3和"},{"type":"element","tag":"a","props":{"href":"https://element-plus.gitee.io/en-US/guide/quickstart.html#on-demand-import","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ElementPlus"}]},{"type":"text","value":"、根據不同mode參數在打包時做base路徑的調整、也在css部份加入sass(這能讓.vue檔lang='scss'被解析)。"}]},{"type":"element","tag":"code","props":{"code":"import { defineConfig, loadEnv } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport AutoImport from 'unplugin-auto-import/vite';\nimport Components from 'unplugin-vue-components/vite';\nimport { ElementPlusResolver } from 'unplugin-vue-components/resolvers';\nimport path from 'path';\n\nexport default ({ mode }) => {\n    return defineConfig({\n        base:\n            loadEnv(mode, process.cwd()).VITE_PROJECT_ENV === 'stage'\n                ? `/${loadEnv(mode, process.cwd()).VITE_PROJECT_NAME}/`\n                : '/',\n        resolve: {\n            alias: {\n                '@': path.resolve(__dirname, 'src')\n            }\n        },\n        css: {\n            preprocessorOptions: {\n                scss: {\n                    additionalData: `@use \"@/assets/styles/elementPlusInit.scss\" as *;`\n                }\n            }\n        },\n        plugins: [\n            vue(),\n            AutoImport({\n                resolvers: [ElementPlusResolver()]\n            }),\n            Components({\n                resolvers: [\n                    ElementPlusResolver({\n                        importStyle: 'sass'\n                        // directives: true,\n                        // version: \"1.2.0-beta.1\",\n                    })\n                ]\n            })\n        ],\n        build: {\n            chunkSizeWarningLimit: 1600\n        },\n        server: {\n            host: '0.0.0.0',\n            port: 3000\n        }\n    });\n};\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { defineConfig, loadEnv } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport AutoImport from 'unplugin-auto-import/vite';\nimport Components from 'unplugin-vue-components/vite';\nimport { ElementPlusResolver } from 'unplugin-vue-components/resolvers';\nimport path from 'path';\n\nexport default ({ mode }) => {\n    return defineConfig({\n        base:\n            loadEnv(mode, process.cwd()).VITE_PROJECT_ENV === 'stage'\n                ? `/${loadEnv(mode, process.cwd()).VITE_PROJECT_NAME}/`\n                : '/',\n        resolve: {\n            alias: {\n                '@': path.resolve(__dirname, 'src')\n            }\n        },\n        css: {\n            preprocessorOptions: {\n                scss: {\n                    additionalData: `@use \"@/assets/styles/elementPlusInit.scss\" as *;`\n                }\n            }\n        },\n        plugins: [\n            vue(),\n            AutoImport({\n                resolvers: [ElementPlusResolver()]\n            }),\n            Components({\n                resolvers: [\n                    ElementPlusResolver({\n                        importStyle: 'sass'\n                        // directives: true,\n                        // version: \"1.2.0-beta.1\",\n                    })\n                ]\n            })\n        ],\n        build: {\n            chunkSizeWarningLimit: 1600\n        },\n        server: {\n            host: '0.0.0.0',\n            port: 3000\n        }\n    });\n};\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"對應在package.json的腳本，腳本帶的參數mode可讓vite.config.js使用。"}]},{"type":"element","tag":"code","props":{"code":"{\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"stage\": \"vite --mode stage\",\n    \"build-stage\": \"vite build  --mode stage\",\n    \"build\": \"vite build\"\n  },\n}\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"stage\": \"vite --mode stage\",\n    \"build-stage\": \"vite build  --mode stage\",\n    \"build\": \"vite build\"\n  },\n}\n"}]}]}]},{"type":"element","tag":"warning","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在elementPlus要複寫既有的樣式定義，可以參照"},{"type":"element","tag":"a","props":{"href":"https://element-plus.gitee.io/en-US/guide/namespace.html#set-scss-css-vars","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官網"}]},{"type":"text","value":"寫法複寫，而在vite.config.js中的設定，是讓這個複寫的scss檔能都引入到各個元件。"}]}]},{"type":"element","tag":"code","props":{"code":"/*  elementPlusInit.scss */\n@forward 'element-plus/theme-chalk/src/common/var.scss' with (\n    $colors: (\n        'primary': (\n            'base': #3bb071\n        )\n    )\n);\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"/*  elementPlusInit.scss */\n@forward 'element-plus/theme-chalk/src/common/var.scss' with (\n    $colors: (\n        'primary': (\n            'base': #3bb071\n        )\n    )\n);\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"實際專案\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/wx0n43E.png"},"children":[]}]}]},"tags":"學習","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"vue3vite和elementplus專案建置"},"children":[{"type":"text","value":"vue3、vite和ElementPlus專案建置"}]},{"type":"element","tag":"h2","props":{"id":"安裝流程"},"children":[{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/guide/#trying-vite-online","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"安裝流程"}]}]},{"type":"element","tag":"code","props":{"code":"# node -v //16.13.0\n# npm -v //8.1.0\n\nnpm create vite@latest\n\ncd ${folder-name}\n\nnpm install\n\nnpm run dev\n\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-820589"},"children":[{"type":"text","value":"# node -v //16.13.0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-820589"},"children":[{"type":"text","value":"# npm -v //8.1.0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"npm create vite@latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c68463"},"children":[{"type":"text","value":"cd"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"folder-name"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"npm install"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"npm run dev"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"啟動結果\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/oMXZAer.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"viteconfigjs"},"children":[{"type":"element","tag":"a","props":{"href":"https://cn.vitejs.dev/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"vite.config.js"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"這個設定屬性有插件(plugin)、打包配置(build)、樣式(css)、開發(server)等配置。\n以下範例是在專案中使用了vue3和"},{"type":"element","tag":"a","props":{"href":"https://element-plus.gitee.io/en-US/guide/quickstart.html#on-demand-import","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ElementPlus"}]},{"type":"text","value":"、根據不同mode參數在打包時做base路徑的調整、也在css部份加入sass(這能讓.vue檔lang='scss'被解析)。"}]},{"type":"element","tag":"code","props":{"code":"import { defineConfig, loadEnv } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport AutoImport from 'unplugin-auto-import/vite';\nimport Components from 'unplugin-vue-components/vite';\nimport { ElementPlusResolver } from 'unplugin-vue-components/resolvers';\nimport path from 'path';\n\nexport default ({ mode }) => {\n    return defineConfig({\n        base:\n            loadEnv(mode, process.cwd()).VITE_PROJECT_ENV === 'stage'\n                ? `/${loadEnv(mode, process.cwd()).VITE_PROJECT_NAME}/`\n                : '/',\n        resolve: {\n            alias: {\n                '@': path.resolve(__dirname, 'src')\n            }\n        },\n        css: {\n            preprocessorOptions: {\n                scss: {\n                    additionalData: `@use \"@/assets/styles/elementPlusInit.scss\" as *;`\n                }\n            }\n        },\n        plugins: [\n            vue(),\n            AutoImport({\n                resolvers: [ElementPlusResolver()]\n            }),\n            Components({\n                resolvers: [\n                    ElementPlusResolver({\n                        importStyle: 'sass'\n                        // directives: true,\n                        // version: \"1.2.0-beta.1\",\n                    })\n                ]\n            })\n        ],\n        build: {\n            chunkSizeWarningLimit: 1600\n        },\n        server: {\n            host: '0.0.0.0',\n            port: 3000\n        }\n    });\n};\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"defineConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"loadEnv"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"vite"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" vue "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"@vitejs/plugin-vue"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" AutoImport "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"unplugin-auto-import/vite"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" Components "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"unplugin-vue-components/vite"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"ElementPlusResolver"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"unplugin-vue-components/resolvers"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" path "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"path"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-686a50"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-686a50"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-636f65"},"children":[{"type":"text","value":"({"}]},{"type":"element","tag":"span","props":{"class":"ct-686a50"},"children":[{"type":"text","value":" mode "}]},{"type":"element","tag":"span","props":{"class":"ct-636f65"},"children":[{"type":"text","value":"})"}]},{"type":"element","tag":"span","props":{"class":"ct-686a50"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-41f8c4"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-686a50"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"defineConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        base"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"loadEnv"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"mode"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"cwd"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"())"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6bcc3f"},"children":[{"type":"text","value":"VITE_PROJECT_ENV"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"stage"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"loadEnv"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-f6f5cb"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            alias"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8f01ee"},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"path"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"__dirname"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        css"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            preprocessorOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                scss"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                    additionalData"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"@use \"@/assets/styles/elementPlusInit.scss\" as *;"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        plugins"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"vue"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"AutoImport"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                resolvers"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"ElementPlusResolver"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"()]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"Components"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                resolvers"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-a09461"},"children":[{"type":"text","value":"ElementPlusResolver"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                        importStyle"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"sass"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66bed7"},"children":[{"type":"text","value":"                        "}]},{"type":"element","tag":"span","props":{"class":"ct-820589"},"children":[{"type":"text","value":"// directives: true,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66bed7"},"children":[{"type":"text","value":"                        "}]},{"type":"element","tag":"span","props":{"class":"ct-820589"},"children":[{"type":"text","value":"// version: \"1.2.0-beta.1\","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"                    "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aab38a"},"children":[{"type":"text","value":"                ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        ]"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        build"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            chunkSizeWarningLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fc4179"},"children":[{"type":"text","value":"1600"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        server"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            host"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"0.0.0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"            port"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fc4179"},"children":[{"type":"text","value":"3000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2c823d"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66bed7"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"對應在package.json的腳本，腳本帶的參數mode可讓vite.config.js使用。"}]},{"type":"element","tag":"code","props":{"code":"{\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"stage\": \"vite --mode stage\",\n    \"build-stage\": \"vite build  --mode stage\",\n    \"build\": \"vite build\"\n  },\n}\n","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66bed7"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7c246c"},"children":[{"type":"text","value":"scripts"}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-435cfd"},"children":[{"type":"text","value":"dev"}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"vite"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-435cfd"},"children":[{"type":"text","value":"stage"}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"vite --mode stage"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-435cfd"},"children":[{"type":"text","value":"build-stage"}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"vite build  --mode stage"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-435cfd"},"children":[{"type":"text","value":"build"}]},{"type":"element","tag":"span","props":{"class":"ct-a97117"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f09d8a"},"children":[{"type":"text","value":"vite build"}]},{"type":"element","tag":"span","props":{"class":"ct-91451e"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4c429e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-569aa5"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-66bed7"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"warning","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在elementPlus要複寫既有的樣式定義，可以參照"},{"type":"element","tag":"a","props":{"href":"https://element-plus.gitee.io/en-US/guide/namespace.html#set-scss-css-vars","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官網"}]},{"type":"text","value":"寫法複寫，而在vite.config.js中的設定，是讓這個複寫的scss檔能都引入到各個元件。"}]}]},{"type":"element","tag":"code","props":{"code":"/*  elementPlusInit.scss */\n@forward 'element-plus/theme-chalk/src/common/var.scss' with (\n    $colors: (\n        'primary': (\n            'base': #3bb071\n        )\n    )\n);\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-820589"},"children":[{"type":"text","value":"/*  elementPlusInit.scss */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c95da1"},"children":[{"type":"text","value":"@forward"}]},{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":" 'element-plus/theme-chalk/src/common/var.scss' with ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"    $colors: ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"        'primary': ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"            'base': #3bb071"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"        )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":"    )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f06c1f"},"children":[{"type":"text","value":");"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"實際專案\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/wx0n43E.png"},"children":[]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-c95da1{color:#89DDFF}.ct-435cfd{color:#FFCB6B}.ct-7c246c{color:#C792EA}.ct-a97117{color:#89DDFF}.ct-fc4179{color:#F78C6C}.ct-aab38a{color:#F07178}.ct-66bed7{color:#89DDFF}.ct-8f01ee{color:#F07178}.ct-6bcc3f{color:#A6ACCD}.ct-a09461{color:#82AAFF}.ct-41f8c4{color:#C792EA}.ct-636f65{color:#89DDFF}.ct-686a50{color:#A6ACCD}.ct-f09d8a{color:#C3E88D}.ct-91451e{color:#89DDFF}.ct-2c823d{color:#F07178}.ct-f6f5cb{color:#89DDFF}.ct-569aa5{color:#89DDFF}.ct-4c429e{color:#A6ACCD}.ct-c68463{color:#82AAFF}.ct-f06c1f{color:#A6ACCD}.ct-820589{color:#676E95}.dark .ct-820589{color:#8B949E}.dark .ct-f06c1f{color:#C9D1D9}.dark .ct-c68463{color:#79C0FF}.dark .ct-4c429e{color:#C9D1D9}.dark .ct-569aa5{color:#C9D1D9}.dark .ct-f6f5cb{color:#FF7B72}.dark .ct-2c823d{color:#C9D1D9}.dark .ct-91451e{color:#A5D6FF}.dark .ct-f09d8a{color:#A5D6FF}.dark .ct-686a50{color:#FFA657}.dark .ct-636f65{color:#FFA657}.dark .ct-41f8c4{color:#FF7B72}.dark .ct-a09461{color:#D2A8FF}.dark .ct-6bcc3f{color:#79C0FF}.dark .ct-8f01ee{color:#A5D6FF}.dark .ct-66bed7{color:#C9D1D9}.dark .ct-aab38a{color:#C9D1D9}.dark .ct-fc4179{color:#79C0FF}.dark .ct-a97117{color:#79C0FF}.dark .ct-7c246c{color:#79C0FF}.dark .ct-435cfd{color:#79C0FF}.dark .ct-c95da1{color:#FF7B72}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"安裝流程","depth":2,"text":"安裝流程"},{"id":"viteconfigjs","depth":2,"text":"vite.config.js"}]}},"_type":"markdown","_id":"content:1.blog:4.Vue Pratice:4.vue3、vite和ElementPlus專案建置.md","_source":"content","_file":"1.blog/4.Vue Pratice/4.vue3、vite和ElementPlus專案建置.md","_extension":"md"},{"_path":"/blog/nuxt.js/nuxt-app","_draft":false,"_partial":false,"_empty":false,"title":"Nuxt3 APP","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"nuxt3-app"},"children":[{"type":"text","value":"Nuxt3 APP"}]},{"type":"element","tag":"h2","props":{"id":"建立一個nuxt3-app"},"children":[{"type":"text","value":"建立一個nuxt3 app"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"node版本: 16.13.0"}]},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"套件使用版本"}]}]},{"type":"element","tag":"code","props":{"code":"{\n  \"devDependencies\": {\n    \"autoprefixer\": \"^10.4.7\",\n    \"nuxt\": \"3.0.0-rc.6\",\n    \"postcss\": \"^8.4.14\",\n    \"sass\": \"^1.53.0\",\n    \"sass-loader\": \"10.1.1\",\n    \"tailwindcss\": \"^3.1.6\"\n  }\n}\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  \"devDependencies\": {\n    \"autoprefixer\": \"^10.4.7\",\n    \"nuxt\": \"3.0.0-rc.6\",\n    \"postcss\": \"^8.4.14\",\n    \"sass\": \"^1.53.0\",\n    \"sass-loader\": \"10.1.1\",\n    \"tailwindcss\": \"^3.1.6\"\n  }\n}\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"官方建議使用\n1.vscode\n2.volor套件"}]},{"type":"element","tag":"code","props":{"code":"npx nuxi init {nuxt-app-name}\n","language":"shell="},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx nuxi init {nuxt-app-name}\n"}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"配置tailwind"},"children":[{"type":"text","value":"配置tailwind"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"package:tailwindcss、postcss、autoprefixer"}]}]},{"type":"element","tag":"code","props":{"code":"npm install -D tailwindcss postcss@latest autoprefixer@latest\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm install -D tailwindcss postcss@latest autoprefixer@latest\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"tailwind.config.js"}]}]},{"type":"element","tag":"code","props":{"code":"npx tailwindcss init\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx tailwindcss init\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"module.exports = {\n  mode: 'jit',\n  content: [\n    './components/**/*.{vue,js}',\n    './layouts/**/*.vue',\n    './pages/**/*.vue',\n    './plugins/**/*.{js,ts}',\n    './app.vue',\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"module.exports = {\n  mode: 'jit',\n  content: [\n    './components/**/*.{vue,js}',\n    './layouts/**/*.vue',\n    './pages/**/*.vue',\n    './plugins/**/*.{js,ts}',\n    './app.vue',\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"tailwind.css"}]}]},{"type":"element","tag":"code","props":{"code":"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"postcss.config.js"}]}]},{"type":"element","tag":"code","props":{"code":"module.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n};\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"module.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n};\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  css: ['@/assets/css/tailwind.css'],\n  build: {\n    postcss: {\n      postcssOptions: require('./postcss.config.js'),\n    },\n  },\n});\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineNuxtConfig({\n  css: ['@/assets/css/tailwind.css'],\n  build: {\n    postcss: {\n      postcssOptions: require('./postcss.config.js'),\n    },\n  },\n});\n\n"}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"配置scss"},"children":[{"type":"text","value":"配置scss"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"package:sass-loader、sass"}]}]},{"type":"element","tag":"code","props":{"code":"npm i -D sass-loader@10.1.1 --save-exact && npm i -D sass\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm i -D sass-loader@10.1.1 --save-exact && npm i -D sass\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"完成"},"children":[{"type":"text","value":"完成"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/JyBBAGo.png"},"children":[]}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nimport '@/assets/css/tailwind.css';\n</script>\n<template>\n    <div>\n        <h1 class=\"title\">\n            Hello~~\n            <span>World</span>\n        </h1>\n    </div>\n</template>\n\n<style lang=\"scss\">\n.title {\n    @apply font-bold text-2xl text-red-600;\n    span {\n        @apply text-purple-600;\n    }\n}\n</style>\n\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup>\nimport '@/assets/css/tailwind.css';\n</script>\n<template>\n    <div>\n        <h1 class=\"title\">\n            Hello~~\n            <span>World</span>\n        </h1>\n    </div>\n</template>\n\n<style lang=\"scss\">\n.title {\n    @apply font-bold text-2xl text-red-600;\n    span {\n        @apply text-purple-600;\n    }\n}\n</style>\n\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"nuxt3-app"},"children":[{"type":"text","value":"Nuxt3 APP"}]},{"type":"element","tag":"h2","props":{"id":"建立一個nuxt3-app"},"children":[{"type":"text","value":"建立一個nuxt3 app"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"node版本: 16.13.0"}]},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"套件使用版本"}]}]},{"type":"element","tag":"code","props":{"code":"{\n  \"devDependencies\": {\n    \"autoprefixer\": \"^10.4.7\",\n    \"nuxt\": \"3.0.0-rc.6\",\n    \"postcss\": \"^8.4.14\",\n    \"sass\": \"^1.53.0\",\n    \"sass-loader\": \"10.1.1\",\n    \"tailwindcss\": \"^3.1.6\"\n  }\n}\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"devDependencies"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e96b2d"},"children":[{"type":"text","value":"autoprefixer"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"^10.4.7"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e96b2d"},"children":[{"type":"text","value":"nuxt"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"3.0.0-rc.6"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e96b2d"},"children":[{"type":"text","value":"postcss"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"^8.4.14"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e96b2d"},"children":[{"type":"text","value":"sass"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"^1.53.0"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e96b2d"},"children":[{"type":"text","value":"sass-loader"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"10.1.1"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e96b2d"},"children":[{"type":"text","value":"tailwindcss"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"^3.1.6"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"官方建議使用\n1.vscode\n2.volor套件"}]},{"type":"element","tag":"code","props":{"code":"npx nuxi init {nuxt-app-name}\n","language":"shell="},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"npx nuxi init {nuxt-app-name}"}]}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"配置tailwind"},"children":[{"type":"text","value":"配置tailwind"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"package:tailwindcss、postcss、autoprefixer"}]}]},{"type":"element","tag":"code","props":{"code":"npm install -D tailwindcss postcss@latest autoprefixer@latest\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"npm install -D tailwindcss postcss@latest autoprefixer@latest"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"tailwind.config.js"}]}]},{"type":"element","tag":"code","props":{"code":"npx tailwindcss init\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"npx tailwindcss init"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"module.exports = {\n  mode: 'jit',\n  content: [\n    './components/**/*.{vue,js}',\n    './layouts/**/*.vue',\n    './pages/**/*.vue',\n    './plugins/**/*.{js,ts}',\n    './app.vue',\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8d46b7"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d46b7"},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"mode"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"jit"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"./components/**/*.{vue,js}"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"./layouts/**/*.vue"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"./pages/**/*.vue"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"./plugins/**/*.{js,ts}"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"./app.vue"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"  ]"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"extend"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":"{},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"plugins"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" []"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"tailwind.css"}]}]},{"type":"element","tag":"code","props":{"code":"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aeb89e"},"children":[{"type":"text","value":"@tailwind"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" base"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aeb89e"},"children":[{"type":"text","value":"@tailwind"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" components"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aeb89e"},"children":[{"type":"text","value":"@tailwind"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" utilities"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"postcss.config.js"}]}]},{"type":"element","tag":"code","props":{"code":"module.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n};\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8d46b7"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8d46b7"},"children":[{"type":"text","value":"exports"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"plugins"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"tailwindcss"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":"{},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"autoprefixer"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":"{},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"nuxt.config.js"}]}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  css: ['@/assets/css/tailwind.css'],\n  build: {\n    postcss: {\n      postcssOptions: require('./postcss.config.js'),\n    },\n  },\n});\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aeb89e"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-ac4cca"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-aeb89e"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-ac4cca"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3dc6e4"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-ac4cca"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d7a086"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac4cca"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"css"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"@/assets/css/tailwind.css"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-d7a086"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac4cca"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"build"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"postcss"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-92fbba"},"children":[{"type":"text","value":"postcssOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-56146b"},"children":[{"type":"text","value":"require"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"./postcss.config.js"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":"},"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d7a086"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-ac4cca"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"配置scss"},"children":[{"type":"text","value":"配置scss"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"package:sass-loader、sass"}]}]},{"type":"element","tag":"code","props":{"code":"npm i -D sass-loader@10.1.1 --save-exact && npm i -D sass\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"npm i -D sass-loader@10.1.1 --save-exact "}]},{"type":"element","tag":"span","props":{"class":"ct-83d232"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":" npm i -D sass"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"完成"},"children":[{"type":"text","value":"完成"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/JyBBAGo.png"},"children":[]}]},{"type":"element","tag":"code","props":{"code":"<script setup>\nimport '@/assets/css/tailwind.css';\n</script>\n<template>\n    <div>\n        <h1 class=\"title\">\n            Hello~~\n            <span>World</span>\n        </h1>\n    </div>\n</template>\n\n<style lang=\"scss\">\n.title {\n    @apply font-bold text-2xl text-red-600;\n    span {\n        @apply text-purple-600;\n    }\n}\n</style>\n\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4211d2"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-aeb89e"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"@/assets/css/tailwind.css"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-4211d2"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-4211d2"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"class":"ct-6b1878"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"1 "}]},{"type":"element","tag":"span","props":{"class":"ct-6b1878"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"Hello"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"~~"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"            <"}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"World"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"        </"}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"1>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-4211d2"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c98575"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-1ebc12"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6b1878"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-b770ab"},"children":[{"type":"text","value":"scss"}]},{"type":"element","tag":"span","props":{"class":"ct-96a786"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-1cd8a2"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"    @"}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"apply"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"font-bold"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"text-"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"2xl "}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"text-red-"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"600;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"        @"}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"apply"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b5768"},"children":[{"type":"text","value":"text-purple-"}]},{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"600;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b15e85"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-4211d2"},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"class":"ct-126897"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-1ebc12{color:#F07178}.ct-6b1878{color:#C792EA}.ct-7b5768{color:#C792EA}.ct-4211d2{color:#F07178}.ct-83d232{color:#89DDFF}.ct-56146b{color:#82AAFF}.ct-d7a086{color:#89DDFF}.ct-3dc6e4{color:#82AAFF}.ct-ac4cca{color:#A6ACCD}.ct-aeb89e{color:#89DDFF}.ct-1cd8a2{color:#A6ACCD}.ct-8d46b7{color:#89DDFF}.ct-b15e85{color:#A6ACCD}.ct-e96b2d{color:#F07178}.ct-c98575{color:#89DDFF}.ct-b770ab{color:#C3E88D}.ct-96a786{color:#89DDFF}.ct-92fbba{color:#F07178}.ct-126897{color:#89DDFF}.dark .ct-126897{color:#C9D1D9}.dark .ct-92fbba{color:#C9D1D9}.dark .ct-96a786{color:#A5D6FF}.dark .ct-b770ab{color:#A5D6FF}.dark .ct-c98575{color:#C9D1D9}.dark .ct-e96b2d{color:#A5D6FF}.dark .ct-b15e85{color:#C9D1D9}.dark .ct-8d46b7{color:#79C0FF}.dark .ct-1cd8a2{color:#C9D1D9}.dark .ct-aeb89e{color:#FF7B72}.dark .ct-ac4cca{color:#FFA657}.dark .ct-3dc6e4{color:#D2A8FF}.dark .ct-d7a086{color:#FFA657}.dark .ct-56146b{color:#79C0FF}.dark .ct-83d232{color:#FF7B72}.dark .ct-4211d2{color:#7EE787}.dark .ct-7b5768{color:#79C0FF}.dark .ct-6b1878{color:#79C0FF}.dark .ct-1ebc12{color:#7EE787}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"建立一個nuxt3-app","depth":2,"text":"建立一個nuxt3 app"},{"id":"配置tailwind","depth":2,"text":"配置tailwind"},{"id":"配置scss","depth":2,"text":"配置scss"},{"id":"完成","depth":2,"text":"完成"}]}},"_type":"markdown","_id":"content:1.blog:5.Nuxt.js:1.Nuxt app.md","_source":"content","_file":"1.blog/5.Nuxt.js/1.Nuxt app.md","_extension":"md"},{"_path":"/blog/nuxt.js/nuxt-feat","_draft":false,"_partial":false,"_empty":false,"title":"Nuxt3 features","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"nuxt3-features"},"children":[{"type":"text","value":"Nuxt3 features"}]},{"type":"element","tag":"h2","props":{"id":"概念"},"children":[{"type":"text","value":"概念"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"打通web後端到前端的開發方式，優勢上是語言的一致，資料類型即的一致。在NuxtJS也提供各種功能，來做到SSR(Server Side Render)機制，並利用專案的資料夾結構去綁定這些功能。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"功能資料夾包含:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"├─page"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n├─layouts"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n├─components"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n├─composable"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n├─public"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n├─server"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n├─content"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n└─middleware"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"以上這些我將依據前後端的使用情境，將它們歸類，並就我理解的使用方式作補充。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用版本 \"nuxt\": \"^3.0.0-rc.3\""}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"前端"},"children":[{"type":"text","value":"前端"}]},{"type":"element","tag":"h3","props":{"id":"page"},"children":[{"type":"text","value":"├─page"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在前端每個頁面路徑(path)都能在這個資料夾內找到對應的頁面檔。比如'/'對應'index.vue，'/about'對應'about.vue'。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"nuxt也支援path上帶有動態的參數，page的檔名命名方式為\""},{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"paramName"}]},{"type":"text","value":".vue\"。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/guide/directory-structure/pages","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt page doc"}]}]},{"type":"element","tag":"h3","props":{"id":"layouts"},"children":[{"type":"text","value":"├─layouts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"而在各頁面中可以使用共用的佈局模板，在這個資料夾預設使用為default.vue，搭配slot特性與頁面去做嵌套。"}]},{"type":"element","tag":"code","props":{"code":"#default.vue\n<div>\n    <Nav />\n    <div class=\"content-wrapper\">\n      <slot />\n    </div>\n</div>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#default.vue\n<div>\n    <Nav />\n    <div class=\"content-wrapper\">\n      <slot />\n    </div>\n</div>\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"components"},"children":[{"type":"text","value":"├─components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"而不管是在page、layouts中還可以切分出更多共用的單位組件時，比如Nav組件使用在不同layout組件時，就會在這個資料夾下新增Nav.vue。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"同時，在Nuxt框架下，也提供各種組件來使用，比如，NuxtLink組件，來實作連結。"}]},{"type":"element","tag":"code","props":{"code":"#Nav.vue\n<template>\n  <header\n    class=\"flex items-center justify-between h-20 px-[5%] lg:px-[15%] nav-header\"\n  >\n    <NuxtLink to=\"/\" class=\"font-bold text-2xl lg:text-4xl\">\n      <span class=\"text-primary\">N</span>otes\n    </NuxtLink>\n  </header>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#Nav.vue\n<template>\n  <header\n    class=\"flex items-center justify-between h-20 px-[5%] lg:px-[15%] nav-header\"\n  >\n    <NuxtLink to=\"/\" class=\"font-bold text-2xl lg:text-4xl\">\n      <span class=\"text-primary\">N</span>otes\n    </NuxtLink>\n  </header>\n</template>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/guide/directory-structure/components","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt3 components doc"}]}]},{"type":"element","tag":"h3","props":{"id":"public"},"children":[{"type":"text","value":"├─public"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在資料夾下放置的靜態檔案，可以讓客戶端直接訪問取得。比如放置favicon.ico，在部署後可以透過 "},{"type":"element","tag":"a","props":{"href":"https://nuxt3-notes.vercel.app/favicon.ico","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://nuxt3-notes.vercel.app/favicon.ico"}]},{"type":"text","value":" 訪問。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"目前nuxt3文件示意參照nuxt2 static說明。\n"},{"type":"element","tag":"a","props":{"href":"https://nuxtjs.org/docs/directory-structure/static/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt2 static doc"}]}]},{"type":"element","tag":"h3","props":{"id":"composable"},"children":[{"type":"text","value":"├─composable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在資料夾結構中的每支檔案可以管理目前頁面間的共同狀態，使用方式是會自動import到page、layout的vue檔來呼叫，這也包含nuxt本身提供的方法，比如useHead()、useAsyncData()...等等。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/api/composables/use-async-data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt composable doc"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"範例:"}]},{"type":"element","tag":"code","props":{"code":"// composables/useAuth.js\nconst decode = (cookie = 'null') => JSON.parse(cookie);\nconst encode = (cookie) => JSON.stringify(cookie);\n\nexport const useAuth = () => {\n  const authCookie = useCookie('auth', {\n    encode,\n    decode,\n    default: () => null,\n  });\n\n  const deleteCookie = async (guessWord) => {\n    authCookie.value = await $fetch(`/api/auth`, {\n      method: 'DELETE',\n    });\n  };\n\n  return { authCookie, deleteCookie };\n};\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// composables/useAuth.js\nconst decode = (cookie = 'null') => JSON.parse(cookie);\nconst encode = (cookie) => JSON.stringify(cookie);\n\nexport const useAuth = () => {\n  const authCookie = useCookie('auth', {\n    encode,\n    decode,\n    default: () => null,\n  });\n\n  const deleteCookie = async (guessWord) => {\n    authCookie.value = await $fetch(`/api/auth`, {\n      method: 'DELETE',\n    });\n  };\n\n  return { authCookie, deleteCookie };\n};\n\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"//使用\nconst { authCookie, deleteCookie } = useAuth();\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//使用\nconst { authCookie, deleteCookie } = useAuth();\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"middleware"},"children":[{"type":"text","value":"├─middleware"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在資料夾中可定義路由的中間層，作為像是訪問權限的確認。\n範例:"}]},{"type":"element","tag":"code","props":{"code":"//auth.global.js\nexport default defineNuxtRouteMiddleware((to, from)=>{\n  console.log('in nuxt middleware auth.js')\n  const { authCookie, deleteCookie } = useAuth();\n  if(to.path === '/'){\n      return navigateTo('/')\n  }else if(!authCookie.value){\n      return navigateTo('/')\n  }else{\n      return navigateTo(to.path)\n  }\n})\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//auth.global.js\nexport default defineNuxtRouteMiddleware((to, from)=>{\n  console.log('in nuxt middleware auth.js')\n  const { authCookie, deleteCookie } = useAuth();\n  if(to.path === '/'){\n      return navigateTo('/')\n  }else if(!authCookie.value){\n      return navigateTo('/')\n  }else{\n      return navigateTo(to.path)\n  }\n})\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"後端"},"children":[{"type":"text","value":"後端"}]},{"type":"element","tag":"h3","props":{"id":"server"},"children":[{"type":"text","value":"├─server"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在server/api資料夾下，nuxt提供前端呼叫API server的模擬機制，來把資料回應給前端。\n以範例來解說，defineEventHandler是nuxt定義的事件函式，event模擬的request中包含了呼叫請求的資訊。"}]},{"type":"element","tag":"code","props":{"code":"//server/api/user/index.js\nimport { v4 as uuid } from 'uuid';\nimport { sendError } from 'h3';\n\n//模擬使用\nconst db = {\n  users: [],\n};\n\nexport default defineEventHandler(async (event) => {\n  switch (event.req.method) {\n    \n    //GET http://localhost:3000/api/user\n    case 'GET': {\n      return db.users;\n    }\n    //POST http://localhost:3000/api/user\n    case 'POST': {\n      const body = await useBody(event);\n      if (!body.userName) {\n        const badRequestErr = createError({\n          statusCode: 400,\n          statusMessage: 'userName is not found',\n        });\n        sendError(event, badRequestErr);\n      }\n      const newUser = {\n        id: uuid(),\n        item: body.userName,\n        online: true,\n      };\n\n      db.users.push(newUser);\n      return newUser;\n    }\n  }\n});\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//server/api/user/index.js\nimport { v4 as uuid } from 'uuid';\nimport { sendError } from 'h3';\n\n//模擬使用\nconst db = {\n  users: [],\n};\n\nexport default defineEventHandler(async (event) => {\n  switch (event.req.method) {\n    \n    //GET http://localhost:3000/api/user\n    case 'GET': {\n      return db.users;\n    }\n    //POST http://localhost:3000/api/user\n    case 'POST': {\n      const body = await useBody(event);\n      if (!body.userName) {\n        const badRequestErr = createError({\n          statusCode: 400,\n          statusMessage: 'userName is not found',\n        });\n        sendError(event, badRequestErr);\n      }\n      const newUser = {\n        id: uuid(),\n        item: body.userName,\n        online: true,\n      };\n\n      db.users.push(newUser);\n      return newUser;\n    }\n  }\n});\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"前端部分，使用$fetch()、useFetch()呼叫server/api對應結構的檔案"}]},{"type":"element","tag":"code","props":{"code":"\nconst resultGet = await $fetch(\"/api/user\",{method:\"GET\"});\n\nconst resultPost = await $fetch(\"/api/user\",{method:\"POST\"});\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\nconst resultGet = await $fetch(\"/api/user\",{method:\"GET\"});\n\nconst resultPost = await $fetch(\"/api/user\",{method:\"POST\"});\n\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"content"},"children":[{"type":"text","value":"├─content"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在這個資料夾中可放置各種文檔和資料，如.md、.json，概念在客戶端不能直接透過路徑去訪問到這些檔案，而是需要透過nuxt提供的queryContent()來調取檔案。\n範例:"}]},{"type":"element","tag":"code","props":{"code":"#加入一個lineBot串接.md\ncontent\n├─1.blog\n  ├─1.Third Part Tools\n    ├─1.lineBot串接.md\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"#加入一個lineBot串接.md\ncontent\n├─1.blog\n  ├─1.Third Part Tools\n    ├─1.lineBot串接.md\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"//透過檔案路徑取得檔案 (目前版本中文字元會被取代掉)\nconst filePath = \"blog/third-part-tools/lineBot\";\nconst { data: blog } = await useAsyncData(filePath, () => {\n  return queryContent(filePath).findOne();\n});\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//透過檔案路徑取得檔案 (目前版本中文字元會被取代掉)\nconst filePath = \"blog/third-part-tools/lineBot\";\nconst { data: blog } = await useAsyncData(filePath, () => {\n  return queryContent(filePath).findOne();\n});\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/api/composables/query-content/#findone","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt quertyContent doc"}]}]},{"type":"element","tag":"h2","props":{"id":"nuxtconfigjs"},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/api/configuration/nuxt.config","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt config doc"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nuxt3-notes","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"範例內容"}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"nuxt3-features"},"children":[{"type":"text","value":"Nuxt3 features"}]},{"type":"element","tag":"h2","props":{"id":"概念"},"children":[{"type":"text","value":"概念"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"打通web後端到前端的開發方式，優勢上是語言的一致，資料類型即的一致。在NuxtJS也提供各種功能，來做到SSR(Server Side Render)機制，並利用專案的資料夾結構去綁定這些功能。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"功能資料夾包含:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"├─page"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n├─layouts"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n├─components"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n├─composable"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n├─public"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n├─server"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n├─content"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n└─middleware"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"以上這些我將依據前後端的使用情境，將它們歸類，並就我理解的使用方式作補充。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用版本 \"nuxt\": \"^3.0.0-rc.3\""}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"前端"},"children":[{"type":"text","value":"前端"}]},{"type":"element","tag":"h3","props":{"id":"page"},"children":[{"type":"text","value":"├─page"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在前端每個頁面路徑(path)都能在這個資料夾內找到對應的頁面檔。比如'/'對應'index.vue，'/about'對應'about.vue'。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"nuxt也支援path上帶有動態的參數，page的檔名命名方式為\""},{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"paramName"}]},{"type":"text","value":".vue\"。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/guide/directory-structure/pages","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt page doc"}]}]},{"type":"element","tag":"h3","props":{"id":"layouts"},"children":[{"type":"text","value":"├─layouts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"而在各頁面中可以使用共用的佈局模板，在這個資料夾預設使用為default.vue，搭配slot特性與頁面去做嵌套。"}]},{"type":"element","tag":"code","props":{"code":"#default.vue\n<div>\n    <Nav />\n    <div class=\"content-wrapper\">\n      <slot />\n    </div>\n</div>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":"#default.vue"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-79796b"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-ca712f"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e601"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"content-wrapper"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-ca712f"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-79796b"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"components"},"children":[{"type":"text","value":"├─components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"而不管是在page、layouts中還可以切分出更多共用的單位組件時，比如Nav組件使用在不同layout組件時，就會在這個資料夾下新增Nav.vue。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"同時，在Nuxt框架下，也提供各種組件來使用，比如，NuxtLink組件，來實作連結。"}]},{"type":"element","tag":"code","props":{"code":"#Nav.vue\n<template>\n  <header\n    class=\"flex items-center justify-between h-20 px-[5%] lg:px-[15%] nav-header\"\n  >\n    <NuxtLink to=\"/\" class=\"font-bold text-2xl lg:text-4xl\">\n      <span class=\"text-primary\">N</span>otes\n    </NuxtLink>\n  </header>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":"#Nav.vue"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-79796b"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-26a2ba"},"children":[{"type":"text","value":"header"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e601"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"flex items-center justify-between h-20 px-[5%] lg:px-[15%] nav-header"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":"  >"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"class":"ct-a8e601"},"children":[{"type":"text","value":"NuxtLink"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e601"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e601"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"font-bold text-2xl lg:text-4xl"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-a8e601"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a8e601"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"text-primary"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-a8e601"},"children":[{"type":"text","value":"N"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-a8e601"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-a8e601"},"children":[{"type":"text","value":"otes"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"class":"ct-26a2ba"},"children":[{"type":"text","value":"NuxtLink"}]},{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-26a2ba"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-79796b"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/guide/directory-structure/components","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt3 components doc"}]}]},{"type":"element","tag":"h3","props":{"id":"public"},"children":[{"type":"text","value":"├─public"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在資料夾下放置的靜態檔案，可以讓客戶端直接訪問取得。比如放置favicon.ico，在部署後可以透過 "},{"type":"element","tag":"a","props":{"href":"https://nuxt3-notes.vercel.app/favicon.ico","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://nuxt3-notes.vercel.app/favicon.ico"}]},{"type":"text","value":" 訪問。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"目前nuxt3文件示意參照nuxt2 static說明。\n"},{"type":"element","tag":"a","props":{"href":"https://nuxtjs.org/docs/directory-structure/static/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt2 static doc"}]}]},{"type":"element","tag":"h3","props":{"id":"composable"},"children":[{"type":"text","value":"├─composable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在資料夾結構中的每支檔案可以管理目前頁面間的共同狀態，使用方式是會自動import到page、layout的vue檔來呼叫，這也包含nuxt本身提供的方法，比如useHead()、useAsyncData()...等等。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/api/composables/use-async-data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt composable doc"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"範例:"}]},{"type":"element","tag":"code","props":{"code":"// composables/useAuth.js\nconst decode = (cookie = 'null') => JSON.parse(cookie);\nconst encode = (cookie) => JSON.stringify(cookie);\n\nexport const useAuth = () => {\n  const authCookie = useCookie('auth', {\n    encode,\n    decode,\n    default: () => null,\n  });\n\n  const deleteCookie = async (guessWord) => {\n    authCookie.value = await $fetch(`/api/auth`, {\n      method: 'DELETE',\n    });\n  };\n\n  return { authCookie, deleteCookie };\n};\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-93548d"},"children":[{"type":"text","value":"// composables/useAuth.js"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c28af4"},"children":[{"type":"text","value":"parse"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"(cookie)"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-872295"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77e6b6"},"children":[{"type":"text","value":"encode"}]},{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9a0aae"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-872295"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a6ea3"},"children":[{"type":"text","value":"JSON"}]},{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ccf8e4"},"children":[{"type":"text","value":"stringify"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e5f5b"},"children":[{"type":"text","value":"authCookie"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"useCookie"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"auth"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"encode"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"decode"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-211fbf"},"children":[{"type":"text","value":"deleteCookie"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-64efab"},"children":[{"type":"text","value":"guessWord"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"authCookie"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"$fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"/api/auth"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"      method"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"DELETE"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"authCookie"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"deleteCookie"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"//使用\nconst { authCookie, deleteCookie } = useAuth();\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-93548d"},"children":[{"type":"text","value":"//使用"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"middleware"},"children":[{"type":"text","value":"├─middleware"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在資料夾中可定義路由的中間層，作為像是訪問權限的確認。\n範例:"}]},{"type":"element","tag":"code","props":{"code":"//auth.global.js\nexport default defineNuxtRouteMiddleware((to, from)=>{\n  console.log('in nuxt middleware auth.js')\n  const { authCookie, deleteCookie } = useAuth();\n  if(to.path === '/'){\n      return navigateTo('/')\n  }else if(!authCookie.value){\n      return navigateTo('/')\n  }else{\n      return navigateTo(to.path)\n  }\n})\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-93548d"},"children":[{"type":"text","value":"//auth.global.js"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-64efab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-64efab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"defineNuxtRouteMiddleware"}]},{"type":"element","tag":"span","props":{"class":"ct-64efab"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e3e269"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-64efab"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-e3e269"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-64efab"},"children":[{"type":"text","value":" from"}]},{"type":"element","tag":"span","props":{"class":"ct-e3e269"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"in nuxt middleware auth.js"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e5f5b"},"children":[{"type":"text","value":"authCookie"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e5f5b"},"children":[{"type":"text","value":"deleteCookie"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"useAuth"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"path"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"navigateTo"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"authCookie"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"navigateTo"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"navigateTo"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"path"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-fefef6"},"children":[{"type":"text","value":")"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"後端"},"children":[{"type":"text","value":"後端"}]},{"type":"element","tag":"h3","props":{"id":"server"},"children":[{"type":"text","value":"├─server"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在server/api資料夾下，nuxt提供前端呼叫API server的模擬機制，來把資料回應給前端。\n以範例來解說，defineEventHandler是nuxt定義的事件函式，event模擬的request中包含了呼叫請求的資訊。"}]},{"type":"element","tag":"code","props":{"code":"//server/api/user/index.js\nimport { v4 as uuid } from 'uuid';\nimport { sendError } from 'h3';\n\n//模擬使用\nconst db = {\n  users: [],\n};\n\nexport default defineEventHandler(async (event) => {\n  switch (event.req.method) {\n    \n    //GET http://localhost:3000/api/user\n    case 'GET': {\n      return db.users;\n    }\n    //POST http://localhost:3000/api/user\n    case 'POST': {\n      const body = await useBody(event);\n      if (!body.userName) {\n        const badRequestErr = createError({\n          statusCode: 400,\n          statusMessage: 'userName is not found',\n        });\n        sendError(event, badRequestErr);\n      }\n      const newUser = {\n        id: uuid(),\n        item: body.userName,\n        online: true,\n      };\n\n      db.users.push(newUser);\n      return newUser;\n    }\n  }\n});\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-93548d"},"children":[{"type":"text","value":"//server/api/user/index.js"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"v4"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"uuid"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"uuid"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"sendError"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"h3"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-93548d"},"children":[{"type":"text","value":"//模擬使用"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-872295"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a6ea3"},"children":[{"type":"text","value":"db"}]},{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9a0aae"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"users"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" []"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-64efab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-64efab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"defineEventHandler"}]},{"type":"element","tag":"span","props":{"class":"ct-64efab"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-64efab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e3e269"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-64efab"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-e3e269"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-64efab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-64efab"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"switch"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"req"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-700624"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-93548d"},"children":[{"type":"text","value":"//GET http://localhost:3000/api/user"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"case"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"GET"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"db"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"users"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-93548d"},"children":[{"type":"text","value":"//POST http://localhost:3000/api/user"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"case"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"POST"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e5f5b"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"useBody"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"userName"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e5f5b"},"children":[{"type":"text","value":"badRequestErr"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"createError"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"          statusCode"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-612341"},"children":[{"type":"text","value":"400"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"          statusMessage"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-29f9a1"},"children":[{"type":"text","value":"userName is not found"}]},{"type":"element","tag":"span","props":{"class":"ct-556986"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"sendError"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"badRequestErr"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2e5f5b"},"children":[{"type":"text","value":"newUser"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"        id"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"uuid"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"        item"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"userName"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"        online"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-85ed47"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"db"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"users"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"push"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"newUser"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"newUser"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-fefef6"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"前端部分，使用$fetch()、useFetch()呼叫server/api對應結構的檔案"}]},{"type":"element","tag":"code","props":{"code":"\nconst resultGet = await $fetch(\"/api/user\",{method:\"GET\"});\n\nconst resultPost = await $fetch(\"/api/user\",{method:\"POST\"});\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"content"},"children":[{"type":"text","value":"├─content"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在這個資料夾中可放置各種文檔和資料，如.md、.json，概念在客戶端不能直接透過路徑去訪問到這些檔案，而是需要透過nuxt提供的queryContent()來調取檔案。\n範例:"}]},{"type":"element","tag":"code","props":{"code":"#加入一個lineBot串接.md\ncontent\n├─1.blog\n  ├─1.Third Part Tools\n    ├─1.lineBot串接.md\n","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-93548d"},"children":[{"type":"text","value":"#加入一個lineBot串接.md"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":"content"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":"├─1.blog"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":"  ├─1.Third Part Tools"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":"    ├─1.lineBot串接.md"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"//透過檔案路徑取得檔案 (目前版本中文字元會被取代掉)\nconst filePath = \"blog/third-part-tools/lineBot\";\nconst { data: blog } = await useAsyncData(filePath, () => {\n  return queryContent(filePath).findOne();\n});\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-93548d"},"children":[{"type":"text","value":"//透過檔案路徑取得檔案 (目前版本中文字元會被取代掉)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-872295"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a6ea3"},"children":[{"type":"text","value":"filePath"}]},{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9a0aae"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b8e852"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-157fba"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-26a62d"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dadb4e"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b74e72"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"queryContent"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":"filePath"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-9aacbf"},"children":[{"type":"text","value":"findOne"}]},{"type":"element","tag":"span","props":{"class":"ct-554b17"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-fb58b1"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-a74964"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/api/composables/query-content/#findone","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt quertyContent doc"}]}]},{"type":"element","tag":"h2","props":{"id":"nuxtconfigjs"},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/api/configuration/nuxt.config","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nuxt config doc"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nuxt3-notes","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"範例內容"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-26a2ba{color:#C792EA}.ct-dadb4e{color:#F07178}.ct-85ed47{color:#FF9CAC}.ct-612341{color:#F78C6C}.ct-700624{color:#F07178}.ct-fefef6{color:#A6ACCD}.ct-e3e269{color:#89DDFF}.ct-64efab{color:#A6ACCD}.ct-211fbf{color:#A6ACCD}.ct-9aacbf{color:#82AAFF}.ct-2e5f5b{color:#A6ACCD}.ct-554b17{color:#F07178}.ct-ccf8e4{color:#82AAFF}.ct-7a6ea3{color:#A6ACCD}.ct-9a0aae{color:#89DDFF}.ct-77e6b6{color:#A6ACCD}.ct-872295{color:#C792EA}.ct-c28af4{color:#82AAFF}.ct-b74e72{color:#89DDFF}.ct-26a62d{color:#C792EA}.ct-93548d{color:#676E95}.ct-29f9a1{color:#C3E88D}.ct-556986{color:#89DDFF}.ct-a8e601{color:#C792EA}.ct-ca712f{color:#F07178}.ct-a74964{color:#89DDFF}.ct-fb58b1{color:#A6ACCD}.ct-79796b{color:#F07178}.ct-157fba{color:#89DDFF}.ct-b8e852{color:#A6ACCD}.dark .ct-b8e852{color:#C9D1D9}.dark .ct-157fba{color:#C9D1D9}.dark .ct-79796b{color:#7EE787}.dark .ct-fb58b1{color:#C9D1D9}.dark .ct-a74964{color:#C9D1D9}.dark .ct-ca712f{color:#7EE787}.dark .ct-a8e601{color:#79C0FF}.dark .ct-556986{color:#A5D6FF}.dark .ct-29f9a1{color:#A5D6FF}.dark .ct-93548d{color:#8B949E}.dark .ct-26a62d{color:#FF7B72}.dark .ct-b74e72{color:#FF7B72}.dark .ct-c28af4{color:#79C0FF}.dark .ct-872295{color:#FF7B72}.dark .ct-77e6b6{color:#D2A8FF}.dark .ct-9a0aae{color:#FF7B72}.dark .ct-7a6ea3{color:#79C0FF}.dark .ct-ccf8e4{color:#79C0FF}.dark .ct-554b17{color:#C9D1D9}.dark .ct-2e5f5b{color:#79C0FF}.dark .ct-9aacbf{color:#D2A8FF}.dark .ct-211fbf{color:#D2A8FF}.dark .ct-64efab{color:#FFA657}.dark .ct-e3e269{color:#FFA657}.dark .ct-fefef6{color:#FFA657}.dark .ct-700624{color:#C9D1D9}.dark .ct-612341{color:#79C0FF}.dark .ct-85ed47{color:#79C0FF}.dark .ct-dadb4e{color:#FFA657}.dark .ct-26a2ba{color:#79C0FF}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"概念","depth":2,"text":"概念"},{"id":"前端","depth":2,"text":"前端","children":[{"id":"page","depth":3,"text":"├─page"},{"id":"layouts","depth":3,"text":"├─layouts"},{"id":"components","depth":3,"text":"├─components"},{"id":"public","depth":3,"text":"├─public"},{"id":"composable","depth":3,"text":"├─composable"},{"id":"middleware","depth":3,"text":"├─middleware"}]},{"id":"後端","depth":2,"text":"後端","children":[{"id":"server","depth":3,"text":"├─server"},{"id":"content","depth":3,"text":"├─content"}]},{"id":"nuxtconfigjs","depth":2,"text":"nuxt.config.js"}]}},"_type":"markdown","_id":"content:1.blog:5.Nuxt.js:2.nuxt feat.md","_source":"content","_file":"1.blog/5.Nuxt.js/2.nuxt feat.md","_extension":"md"},{"_path":"/blog/nuxt.js/color-mode","_draft":false,"_partial":false,"_empty":false,"title":"Nuxt3顏色模式","description":"透過html結構裡的上下層繼承變數的特性，當上層變數指向的背景色、文字色改變時，下層的樣式即可響應。","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"顏色模式實現概念"},"children":[{"type":"text","value":"顏色模式實現概念"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"透過html結構裡的上下層繼承變數的特性，當上層變數指向的背景色、文字色改變時，下層的樣式即可響應。"}]},{"type":"element","tag":"h2","props":{"id":"css配置"},"children":[{"type":"text","value":"css配置"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在document html樹狀結構中，html或body都可以作為綁定的上層。這裡預設一個body預設的樣式對照，使用了css變數的語法(ex. --mode-text-color:rgba(0, 0, 0, 0.8);)；而另一個深色模式則是多了一個class名稱的body。"}]},{"type":"element","tag":"code","props":{"code":"body.light-mode {\n  background-color: #fff;\n  color: rgba(0, 0, 0, 0.8);\n  --mode-text-color: rgba(0, 0, 0, 0.8);\n  --mode-text-color-hover: #6d28d9;\n  --border-color: #ccc;\n}\nbody.dark-mode {\n  background-color: #091a28;\n  color: #ebf4f1;\n  --mode-text-color: #ebf4f1;\n  --mode-text-color-hover: #6d28d9;\n  --border-color: #fff;\n}\n\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"body.light-mode {\n  background-color: #fff;\n  color: rgba(0, 0, 0, 0.8);\n  --mode-text-color: rgba(0, 0, 0, 0.8);\n  --mode-text-color-hover: #6d28d9;\n  --border-color: #ccc;\n}\nbody.dark-mode {\n  background-color: #091a28;\n  color: #ebf4f1;\n  --mode-text-color: #ebf4f1;\n  --mode-text-color-hover: #6d28d9;\n  --border-color: #fff;\n}\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在html渲染結果對照\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/wJ0dg5B.jpg"},"children":[]},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/rsP9HC5.jpg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"而在下層的樣式中，就可以使用上層定義好的變量。"}]},{"type":"element","tag":"code","props":{"code":".tocBox {\n  border-color: var(--border-color);\n}\n\n.prose {\n  color: var(--mode-text-color);\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".tocBox {\n  border-color: var(--border-color);\n}\n\n.prose {\n  color: var(--mode-text-color);\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"取得作業系統的顏色模式"},"children":[{"type":"text","value":"取得作業系統的顏色模式"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"瀏覽器可以取得使用者作業系統的顏色模式，再讓javascript來讀取，這部分的資訊儲存於media內。並且多一個監聽事件，在使用者改變系統顏色模式時來響應。"}]},{"type":"element","tag":"code","props":{"code":"window.matchMedia('(prefers-color-scheme: dark)').matches :Boolean\n\nwindow\n    .matchMedia(\"(prefers-color-scheme: dark)\")\n    .addEventListener(\"change\", function (event) {\n        console.log(event.matches)\n    }\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"window.matchMedia('(prefers-color-scheme: dark)').matches :Boolean\n\nwindow\n    .matchMedia(\"(prefers-color-scheme: dark)\")\n    .addEventListener(\"change\", function (event) {\n        console.log(event.matches)\n    }\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"自訂可切換的顏色模式"},"children":[{"type":"text","value":"自訂可切換的顏色模式"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"跟使用者作業系統的顏色模式相對脫鉤，我預想是把顏色模式儲存於瀏覽器的localstorage，對於使用者切換上更便利，不需要再去改動作業系統的顏色模式。"}]},{"type":"element","tag":"code","props":{"code":"//可以先抓取作業系統的顏色模式\nlet mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : null;\n\n//再抓取使用者存取瀏覽器操作的顏色模式紀錄\nmode = localStorage.getItem('app-color-mode') ?? (mode ?? 'light');\n\n//最後去把目標的上層html tag綁定對應顏色模式的class名稱\ndocument.getElementsByTagName('body')[0].setAttribute('class', `${mode}-mode`);\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//可以先抓取作業系統的顏色模式\nlet mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : null;\n\n//再抓取使用者存取瀏覽器操作的顏色模式紀錄\nmode = localStorage.getItem('app-color-mode') ?? (mode ?? 'light');\n\n//最後去把目標的上層html tag綁定對應顏色模式的class名稱\ndocument.getElementsByTagName('body')[0].setAttribute('class', `${mode}-mode`);\n\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"serversiderender和clientsiderender差異"},"children":[{"type":"text","value":"ServerSideRender和ClientSideRender差異"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"window和document物件必須是在Client端的瀏覽器運行時才能使用，所以當渲染機制是使用SSR時，就必須注意這段取得和判別顏色模式的腳本是在client端發生，才能符合這次介紹的顏色模式機制。"}]},{"type":"element","tag":"code","props":{"code":"//Nuxt3 SSR情境下，判別的腳本寫在onMounted這個hook中\n\nonMounted(() => {\n  let mode = localStorage.setItem('nuxt3-app-color-mode', mode) ?? 'light'\n\n  document?.getElementsByTagName('body')[0]?.setAttribute('class', `${mode}-mode`);\n});\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//Nuxt3 SSR情境下，判別的腳本寫在onMounted這個hook中\n\nonMounted(() => {\n  let mode = localStorage.setItem('nuxt3-app-color-mode', mode) ?? 'light'\n\n  document?.getElementsByTagName('body')[0]?.setAttribute('class', `${mode}-mode`);\n});\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"同時在nuxt3框架之下，狀態管理的方式可以這樣使用，來實作切換功能。"}]},{"type":"element","tag":"code","props":{"code":"const colorEnum = {\n  DARK: 'dark',\n  LIGHT: 'light',\n  SEPIA: 'sepia',\n};\n\nconst appMode = useState('appMode', () => null);\n\nconst handleAppMode = () => {\n  switch (appMode.value) {\n    case colorEnum.LIGHT: {\n      appMode.value = colorEnum.DARK;\n      break;\n    }\n    case colorEnum.DARK: {\n      appMode.value = colorEnum.SEPIA;\n      break;\n    }\n    case colorEnum.SEPIA: {\n      appMode.value = colorEnum.LIGHT;\n      break;\n    }\n  }\n  setTimeout(() => {\n    addModeClass(appMode.value);\n  }, 100);\n};\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const colorEnum = {\n  DARK: 'dark',\n  LIGHT: 'light',\n  SEPIA: 'sepia',\n};\n\nconst appMode = useState('appMode', () => null);\n\nconst handleAppMode = () => {\n  switch (appMode.value) {\n    case colorEnum.LIGHT: {\n      appMode.value = colorEnum.DARK;\n      break;\n    }\n    case colorEnum.DARK: {\n      appMode.value = colorEnum.SEPIA;\n      break;\n    }\n    case colorEnum.SEPIA: {\n      appMode.value = colorEnum.LIGHT;\n      break;\n    }\n  }\n  setTimeout(() => {\n    addModeClass(appMode.value);\n  }, 100);\n};\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nuxt3-notes/blob/main/components/Nav.vue","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt3內實作完整程式碼"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.section.io/engineering-education/watch-for-system-dark-mode-using-js-css/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"How to Watch for System Dark Mode Changes Using JavaScript and CSS"}]}]},{"type":"element","tag":"info","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2022-08-01 編輯"}]}]}]},"tags":"學習","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"顏色模式實現概念"},"children":[{"type":"text","value":"顏色模式實現概念"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"透過html結構裡的上下層繼承變數的特性，當上層變數指向的背景色、文字色改變時，下層的樣式即可響應。"}]},{"type":"element","tag":"h2","props":{"id":"css配置"},"children":[{"type":"text","value":"css配置"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在document html樹狀結構中，html或body都可以作為綁定的上層。這裡預設一個body預設的樣式對照，使用了css變數的語法(ex. --mode-text-color:rgba(0, 0, 0, 0.8);)；而另一個深色模式則是多了一個class名稱的body。"}]},{"type":"element","tag":"code","props":{"code":"body.light-mode {\n  background-color: #fff;\n  color: rgba(0, 0, 0, 0.8);\n  --mode-text-color: rgba(0, 0, 0, 0.8);\n  --mode-text-color-hover: #6d28d9;\n  --border-color: #ccc;\n}\nbody.dark-mode {\n  background-color: #091a28;\n  color: #ebf4f1;\n  --mode-text-color: #ebf4f1;\n  --mode-text-color-hover: #6d28d9;\n  --border-color: #fff;\n}\n\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"body.light-mode {\n  background-color: #fff;\n  color: rgba(0, 0, 0, 0.8);\n  --mode-text-color: rgba(0, 0, 0, 0.8);\n  --mode-text-color-hover: #6d28d9;\n  --border-color: #ccc;\n}\nbody.dark-mode {\n  background-color: #091a28;\n  color: #ebf4f1;\n  --mode-text-color: #ebf4f1;\n  --mode-text-color-hover: #6d28d9;\n  --border-color: #fff;\n}"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在html渲染結果對照\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/wJ0dg5B.jpg"},"children":[]},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/rsP9HC5.jpg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"而在下層的樣式中，就可以使用上層定義好的變量。"}]},{"type":"element","tag":"code","props":{"code":".tocBox {\n  border-color: var(--border-color);\n}\n\n.prose {\n  color: var(--mode-text-color);\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f25aa1"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-742a84"},"children":[{"type":"text","value":"tocBox"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e62701"},"children":[{"type":"text","value":"border-color"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-45c4df"},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-32229d"},"children":[{"type":"text","value":"--border-color"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce5069"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f25aa1"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-742a84"},"children":[{"type":"text","value":"prose"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e62701"},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-45c4df"},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-32229d"},"children":[{"type":"text","value":"--mode-text-color"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce5069"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"取得作業系統的顏色模式"},"children":[{"type":"text","value":"取得作業系統的顏色模式"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"瀏覽器可以取得使用者作業系統的顏色模式，再讓javascript來讀取，這部分的資訊儲存於media內。並且多一個監聽事件，在使用者改變系統顏色模式時來響應。"}]},{"type":"element","tag":"code","props":{"code":"window.matchMedia('(prefers-color-scheme: dark)').matches :Boolean\n\nwindow\n    .matchMedia(\"(prefers-color-scheme: dark)\")\n    .addEventListener(\"change\", function (event) {\n        console.log(event.matches)\n    }\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0e08d3"},"children":[{"type":"text","value":"matchMedia"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"(prefers-color-scheme: dark)"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"matches :"}]},{"type":"element","tag":"span","props":{"class":"ct-742a84"},"children":[{"type":"text","value":"Boolean"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-36abd9"},"children":[{"type":"text","value":"window"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0e08d3"},"children":[{"type":"text","value":"matchMedia"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"(prefers-color-scheme: dark)"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0e08d3"},"children":[{"type":"text","value":"addEventListener"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"change"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d05924"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-32229d"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0e08d3"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"matches"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"自訂可切換的顏色模式"},"children":[{"type":"text","value":"自訂可切換的顏色模式"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"跟使用者作業系統的顏色模式相對脫鉤，我預想是把顏色模式儲存於瀏覽器的localstorage，對於使用者切換上更便利，不需要再去改動作業系統的顏色模式。"}]},{"type":"element","tag":"code","props":{"code":"//可以先抓取作業系統的顏色模式\nlet mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : null;\n\n//再抓取使用者存取瀏覽器操作的顏色模式紀錄\nmode = localStorage.getItem('app-color-mode') ?? (mode ?? 'light');\n\n//最後去把目標的上層html tag綁定對應顏色模式的class名稱\ndocument.getElementsByTagName('body')[0].setAttribute('class', `${mode}-mode`);\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-12aec5"},"children":[{"type":"text","value":"//可以先抓取作業系統的顏色模式"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d05924"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" mode "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" window"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0e08d3"},"children":[{"type":"text","value":"matchMedia"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"(prefers-color-scheme: dark)"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"matches "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"dark"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-12aec5"},"children":[{"type":"text","value":"//再抓取使用者存取瀏覽器操作的顏色模式紀錄"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"mode "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" localStorage"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0e08d3"},"children":[{"type":"text","value":"getItem"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"app-color-mode"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"??"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" (mode "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"??"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"light"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-12aec5"},"children":[{"type":"text","value":"//最後去把目標的上層html tag綁定對應顏色模式的class名稱"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0e08d3"},"children":[{"type":"text","value":"getElementsByTagName"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":")["}]},{"type":"element","tag":"span","props":{"class":"ct-dbc039"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0e08d3"},"children":[{"type":"text","value":"setAttribute"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"mode"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"-mode"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"serversiderender和clientsiderender差異"},"children":[{"type":"text","value":"ServerSideRender和ClientSideRender差異"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"window和document物件必須是在Client端的瀏覽器運行時才能使用，所以當渲染機制是使用SSR時，就必須注意這段取得和判別顏色模式的腳本是在client端發生，才能符合這次介紹的顏色模式機制。"}]},{"type":"element","tag":"code","props":{"code":"//Nuxt3 SSR情境下，判別的腳本寫在onMounted這個hook中\n\nonMounted(() => {\n  let mode = localStorage.setItem('nuxt3-app-color-mode', mode) ?? 'light'\n\n  document?.getElementsByTagName('body')[0]?.setAttribute('class', `${mode}-mode`);\n});\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-12aec5"},"children":[{"type":"text","value":"//Nuxt3 SSR情境下，判別的腳本寫在onMounted這個hook中"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0e08d3"},"children":[{"type":"text","value":"onMounted"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d05924"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-d05924"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"mode"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"localStorage"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-0e08d3"},"children":[{"type":"text","value":"setItem"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"nuxt3-app-color-mode"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"mode"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"??"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"light"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-0e08d3"},"children":[{"type":"text","value":"getElementsByTagName"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":")["}]},{"type":"element","tag":"span","props":{"class":"ct-dbc039"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-0e08d3"},"children":[{"type":"text","value":"setAttribute"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"mode"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"-mode"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"`"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"同時在nuxt3框架之下，狀態管理的方式可以這樣使用，來實作切換功能。"}]},{"type":"element","tag":"code","props":{"code":"const colorEnum = {\n  DARK: 'dark',\n  LIGHT: 'light',\n  SEPIA: 'sepia',\n};\n\nconst appMode = useState('appMode', () => null);\n\nconst handleAppMode = () => {\n  switch (appMode.value) {\n    case colorEnum.LIGHT: {\n      appMode.value = colorEnum.DARK;\n      break;\n    }\n    case colorEnum.DARK: {\n      appMode.value = colorEnum.SEPIA;\n      break;\n    }\n    case colorEnum.SEPIA: {\n      appMode.value = colorEnum.LIGHT;\n      break;\n    }\n  }\n  setTimeout(() => {\n    addModeClass(appMode.value);\n  }, 100);\n};\n\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-819e22"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-36abd9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a4737b"},"children":[{"type":"text","value":"colorEnum"}]},{"type":"element","tag":"span","props":{"class":"ct-36abd9"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-572284"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"DARK"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"dark"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"LIGHT"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"light"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"SEPIA"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-97297f"},"children":[{"type":"text","value":"sepia"}]},{"type":"element","tag":"span","props":{"class":"ct-00a127"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce5069"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d05924"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d05924"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d05924"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"switch"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"appMode"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"case"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"colorEnum"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-724d7d"},"children":[{"type":"text","value":"LIGHT"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"appMode"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"colorEnum"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-724d7d"},"children":[{"type":"text","value":"DARK"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f61aa3"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-572284"},"children":[{"type":"text","value":"break"}]},{"type":"element","tag":"span","props":{"class":"ct-ce5069"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"case"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"colorEnum"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-724d7d"},"children":[{"type":"text","value":"DARK"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"appMode"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"colorEnum"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-724d7d"},"children":[{"type":"text","value":"SEPIA"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f61aa3"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-572284"},"children":[{"type":"text","value":"break"}]},{"type":"element","tag":"span","props":{"class":"ct-ce5069"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"case"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"colorEnum"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-724d7d"},"children":[{"type":"text","value":"SEPIA"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"appMode"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-573f7e"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"colorEnum"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-724d7d"},"children":[{"type":"text","value":"LIGHT"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f61aa3"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-572284"},"children":[{"type":"text","value":"break"}]},{"type":"element","tag":"span","props":{"class":"ct-ce5069"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-45c4df"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d05924"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0e08d3"},"children":[{"type":"text","value":"addModeClass"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"appMode"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-58fc7f"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":"},"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dbc039"},"children":[{"type":"text","value":"100"}]},{"type":"element","tag":"span","props":{"class":"ct-6d1389"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-07595a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ce5069"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nuxt3-notes/blob/main/components/Nav.vue","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Nuxt3內實作完整程式碼"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.section.io/engineering-education/watch-for-system-dark-mode-using-js-css/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"How to Watch for System Dark Mode Changes Using JavaScript and CSS"}]}]},{"type":"element","tag":"info","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2022-08-01 編輯"}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f61aa3{color:#F07178}.ct-724d7d{color:#A6ACCD}.ct-572284{color:#89DDFF}.ct-a4737b{color:#A6ACCD}.ct-819e22{color:#C792EA}.ct-dbc039{color:#F78C6C}.ct-573f7e{color:#89DDFF}.ct-12aec5{color:#676E95}.ct-6d1389{color:#F07178}.ct-d05924{color:#C792EA}.ct-36abd9{color:#A6ACCD}.ct-97297f{color:#C3E88D}.ct-00a127{color:#89DDFF}.ct-0e08d3{color:#82AAFF}.ct-ce5069{color:#89DDFF}.ct-32229d{color:#A6ACCD}.ct-45c4df{color:#82AAFF}.ct-e62701{color:#B2CCD6}.ct-07595a{color:#89DDFF}.ct-58fc7f{color:#A6ACCD}.ct-742a84{color:#FFCB6B}.ct-f25aa1{color:#89DDFF}.dark .ct-f25aa1{color:#79C0FF}.dark .ct-742a84{color:#79C0FF}.dark .ct-58fc7f{color:#C9D1D9}.dark .ct-07595a{color:#C9D1D9}.dark .ct-e62701{color:#79C0FF}.dark .ct-45c4df{color:#79C0FF}.dark .ct-32229d{color:#FFA657}.dark .ct-ce5069{color:#C9D1D9}.dark .ct-0e08d3{color:#D2A8FF}.dark .ct-00a127{color:#A5D6FF}.dark .ct-97297f{color:#A5D6FF}.dark .ct-36abd9{color:#C9D1D9}.dark .ct-d05924{color:#FF7B72}.dark .ct-6d1389{color:#C9D1D9}.dark .ct-12aec5{color:#8B949E}.dark .ct-573f7e{color:#FF7B72}.dark .ct-dbc039{color:#79C0FF}.dark .ct-819e22{color:#FF7B72}.dark .ct-a4737b{color:#79C0FF}.dark .ct-572284{color:#FF7B72}.dark .ct-724d7d{color:#79C0FF}.dark .ct-f61aa3{color:#C9D1D9}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"css配置","depth":2,"text":"css配置"},{"id":"取得作業系統的顏色模式","depth":2,"text":"取得作業系統的顏色模式"},{"id":"自訂可切換的顏色模式","depth":2,"text":"自訂可切換的顏色模式"},{"id":"serversiderender和clientsiderender差異","depth":2,"text":"ServerSideRender和ClientSideRender差異"}]}},"_type":"markdown","_id":"content:1.blog:5.Nuxt.js:3.color mode.md","_source":"content","_file":"1.blog/5.Nuxt.js/3.color mode.md","_extension":"md"},{"_path":"/blog/node.js/crawler","_draft":false,"_partial":false,"_empty":false,"title":"資料爬取與儲存","description":"參考鐵人賽的系列文章，使用 NodeJS 來實作網頁資料爬取和儲存於 google 表單，在嘗試過程中把系列文的 selenium-webdriver 套件改用 puppeteer 和 cheerio，而該系列文主要針對的是臉書和 IG 的追蹤數爬取，我則針對 yahoo 入口頁面的新聞和 momo 購物網的商品搜尋資訊。","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"資料爬取與儲存"},"children":[{"type":"text","value":"資料爬取與儲存"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"參考鐵人賽的系列文章，使用 NodeJS 來實作網頁資料爬取和儲存於 google 表單，在嘗試過程中把系列文的 selenium-webdriver 套件改用 puppeteer 和 cheerio，而該系列文主要針對的是臉書和 IG 的追蹤數爬取，我則針對 yahoo 入口頁面的新聞和 momo 購物網的商品搜尋資訊。"}]},{"type":"element","tag":"h2","props":{"id":"工具"},"children":[{"type":"text","value":"工具"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/puppeteer","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"puppeteer"}]},{"type":"text","value":"\n提供基於瀏覽器操作行為的 API，也可以截取圖片、產生 PDF。使用概念上要瞭解瀏覽器渲染 DOM 的生命週期，以及對於網站 url 的規則去分析。在資料公開的網站，url 的 path 和 query 部份，通常就指向對應的資料內容。"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"momo 搜尋產品頁\n"},{"type":"element","tag":"a","props":{"href":"https://www.momoshop.com.tw/search/searchShop.jsp?keyword=$keyword","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://www.momoshop.com.tw/search/searchShop.jsp?keyword=$keyword"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"google 搜尋頁\n"},{"type":"element","tag":"a","props":{"href":"https://www.google.com.tw/search?q=$keyword","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://www.google.com.tw/search?q=$keyword"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/cheerio","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"cheerio"}]},{"type":"text","value":"\n用來處理網頁的 dom 結構，功能和 jQuery 的選取和操作相近。在這次嘗試過程中，是拿來抓取 dom 的資料。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/googleapis","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"googleapis"}]},{"type":"text","value":"\n用來使用線上 google 表單的操作，官方提供的 API 相當龐雜。這次有使用的部分是基本的寫入資料、新增 sheet。在概念上，它可以做為一個線上儲存資料的載體。"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用重點是在"},{"type":"element","tag":"a","props":{"href":"https://console.cloud.google.com/apis/dashboard?project=node-crawler-359702","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"google developer console"}]},{"type":"text","value":"要先開通 google sheet api 服務，並設定服務權限，取得憑證(credentials.json)"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"實作重點"},"children":[{"type":"text","value":"實作重點"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nodeServices/blob/main/services/puppet.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"puppet.js"}]},{"type":"text","value":"\n可以理解為瀏覽器操作流程"}]}]},{"type":"element","tag":"code","props":{"code":"() => {\n  const puppeteer = require('puppeteer');\n\n  async function puppetGetWebContent(webUrl) {\n    const browser = await puppeteer.launch({\n      args: ['--no-sandbox', '--disable-setuid-sandbox'],\n      ignoreDefaultArgs: ['--disable-extensions'],\n      headless: true,\n    });\n\n    const page = await browser.newPage();\n    await page.goto(webUrl);\n    const content = await page.content();\n    await browser.close();\n\n    return content;\n  }\n};\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"() => {\n  const puppeteer = require('puppeteer');\n\n  async function puppetGetWebContent(webUrl) {\n    const browser = await puppeteer.launch({\n      args: ['--no-sandbox', '--disable-setuid-sandbox'],\n      ignoreDefaultArgs: ['--disable-extensions'],\n      headless: true,\n    });\n\n    const page = await browser.newPage();\n    await page.goto(webUrl);\n    const content = await page.content();\n    await browser.close();\n\n    return content;\n  }\n};\n"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nodeServices/blob/main/services/momoCrawler.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"momoCrawler.js"}]},{"type":"text","value":"\n爬取 momo 產品搜尋頁，並把前五項的商品連結記下，再前往商品頁中爬取商品資訊。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/ebt53Gi.png"},"children":[]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nodeServices/blob/main/services/yahooCrawler.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"yahooCrawler.js"}]},{"type":"text","value":" & "},{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nodeServices/blob/main/services/googleSheets.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"googleSheets.js"}]},{"type":"text","value":"\n爬取資料後，將它存放到線上 google 表單。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/brb2Pfj.png"},"children":[]}]}]},{"type":"element","tag":"h2","props":{"id":"後續目標"},"children":[{"type":"text","value":"後續目標"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"利用 express 啟 API 服務"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"部署到主機"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"使用排程"}]}]},{"type":"element","tag":"h2","props":{"id":"參考資源"},"children":[{"type":"text","value":"參考資源"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://ithelp.ithome.com.tw/users/20103256/ironman/2940","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"行銷廣告、電商小編的武器，FB & IG 爬蟲專案從零開始"}]}]}]}]},"tags":"學習","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"資料爬取與儲存"},"children":[{"type":"text","value":"資料爬取與儲存"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"參考鐵人賽的系列文章，使用 NodeJS 來實作網頁資料爬取和儲存於 google 表單，在嘗試過程中把系列文的 selenium-webdriver 套件改用 puppeteer 和 cheerio，而該系列文主要針對的是臉書和 IG 的追蹤數爬取，我則針對 yahoo 入口頁面的新聞和 momo 購物網的商品搜尋資訊。"}]},{"type":"element","tag":"h2","props":{"id":"工具"},"children":[{"type":"text","value":"工具"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/puppeteer","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"puppeteer"}]},{"type":"text","value":"\n提供基於瀏覽器操作行為的 API，也可以截取圖片、產生 PDF。使用概念上要瞭解瀏覽器渲染 DOM 的生命週期，以及對於網站 url 的規則去分析。在資料公開的網站，url 的 path 和 query 部份，通常就指向對應的資料內容。"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"momo 搜尋產品頁\n"},{"type":"element","tag":"a","props":{"href":"https://www.momoshop.com.tw/search/searchShop.jsp?keyword=$keyword","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://www.momoshop.com.tw/search/searchShop.jsp?keyword=$keyword"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"google 搜尋頁\n"},{"type":"element","tag":"a","props":{"href":"https://www.google.com.tw/search?q=$keyword","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://www.google.com.tw/search?q=$keyword"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/cheerio","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"cheerio"}]},{"type":"text","value":"\n用來處理網頁的 dom 結構，功能和 jQuery 的選取和操作相近。在這次嘗試過程中，是拿來抓取 dom 的資料。"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/googleapis","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"googleapis"}]},{"type":"text","value":"\n用來使用線上 google 表單的操作，官方提供的 API 相當龐雜。這次有使用的部分是基本的寫入資料、新增 sheet。在概念上，它可以做為一個線上儲存資料的載體。"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用重點是在"},{"type":"element","tag":"a","props":{"href":"https://console.cloud.google.com/apis/dashboard?project=node-crawler-359702","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"google developer console"}]},{"type":"text","value":"要先開通 google sheet api 服務，並設定服務權限，取得憑證(credentials.json)"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"實作重點"},"children":[{"type":"text","value":"實作重點"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nodeServices/blob/main/services/puppet.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"puppet.js"}]},{"type":"text","value":"\n可以理解為瀏覽器操作流程"}]}]},{"type":"element","tag":"code","props":{"code":"() => {\n  const puppeteer = require('puppeteer');\n\n  async function puppetGetWebContent(webUrl) {\n    const browser = await puppeteer.launch({\n      args: ['--no-sandbox', '--disable-setuid-sandbox'],\n      ignoreDefaultArgs: ['--disable-extensions'],\n      headless: true,\n    });\n\n    const page = await browser.newPage();\n    await page.goto(webUrl);\n    const content = await page.content();\n    await browser.close();\n\n    return content;\n  }\n};\n","language":"javascript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-51f46f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-705f82"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-51f46f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-705f82"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3908f3"},"children":[{"type":"text","value":"puppeteer"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d9d532"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5145c1"},"children":[{"type":"text","value":"require"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c8aac2"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-1760db"},"children":[{"type":"text","value":"puppeteer"}]},{"type":"element","tag":"span","props":{"class":"ct-c8aac2"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-705f82"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-705f82"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-24a0d3"},"children":[{"type":"text","value":"puppetGetWebContent"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-08c73a"},"children":[{"type":"text","value":"webUrl"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-705f82"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3908f3"},"children":[{"type":"text","value":"browser"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d9d532"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d9d532"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51f46f"},"children":[{"type":"text","value":"puppeteer"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-24a0d3"},"children":[{"type":"text","value":"launch"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"      args"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-c8aac2"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-1760db"},"children":[{"type":"text","value":"--no-sandbox"}]},{"type":"element","tag":"span","props":{"class":"ct-c8aac2"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8aac2"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-1760db"},"children":[{"type":"text","value":"--disable-setuid-sandbox"}]},{"type":"element","tag":"span","props":{"class":"ct-c8aac2"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"      ignoreDefaultArgs"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-c8aac2"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-1760db"},"children":[{"type":"text","value":"--disable-extensions"}]},{"type":"element","tag":"span","props":{"class":"ct-c8aac2"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"      headless"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0ef07a"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-705f82"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3908f3"},"children":[{"type":"text","value":"page"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d9d532"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d9d532"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51f46f"},"children":[{"type":"text","value":"browser"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-24a0d3"},"children":[{"type":"text","value":"newPage"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-d9d532"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51f46f"},"children":[{"type":"text","value":"page"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-24a0d3"},"children":[{"type":"text","value":"goto"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-51f46f"},"children":[{"type":"text","value":"webUrl"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-705f82"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3908f3"},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d9d532"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d9d532"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51f46f"},"children":[{"type":"text","value":"page"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-24a0d3"},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-d9d532"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51f46f"},"children":[{"type":"text","value":"browser"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-24a0d3"},"children":[{"type":"text","value":"close"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"()"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-d9d532"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51f46f"},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e7f79f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-0b3639"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-100e68"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nodeServices/blob/main/services/momoCrawler.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"momoCrawler.js"}]},{"type":"text","value":"\n爬取 momo 產品搜尋頁，並把前五項的商品連結記下，再前往商品頁中爬取商品資訊。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/ebt53Gi.png"},"children":[]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nodeServices/blob/main/services/yahooCrawler.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"yahooCrawler.js"}]},{"type":"text","value":" & "},{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/nodeServices/blob/main/services/googleSheets.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"googleSheets.js"}]},{"type":"text","value":"\n爬取資料後，將它存放到線上 google 表單。\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/brb2Pfj.png"},"children":[]}]}]},{"type":"element","tag":"h2","props":{"id":"後續目標"},"children":[{"type":"text","value":"後續目標"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"利用 express 啟 API 服務"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"部署到主機"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"使用排程"}]}]},{"type":"element","tag":"h2","props":{"id":"參考資源"},"children":[{"type":"text","value":"參考資源"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://ithelp.ithome.com.tw/users/20103256/ironman/2940","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"行銷廣告、電商小編的武器，FB & IG 爬蟲專案從零開始"}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-100e68{color:#89DDFF}.ct-0ef07a{color:#FF9CAC}.ct-08c73a{color:#A6ACCD}.ct-24a0d3{color:#82AAFF}.ct-1760db{color:#C3E88D}.ct-c8aac2{color:#89DDFF}.ct-5145c1{color:#82AAFF}.ct-d9d532{color:#89DDFF}.ct-3908f3{color:#A6ACCD}.ct-e7f79f{color:#F07178}.ct-705f82{color:#C792EA}.ct-51f46f{color:#A6ACCD}.ct-0b3639{color:#89DDFF}.dark .ct-0b3639{color:#C9D1D9}.dark .ct-51f46f{color:#C9D1D9}.dark .ct-705f82{color:#FF7B72}.dark .ct-e7f79f{color:#C9D1D9}.dark .ct-3908f3{color:#79C0FF}.dark .ct-d9d532{color:#FF7B72}.dark .ct-5145c1{color:#79C0FF}.dark .ct-c8aac2{color:#A5D6FF}.dark .ct-1760db{color:#A5D6FF}.dark .ct-24a0d3{color:#D2A8FF}.dark .ct-08c73a{color:#FFA657}.dark .ct-0ef07a{color:#79C0FF}.dark .ct-100e68{color:#C9D1D9}"}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"工具","depth":2,"text":"工具"},{"id":"實作重點","depth":2,"text":"實作重點"},{"id":"後續目標","depth":2,"text":"後續目標"},{"id":"參考資源","depth":2,"text":"參考資源"}]}},"_type":"markdown","_id":"content:1.blog:6.node.js:1.crawler.md","_source":"content","_file":"1.blog/6.node.js/1.crawler.md","_extension":"md"},{"_path":"/blog/node.js/nodeexpressapp","_draft":false,"_partial":false,"_empty":false,"title":"NodeJS架設Web服務","description":"NodeJS生態倚賴許多NPM中的套件庫，可以用來協助架設各種Web服務，以下是架設過程的紀錄。","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"nodejs架設web服務"},"children":[{"type":"text","value":"NodeJS架設Web服務"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NodeJS生態倚賴許多NPM中的套件庫，可以用來協助架設各種Web服務，以下是架設過程的紀錄。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/NodeAPI","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Github"}]}]},{"type":"element","tag":"h2","props":{"id":"目錄結構"},"children":[{"type":"text","value":"目錄結構"}]},{"type":"element","tag":"code","props":{"code":"│  .env\n│  .env.example\n│  .gitignore\n│  package-lock.json\n│  package.json\n│  server.js\n│  sql.sql\n│  \n├─config\n│      db.js\n│      \n├─controllers\n│      fileController.js\n│      postControllers.js\n│      \n├─helpers\n│      httpLogger.js\n│      logger.js\n│      mail.js\n│      \n├─logs\n│      error.log\n│      info.log\n│      \n├─models\n│      Post.js\n│      \n├─node_modules\n│      \n├─routes\n│      fileRoutes.js\n│      postRoutes.js\n│      \n├─uploadFiles\n│      ccc.jpg\n│      \n└─views\n        uploadFile.ejs\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"│  .env\n│  .env.example\n│  .gitignore\n│  package-lock.json\n│  package.json\n│  server.js\n│  sql.sql\n│  \n├─config\n│      db.js\n│      \n├─controllers\n│      fileController.js\n│      postControllers.js\n│      \n├─helpers\n│      httpLogger.js\n│      logger.js\n│      mail.js\n│      \n├─logs\n│      error.log\n│      info.log\n│      \n├─models\n│      Post.js\n│      \n├─node_modules\n│      \n├─routes\n│      fileRoutes.js\n│      postRoutes.js\n│      \n├─uploadFiles\n│      ccc.jpg\n│      \n└─views\n        uploadFile.ejs\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"串接mysql"},"children":[{"type":"text","value":"串接MySQL"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"本地安裝MySQL。在安裝成功後，可以先使用workbench做連線測試，這組資訊記錄下來之後要讓Node做連線使用。"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"連線測試\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/lC9qWYd.jpg"},"children":[]},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/XB5c2Bt.jpg"},"children":[]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"建立Post表的欄位與資料"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/OrOogrN.jpg"},"children":[]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"config/db.js"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/mysql2","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"NPM mysql2"}]}]},{"type":"element","tag":"code","props":{"code":"()=>{\n\nrequire(\"dotenv\").config(); //藉此讀取.env的參數\nconst mysql = require('mysql2'); //連線資料庫所使用的套件\n\nconst pool = mysql.createPool({\n  host: process.env.DB_HOST,\n  user: process.env.DB_USER,\n  database: process.env.DB_NAME,\n  password: process.env.DB_PASSWORD,\n  port: process.env.DB_PORT\n});\n}\n\nmodule.exports = pool.promise();//支持非同步處理的連線池物件\n\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"()=>{\n\nrequire(\"dotenv\").config(); //藉此讀取.env的參數\nconst mysql = require('mysql2'); //連線資料庫所使用的套件\n\nconst pool = mysql.createPool({\n  host: process.env.DB_HOST,\n  user: process.env.DB_USER,\n  database: process.env.DB_NAME,\n  password: process.env.DB_PASSWORD,\n  port: process.env.DB_PORT\n});\n}\n\nmodule.exports = pool.promise();//支持非同步處理的連線池物件\n\n"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":".env檔"}]}]},{"type":"element","tag":"code","props":{"code":"# DATABASE CONNECTION ENVIRONMENT VARIABLES\nDB_HOST=localhost\nDB_USER=root\nDB_NAME=blog-app\nDB_PASSWORD=root\nDB_PORT=3306\n","language":"shell="},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"# DATABASE CONNECTION ENVIRONMENT VARIABLES\nDB_HOST=localhost\nDB_USER=root\nDB_NAME=blog-app\nDB_PASSWORD=root\nDB_PORT=3306\n"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"models/Post.js\n建立一個資料類的Model，並實作資料操作的方法，如CRUD。這同時是透過mysql2的API，來執行sql指令。"}]}]},{"type":"element","tag":"code","props":{"code":"const db = require('../config/db');\nclass Post {\n  constructor(title, body) {\n    this.title = title;\n    this.body = body;\n  }\n\n  save() {\n    let date = new Date();\n    let created_at = `${date.getFullYear()}-${\n      date.getMonth() + 1\n    }-${date.getDate()}`;\n    \n    //新增1筆3個欄位的資料\n    let sql = `\n            INSERT INTO posts(\n                title,\n                body,\n                created_at\n            )\n            VALUES(\n                '${this.title}',\n                '${this.body}',\n                '${created_at}'\n            )\n        \n        `;\n    return db.execute(sql);//會回傳1個Promise物件\n}\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const db = require('../config/db');\nclass Post {\n  constructor(title, body) {\n    this.title = title;\n    this.body = body;\n  }\n\n  save() {\n    let date = new Date();\n    let created_at = `${date.getFullYear()}-${\n      date.getMonth() + 1\n    }-${date.getDate()}`;\n    \n    //新增1筆3個欄位的資料\n    let sql = `\n            INSERT INTO posts(\n                title,\n                body,\n                created_at\n            )\n            VALUES(\n                '${this.title}',\n                '${this.body}',\n                '${created_at}'\n            )\n        \n        `;\n    return db.execute(sql);//會回傳1個Promise物件\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"開api"},"children":[{"type":"text","value":"開API"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"透過NodeJs Express所啟動的Web服務，連線的網域於 "},{"type":"element","tag":"a","props":{"href":"http://localhost:3000","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"http://localhost:3000"}]},{"type":"text","value":"\n並可監聽來訪請求的路徑與HTTP連線方法(GET、POST、UPDATE、DELTE..)對應。"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"server.js"}]}]},{"type":"element","tag":"code","props":{"code":"//...(略)\napp.use('/posts', require('./routes/postRoutes'));\n\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//...(略)\napp.use('/posts', require('./routes/postRoutes'));\n\n"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"routes/postRoutes.js"}]}]},{"type":"element","tag":"code","props":{"code":"const express = require('express');\nconst postControllers = require('../controllers/postControllers')\nconst router = express.Router();\n\nrouter.route(\"/\").get(postControllers.getAllPosts);\n\nrouter.route(\"/\").post(postControllers.createNewPost);\n\nrouter.route(\"/:id\").get(postControllers.getPostById);\n\nmodule.exports = router;\n}\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const express = require('express');\nconst postControllers = require('../controllers/postControllers')\nconst router = express.Router();\n\nrouter.route(\"/\").get(postControllers.getAllPosts);\n\nrouter.route(\"/\").post(postControllers.createNewPost);\n\nrouter.route(\"/:id\").get(postControllers.getPostById);\n\nmodule.exports = router;\n}\n"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Postman測試連線\nGET方法與路徑/posts，則可對應去呼叫控制層的資料操作方法，並透過exprss路由的回傳物件將資料回傳。"}]}]},{"type":"element","tag":"code","props":{"code":"//postControllers.js\nconst Post = require('../models/Post');\n\nexports.getAllPosts = async (req, res, next) => {\n  try {\n    const [posts] = await Post.findAll();\n\n    res.status(200).json({ posts });\n  } catch (error) {\n    console.log(error);\n    next(error);\n  }\n};\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"//postControllers.js\nconst Post = require('../models/Post');\n\nexports.getAllPosts = async (req, res, next) => {\n  try {\n    const [posts] = await Post.findAll();\n\n    res.status(200).json({ posts });\n  } catch (error) {\n    console.log(error);\n    next(error);\n  }\n};\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"GET  /posts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/cjUhayn.jpg"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"上傳檔案"},"children":[{"type":"text","value":"上傳檔案"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"使用套件\n"},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/formidable","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"formidable"}]},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/mv","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"mv"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用表單物件和POST方法傳送檔案，formidable可做為中間層把檔案的資訊做解析。解析後的結果，再利用mv做搬運。"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"fileController.js"}]}]},{"type":"element","tag":"code","props":{"code":"const formidable = require('formidable');\nconst mv = require('mv');\nconst path = require('path');\nconst fs = require('fs');\n\nexports.uploadFile = async (req, res, next) => {\n  const form = new formidable.IncomingForm();\n  form.parse(req, function (err, fields, files) {\n    const uploadPath = path.join(process.cwd(), 'uploadFiles');//自訂的檔案存放路徑\n\n    if (!fs.existsSync(uploadPath)) {\n      fs.mkdirSync('uploadFiles');\n    }\n\n    const filename = fields.fileName\n      ? `${fields.fileName}.${\n          files.filetoupload.originalFilename.split('.')[1]\n        }`\n      : files.filetoupload.originalFilename;//有輸入自訂檔名欄位時使用自訂檔名\n    const oldpath = files.filetoupload.filepath;\n    const newpath = path.join(uploadPath, filename);\n    \n    //這個部分之後再比較把圖片檔File轉base64做法的差異\n    mv(oldpath, newpath, function (err) {\n      if (err) {\n        throw err;\n        next();\n      }\n      res.write(`File uploaded and moved to ${newpath}`);\n      res.end();\n    });\n  });\n};\n\n\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const formidable = require('formidable');\nconst mv = require('mv');\nconst path = require('path');\nconst fs = require('fs');\n\nexports.uploadFile = async (req, res, next) => {\n  const form = new formidable.IncomingForm();\n  form.parse(req, function (err, fields, files) {\n    const uploadPath = path.join(process.cwd(), 'uploadFiles');//自訂的檔案存放路徑\n\n    if (!fs.existsSync(uploadPath)) {\n      fs.mkdirSync('uploadFiles');\n    }\n\n    const filename = fields.fileName\n      ? `${fields.fileName}.${\n          files.filetoupload.originalFilename.split('.')[1]\n        }`\n      : files.filetoupload.originalFilename;//有輸入自訂檔名欄位時使用自訂檔名\n    const oldpath = files.filetoupload.filepath;\n    const newpath = path.join(uploadPath, filename);\n    \n    //這個部分之後再比較把圖片檔File轉base64做法的差異\n    mv(oldpath, newpath, function (err) {\n      if (err) {\n        throw err;\n        next();\n      }\n      res.write(`File uploaded and moved to ${newpath}`);\n      res.end();\n    });\n  });\n};\n\n\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"取得檔案"},"children":[{"type":"text","value":"取得檔案"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"http://expressjs.com/zh-tw/api.html#res.sendFile","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Express SendFile API"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"fileController.js"}]}]},{"type":"element","tag":"code","props":{"code":"\nexports.getFile = async (req, res, next) => {\n  const fileName = req.params.fileName;\n  const options = {\n    root: path.join(process.cwd(), 'uploadFiles'),\n  };\n\n  res.sendFile(fileName, options, function (err) {\n    if (err) {\n      next(new Error('無此檔案'));\n    }\n  });\n};\n\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\nexports.getFile = async (req, res, next) => {\n  const fileName = req.params.fileName;\n  const options = {\n    root: path.join(process.cwd(), 'uploadFiles'),\n  };\n\n  res.sendFile(fileName, options, function (err) {\n    if (err) {\n      next(new Error('無此檔案'));\n    }\n  });\n};\n\n"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"取得結果"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"GET /file/:fileName"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/0eSrCho.jpg"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"寄送郵件"},"children":[{"type":"text","value":"寄送郵件"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"helpers/mail.js"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"支持SMTP、Gmail發送的套件\n"},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/nodemailer","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nodemailer"}]}]},{"type":"element","tag":"code","props":{"code":"const logger = require('./logger');\nconst nodemailer = require('nodemailer');\n\n//透過GMAIL帳號和'應用程式密碼'登入\nconst transporter = nodemailer.createTransport({\n  service: 'gmail',\n  auth: {\n    user: process.env.GMAIL_USER,\n    pass: process.env.GMAIL_PASS,\n  },\n});\n\nconst mailOptions = {\n  from: process.env.GMAIL_USER,\n  to: 'kel0oo0@yahoo.com.tw',\n  subject: 'Sending Email using Node.js',\n  text: 'That was easy???',\n  html: `<h1>HI~~!!</h1><img src=\"https://miro.medium.com/max/676/1*XEgA1TTwXa5AvAdw40GFow.png\">`,\n};\n\nconst sendEmail = (options = {}) => {\n  let mergeOption = {\n    ...mailOptions,\n    ...options,\n  };\n  \n  //發送\n  transporter.sendMail(mergeOption, function (error, info) {\n    if (error) {\n      console.log(error);\n    } else {\n      logger.info(mergeOption);\n    }\n  });\n};\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const logger = require('./logger');\nconst nodemailer = require('nodemailer');\n\n//透過GMAIL帳號和'應用程式密碼'登入\nconst transporter = nodemailer.createTransport({\n  service: 'gmail',\n  auth: {\n    user: process.env.GMAIL_USER,\n    pass: process.env.GMAIL_PASS,\n  },\n});\n\nconst mailOptions = {\n  from: process.env.GMAIL_USER,\n  to: 'kel0oo0@yahoo.com.tw',\n  subject: 'Sending Email using Node.js',\n  text: 'That was easy???',\n  html: `<h1>HI~~!!</h1><img src=\"https://miro.medium.com/max/676/1*XEgA1TTwXa5AvAdw40GFow.png\">`,\n};\n\nconst sendEmail = (options = {}) => {\n  let mergeOption = {\n    ...mailOptions,\n    ...options,\n  };\n  \n  //發送\n  transporter.sendMail(mergeOption, function (error, info) {\n    if (error) {\n      console.log(error);\n    } else {\n      logger.info(mergeOption);\n    }\n  });\n};\n"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"應用程式密碼\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/SzAGCvv.jpg"},"children":[]}]}]},{"type":"element","tag":"warning","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"從nodemailer文件上可知，Gmail的送信方式比較適合開發時測試，真正產品應用時還要考量其他因素，不建議使用Gmail。"}]}]},{"type":"element","tag":"h2","props":{"id":"api請求紀錄"},"children":[{"type":"text","value":"API請求紀錄"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用套件\n"},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/winston","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"winston"}]},{"type":"text","value":":用來產生log檔案\n"},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/morgan","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"morgan"}]},{"type":"text","value":":產生能擷取HTTP資訊的中間層"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"helplers/logger.js"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"helplers/httpLogger.js"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"紀錄\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/dzh1mVF.jpg"},"children":[]}]}]}]},"tags":"學習","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"nodejs架設web服務"},"children":[{"type":"text","value":"NodeJS架設Web服務"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NodeJS生態倚賴許多NPM中的套件庫，可以用來協助架設各種Web服務，以下是架設過程的紀錄。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/lian0103/NodeAPI","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Github"}]}]},{"type":"element","tag":"h2","props":{"id":"目錄結構"},"children":[{"type":"text","value":"目錄結構"}]},{"type":"element","tag":"code","props":{"code":"│  .env\n│  .env.example\n│  .gitignore\n│  package-lock.json\n│  package.json\n│  server.js\n│  sql.sql\n│  \n├─config\n│      db.js\n│      \n├─controllers\n│      fileController.js\n│      postControllers.js\n│      \n├─helpers\n│      httpLogger.js\n│      logger.js\n│      mail.js\n│      \n├─logs\n│      error.log\n│      info.log\n│      \n├─models\n│      Post.js\n│      \n├─node_modules\n│      \n├─routes\n│      fileRoutes.js\n│      postRoutes.js\n│      \n├─uploadFiles\n│      ccc.jpg\n│      \n└─views\n        uploadFile.ejs\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"│  .env\n│  .env.example\n│  .gitignore\n│  package-lock.json\n│  package.json\n│  server.js\n│  sql.sql\n│  \n├─config\n│      db.js\n│      \n├─controllers\n│      fileController.js\n│      postControllers.js\n│      \n├─helpers\n│      httpLogger.js\n│      logger.js\n│      mail.js\n│      \n├─logs\n│      error.log\n│      info.log\n│      \n├─models\n│      Post.js\n│      \n├─node_modules\n│      \n├─routes\n│      fileRoutes.js\n│      postRoutes.js\n│      \n├─uploadFiles\n│      ccc.jpg\n│      \n└─views\n        uploadFile.ejs"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"串接mysql"},"children":[{"type":"text","value":"串接MySQL"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"本地安裝MySQL。在安裝成功後，可以先使用workbench做連線測試，這組資訊記錄下來之後要讓Node做連線使用。"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"連線測試\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/lC9qWYd.jpg"},"children":[]},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/XB5c2Bt.jpg"},"children":[]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"建立Post表的欄位與資料"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/OrOogrN.jpg"},"children":[]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"config/db.js"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/mysql2","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"NPM mysql2"}]}]},{"type":"element","tag":"code","props":{"code":"()=>{\n\nrequire(\"dotenv\").config(); //藉此讀取.env的參數\nconst mysql = require('mysql2'); //連線資料庫所使用的套件\n\nconst pool = mysql.createPool({\n  host: process.env.DB_HOST,\n  user: process.env.DB_USER,\n  database: process.env.DB_NAME,\n  password: process.env.DB_PASSWORD,\n  port: process.env.DB_PORT\n});\n}\n\nmodule.exports = pool.promise();//支持非同步處理的連線池物件\n\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"()=>{\n\nrequire(\"dotenv\").config(); //藉此讀取.env的參數\nconst mysql = require('mysql2'); //連線資料庫所使用的套件\n\nconst pool = mysql.createPool({\n  host: process.env.DB_HOST,\n  user: process.env.DB_USER,\n  database: process.env.DB_NAME,\n  password: process.env.DB_PASSWORD,\n  port: process.env.DB_PORT\n});\n}\n\nmodule.exports = pool.promise();//支持非同步處理的連線池物件"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":".env檔"}]}]},{"type":"element","tag":"code","props":{"code":"# DATABASE CONNECTION ENVIRONMENT VARIABLES\nDB_HOST=localhost\nDB_USER=root\nDB_NAME=blog-app\nDB_PASSWORD=root\nDB_PORT=3306\n","language":"shell="},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"# DATABASE CONNECTION ENVIRONMENT VARIABLES\nDB_HOST=localhost\nDB_USER=root\nDB_NAME=blog-app\nDB_PASSWORD=root\nDB_PORT=3306"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"models/Post.js\n建立一個資料類的Model，並實作資料操作的方法，如CRUD。這同時是透過mysql2的API，來執行sql指令。"}]}]},{"type":"element","tag":"code","props":{"code":"const db = require('../config/db');\nclass Post {\n  constructor(title, body) {\n    this.title = title;\n    this.body = body;\n  }\n\n  save() {\n    let date = new Date();\n    let created_at = `${date.getFullYear()}-${\n      date.getMonth() + 1\n    }-${date.getDate()}`;\n    \n    //新增1筆3個欄位的資料\n    let sql = `\n            INSERT INTO posts(\n                title,\n                body,\n                created_at\n            )\n            VALUES(\n                '${this.title}',\n                '${this.body}',\n                '${created_at}'\n            )\n        \n        `;\n    return db.execute(sql);//會回傳1個Promise物件\n}\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"const db = require('../config/db');\nclass Post {\n  constructor(title, body) {\n    this.title = title;\n    this.body = body;\n  }\n\n  save() {\n    let date = new Date();\n    let created_at = `${date.getFullYear()}-${\n      date.getMonth() + 1\n    }-${date.getDate()}`;\n    \n    //新增1筆3個欄位的資料\n    let sql = `\n            INSERT INTO posts(\n                title,\n                body,\n                created_at\n            )\n            VALUES(\n                '${this.title}',\n                '${this.body}',\n                '${created_at}'\n            )\n        \n        `;\n    return db.execute(sql);//會回傳1個Promise物件\n}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"開api"},"children":[{"type":"text","value":"開API"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"透過NodeJs Express所啟動的Web服務，連線的網域於 "},{"type":"element","tag":"a","props":{"href":"http://localhost:3000","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"http://localhost:3000"}]},{"type":"text","value":"\n並可監聽來訪請求的路徑與HTTP連線方法(GET、POST、UPDATE、DELTE..)對應。"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"server.js"}]}]},{"type":"element","tag":"code","props":{"code":"//...(略)\napp.use('/posts', require('./routes/postRoutes'));\n\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"//...(略)\napp.use('/posts', require('./routes/postRoutes'));"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"routes/postRoutes.js"}]}]},{"type":"element","tag":"code","props":{"code":"const express = require('express');\nconst postControllers = require('../controllers/postControllers')\nconst router = express.Router();\n\nrouter.route(\"/\").get(postControllers.getAllPosts);\n\nrouter.route(\"/\").post(postControllers.createNewPost);\n\nrouter.route(\"/:id\").get(postControllers.getPostById);\n\nmodule.exports = router;\n}\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"const express = require('express');\nconst postControllers = require('../controllers/postControllers')\nconst router = express.Router();\n\nrouter.route(\"/\").get(postControllers.getAllPosts);\n\nrouter.route(\"/\").post(postControllers.createNewPost);\n\nrouter.route(\"/:id\").get(postControllers.getPostById);\n\nmodule.exports = router;\n}"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Postman測試連線\nGET方法與路徑/posts，則可對應去呼叫控制層的資料操作方法，並透過exprss路由的回傳物件將資料回傳。"}]}]},{"type":"element","tag":"code","props":{"code":"//postControllers.js\nconst Post = require('../models/Post');\n\nexports.getAllPosts = async (req, res, next) => {\n  try {\n    const [posts] = await Post.findAll();\n\n    res.status(200).json({ posts });\n  } catch (error) {\n    console.log(error);\n    next(error);\n  }\n};\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"//postControllers.js\nconst Post = require('../models/Post');\n\nexports.getAllPosts = async (req, res, next) => {\n  try {\n    const [posts] = await Post.findAll();\n\n    res.status(200).json({ posts });\n  } catch (error) {\n    console.log(error);\n    next(error);\n  }\n};"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"GET  /posts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/cjUhayn.jpg"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"上傳檔案"},"children":[{"type":"text","value":"上傳檔案"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"使用套件\n"},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/formidable","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"formidable"}]},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/mv","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"mv"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用表單物件和POST方法傳送檔案，formidable可做為中間層把檔案的資訊做解析。解析後的結果，再利用mv做搬運。"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"fileController.js"}]}]},{"type":"element","tag":"code","props":{"code":"const formidable = require('formidable');\nconst mv = require('mv');\nconst path = require('path');\nconst fs = require('fs');\n\nexports.uploadFile = async (req, res, next) => {\n  const form = new formidable.IncomingForm();\n  form.parse(req, function (err, fields, files) {\n    const uploadPath = path.join(process.cwd(), 'uploadFiles');//自訂的檔案存放路徑\n\n    if (!fs.existsSync(uploadPath)) {\n      fs.mkdirSync('uploadFiles');\n    }\n\n    const filename = fields.fileName\n      ? `${fields.fileName}.${\n          files.filetoupload.originalFilename.split('.')[1]\n        }`\n      : files.filetoupload.originalFilename;//有輸入自訂檔名欄位時使用自訂檔名\n    const oldpath = files.filetoupload.filepath;\n    const newpath = path.join(uploadPath, filename);\n    \n    //這個部分之後再比較把圖片檔File轉base64做法的差異\n    mv(oldpath, newpath, function (err) {\n      if (err) {\n        throw err;\n        next();\n      }\n      res.write(`File uploaded and moved to ${newpath}`);\n      res.end();\n    });\n  });\n};\n\n\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"const formidable = require('formidable');\nconst mv = require('mv');\nconst path = require('path');\nconst fs = require('fs');\n\nexports.uploadFile = async (req, res, next) => {\n  const form = new formidable.IncomingForm();\n  form.parse(req, function (err, fields, files) {\n    const uploadPath = path.join(process.cwd(), 'uploadFiles');//自訂的檔案存放路徑\n\n    if (!fs.existsSync(uploadPath)) {\n      fs.mkdirSync('uploadFiles');\n    }\n\n    const filename = fields.fileName\n      ? `${fields.fileName}.${\n          files.filetoupload.originalFilename.split('.')[1]\n        }`\n      : files.filetoupload.originalFilename;//有輸入自訂檔名欄位時使用自訂檔名\n    const oldpath = files.filetoupload.filepath;\n    const newpath = path.join(uploadPath, filename);\n    \n    //這個部分之後再比較把圖片檔File轉base64做法的差異\n    mv(oldpath, newpath, function (err) {\n      if (err) {\n        throw err;\n        next();\n      }\n      res.write(`File uploaded and moved to ${newpath}`);\n      res.end();\n    });\n  });\n};"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"取得檔案"},"children":[{"type":"text","value":"取得檔案"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"http://expressjs.com/zh-tw/api.html#res.sendFile","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Express SendFile API"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"fileController.js"}]}]},{"type":"element","tag":"code","props":{"code":"\nexports.getFile = async (req, res, next) => {\n  const fileName = req.params.fileName;\n  const options = {\n    root: path.join(process.cwd(), 'uploadFiles'),\n  };\n\n  res.sendFile(fileName, options, function (err) {\n    if (err) {\n      next(new Error('無此檔案'));\n    }\n  });\n};\n\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"\nexports.getFile = async (req, res, next) => {\n  const fileName = req.params.fileName;\n  const options = {\n    root: path.join(process.cwd(), 'uploadFiles'),\n  };\n\n  res.sendFile(fileName, options, function (err) {\n    if (err) {\n      next(new Error('無此檔案'));\n    }\n  });\n};"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"取得結果"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"GET /file/:fileName"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/0eSrCho.jpg"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"寄送郵件"},"children":[{"type":"text","value":"寄送郵件"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"helpers/mail.js"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"支持SMTP、Gmail發送的套件\n"},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/nodemailer","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"nodemailer"}]}]},{"type":"element","tag":"code","props":{"code":"const logger = require('./logger');\nconst nodemailer = require('nodemailer');\n\n//透過GMAIL帳號和'應用程式密碼'登入\nconst transporter = nodemailer.createTransport({\n  service: 'gmail',\n  auth: {\n    user: process.env.GMAIL_USER,\n    pass: process.env.GMAIL_PASS,\n  },\n});\n\nconst mailOptions = {\n  from: process.env.GMAIL_USER,\n  to: 'kel0oo0@yahoo.com.tw',\n  subject: 'Sending Email using Node.js',\n  text: 'That was easy???',\n  html: `<h1>HI~~!!</h1><img src=\"https://miro.medium.com/max/676/1*XEgA1TTwXa5AvAdw40GFow.png\">`,\n};\n\nconst sendEmail = (options = {}) => {\n  let mergeOption = {\n    ...mailOptions,\n    ...options,\n  };\n  \n  //發送\n  transporter.sendMail(mergeOption, function (error, info) {\n    if (error) {\n      console.log(error);\n    } else {\n      logger.info(mergeOption);\n    }\n  });\n};\n"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"const logger = require('./logger');\nconst nodemailer = require('nodemailer');\n\n//透過GMAIL帳號和'應用程式密碼'登入\nconst transporter = nodemailer.createTransport({\n  service: 'gmail',\n  auth: {\n    user: process.env.GMAIL_USER,\n    pass: process.env.GMAIL_PASS,\n  },\n});\n\nconst mailOptions = {\n  from: process.env.GMAIL_USER,\n  to: 'kel0oo0@yahoo.com.tw',\n  subject: 'Sending Email using Node.js',\n  text: 'That was easy???',\n  html: `<h1>HI~~!!</h1><img src=\"https://miro.medium.com/max/676/1*XEgA1TTwXa5AvAdw40GFow.png\">`,\n};\n\nconst sendEmail = (options = {}) => {\n  let mergeOption = {\n    ...mailOptions,\n    ...options,\n  };\n  \n  //發送\n  transporter.sendMail(mergeOption, function (error, info) {\n    if (error) {\n      console.log(error);\n    } else {\n      logger.info(mergeOption);\n    }\n  });\n};"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"應用程式密碼\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/SzAGCvv.jpg"},"children":[]}]}]},{"type":"element","tag":"warning","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"從nodemailer文件上可知，Gmail的送信方式比較適合開發時測試，真正產品應用時還要考量其他因素，不建議使用Gmail。"}]}]},{"type":"element","tag":"h2","props":{"id":"api請求紀錄"},"children":[{"type":"text","value":"API請求紀錄"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用套件\n"},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/winston","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"winston"}]},{"type":"text","value":":用來產生log檔案\n"},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/morgan","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"morgan"}]},{"type":"text","value":":產生能擷取HTTP資訊的中間層"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"helplers/logger.js"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"helplers/httpLogger.js"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"紀錄\n"},{"type":"element","tag":"img","props":{"alt":"","src":"https://i.imgur.com/dzh1mVF.jpg"},"children":[]}]}]}],"toc":{"title":"","searchDepth":3,"depth":3,"links":[{"id":"目錄結構","depth":2,"text":"目錄結構"},{"id":"串接mysql","depth":2,"text":"串接MySQL"},{"id":"開api","depth":2,"text":"開API"},{"id":"上傳檔案","depth":2,"text":"上傳檔案"},{"id":"取得檔案","depth":2,"text":"取得檔案"},{"id":"寄送郵件","depth":2,"text":"寄送郵件"},{"id":"api請求紀錄","depth":2,"text":"API請求紀錄"}]}},"_type":"markdown","_id":"content:1.blog:6.node.js:2.NodeExpressApp.md","_source":"content","_file":"1.blog/6.node.js/2.NodeExpressApp.md","_extension":"md"},{"_path":"/timeline","_draft":false,"_partial":false,"body":[{"time":"2023-04 ~ now","title":"星宇航空","text":"轉換到新環境，成為組員排班系統組的一員，開始學習新領域的知識，但技術上還是我熟悉的Vue生態。","imgs":["https://i.imgur.com/99OCqfp.jpeg","https://i.imgur.com/mIXbHif.jpeg"],"links":[]},{"time":"2021-09 ~ 2023-03","title":"大樹醫藥","text":"Vue2階段，使用ElementUI開發。Vue3階段，負責UI元件庫的開發、測試、修改和佈署，對NPM package和Vite有更多的認識。<br/>@桃園","imgs":["https://i.imgur.com/du2lymv.png"],"links":[{"title":"VueElementUI","url":"https://github.com/lian0103/VueElementUI"},{"title":"Great Tree UI Beta","url":"https://lian0103.github.io/vue-ui/#/"}]},{"time":"2020-03 ~ 2021-03","title":"緯創軟體","text":"參與多人協作的Plant9專案，過程中要像個海綿持續吸收觀念，在這裡學到拆分UI元件和資料流的處理。技術上使用到React Function Component，也是第一次接觸了JSX的語法<br/>＠台北大安","imgs":["https://i.imgur.com/zwHslOH.jpg","https://i.imgur.com/Exg1sJS.png","https://i.imgur.com/nGeD30O.jpg"]},{"time":"2019-03 ~ 2020-03","title":"雲鼎科技","text":"轉職找工作面試了快30間，最後順利到了雲鼎，剛開始三個月真的都充滿挑戰，我要抓緊機會跟資深的問問題，還要想盡一切辦法完成任務。<br>@台北南港","imgs":["https://i.imgur.com/eHLzhyU.jpg","https://i.imgur.com/w5Inu7z.jpg","https://i.imgur.com/LSJJdp4.jpg"]},{"time":"2018-09 ~ 2019-03","title":"WEB/APP前端工程師培訓班","text":"從零基礎開始學習網站開發的知識，一個網站從功能規劃、設計、切版、RWD、到前後端功能串接，在懵懵懂懂之間就結訓了。<br>@中壢資策會 ","imgs":["https://i.imgur.com/Y7RINwJ.jpg","https://i.imgur.com/p6za41Q.jpg","https://i.imgur.com/nqy2bpu.jpg"],"links":[{"title":"個人作品 好時光水果","url":"https://lian0103.github.io/personalWork2018/index.html"},{"title":"團體作品 熊麻吉交友","url":"https://tibamef2e.com/demo-projects/cd105g1/home.php"}]}],"_id":"content:2.timeline:index.json","_type":"json","title":"","_source":"content","_file":"2.timeline/index.json","_extension":"json"},{"_path":"/pratices","_draft":false,"_partial":false,"body":[{"time":"2022-04 ~ 2022-08","title":"後台元件庫","text":"團隊導入UI視覺規範設計，我負責專案架構與組件開發。","imgs":[],"links":[{"title":"展示範例:日期選擇元件","url":"https://lian0103.github.io/vue-ui/#/gt/s-z/time-picker"}]},{"time":"2021-12 ~ 2022-04","title":"vue3 Quasar Apps","text":"測試Quasar(VueJS library)，來實現記帳的應用，使用包含Quasar的Tab、Dialog、Form、和Dialog等組件。 並搭配Google Firebase平台API，實作權限註冊、儲存即時資料和專案佈署。","imgs":[],"links":[{"title":"花費紀錄","url":"https://account-app-f70c0.web.app/#/"},{"title":"健康回報","url":"https://gt-prevent-record.firebaseapp.com/#/"},{"title":"預約服務系統","url":"https://book-service.firebaseapp.com/#/"}]},{"time":"2021-12 ~ 2022-04","title":"nodeJS 學習與實作","text":"nodejs學習..","imgs":[],"links":[{"title":"實作socket io 的簡易聊天功能","url":"http://jason-node-chatroom.herokuapp.com/"},{"title":"Node API","url":"https://github.com/lian0103/NodeAPI"},{"title":"nodeJS & line-bot message API","url":"https://github.com/lian0103/line-bot-dopee"}]},{"time":"2020-07 ~ 2020-08","title":"形象網頁","text":"在技術上使用React SPA，也使用jQuery達成SPA。","imgs":[],"links":[{"title":"React SPA","url":"https://lian0103.github.io/runtai"},{"title":"jQuery SPA","url":"https://lian0103.github.io/gulpWeb/#mainPage"}]}],"_id":"content:3.pratices:index.json","_type":"json","title":"","_source":"content","_file":"3.pratices/index.json","_extension":"json"},{"_path":"/gantt","_draft":false,"_partial":false,"body":[{"task":"stage1","type":"SI","startTime":"2022-1-1","endTime":"2022-3-1","details":"vue 2遷移vue 3"},{"task":"stage2","type":"SI","startTime":"2022-3-1","endTime":"2022-4-1","details":"功能修正"},{"task":"stage1","type":"GTUI","startTime":"2022-4-1","endTime":"2022-6-1","details":"程式架構與初版開發"},{"task":"stage2","type":"GTUI","startTime":"2022-5-1","endTime":"2022-8-1","details":"內部溝通與修正"},{"task":"stage3","type":"GTUI","startTime":"2022-9-1","endTime":"2022-10-1","details":"新需求開發"},{"task":"stage1","type":"nodeJS","startTime":"2022-3-1","endTime":"2022-4-1","details":"基礎技術學習"},{"task":"stage2","type":"nodeJS","startTime":"2022-8-1","endTime":"2022-9-1","details":"爬取momo資料並寫入google sheet"},{"task":"Quasar","type":"other","startTime":"2021-12-1","endTime":"2022-1-1","details":"新套件庫學習與實作"},{"task":"Nuxt3","type":"other","startTime":"2022-6-1","endTime":"2022-9-1","details":""},{"task":"思考...","type":"other","startTime":"2022-10-1","endTime":"2023-1-1","details":""}],"_id":"content:4.gantt:index.json","_type":"json","title":"","_source":"content","_file":"4.gantt/index.json","_extension":"json"}]