使用Vite工具創建開發初始檔案的教學

這一集用最新的Vite工具去創建初始檔案

為什麼用Vite?

用於創建和構建Web應用程序以下優點：

• 相對於其他工具例如Webpack和Parcel有更快的啟動時間：Vite使用預組件來提高啟動速度，這意味著您可以更快地開始構建應用程序。
• 即時熱更新：Vite可以提供即時熱更新，這意味著您可以看到對代碼所做的更改而無需刷新瀏覽器。這使開發過程更加高效和愉快。
• 小型體積：Vite的體積很小，這意味著它可以更快地下載和安裝。
• 支持多種框架：Vite支持多種前端框架，包括Vue、React和Svelte。
• 可擴展性：Vite是可擴展的，這意味著您可以使用插件來添加新功能。

• 更簡單：Vite的配置非常簡單，因此您可以立即開始使用它，而無需花費大量時間學習複雜的設置。
• 更熱：Vite具有出色的熱重載功能，這意味著您可以看到對代碼所做的更改而無需刷新瀏覽器。這使開發過程更加高效。

開始創立

1. 首先在你的command line 打以下指令，去創建你想要用的技術

註: 依照你的喜好用npm or yarn 都可以

npm create vite@latest

2.選擇你想要的框架和技術

3. 你會看到以下檔案架構

4.啟動專案

npm run dev

5. 進去你的Broswer，並輸入你的port吧

6. 你會看到成功畫面

接下來請看影片教學，如何整理專案以及理解裡面架構

影片教學

結論

Vite是一個功能強大和易於使用的工具，可用於創建文件。它具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。

下一集教學，教大家做應用程式安裝TailwildCSS到VIte專案裡

額外資源教學

如何用FIgma製作個人作品集教學 - https://vocus.cc/article/645c733dfd89780001ffe890

學習如何設計好產品 - 使用者經驗設計 | 易用性 | 通用設計 - https://vocus.cc/article/64637f74fd8978000175c0f8

前端教學架設TodoApp

- https://vocus.cc/article/64637f74fd8978000175c0f8

學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程 - https://vocus.cc/article/64637f74fd8978000175c0f8

更多相關教學文章

JayLinXR YT: https://www.youtube.com/@jaylinxr

JayLinXR IG: https://www.instagram.com/jaylin_xr/

JayLinXR FB: https://www.facebook.com/JayLinXR