使用Vite工具創建開發初始檔案的教學
閱讀時間約 1 分鐘
這一集用最新的Vite工具去創建初始檔案
為什麼用Vite?
用於創建和構建Web應用程序以下優點：
- 相對於其他工具例如Webpack和Parcel有更快的啟動時間：Vite使用預組件來提高啟動速度，這意味著您可以更快地開始構建應用程序。
- 即時熱更新：Vite可以提供即時熱更新，這意味著您可以看到對代碼所做的更改而無需刷新瀏覽器。這使開發過程更加高效和愉快。
- 小型體積：Vite的體積很小，這意味著它可以更快地下載和安裝。
- 支持多種框架：Vite支持多種前端框架，包括Vue、React和Svelte。
- 可擴展性：Vite是可擴展的，這意味著您可以使用插件來添加新功能。
- 更簡單：Vite的配置非常簡單，因此您可以立即開始使用它，而無需花費大量時間學習複雜的設置。
- 更熱：Vite具有出色的熱重載功能，這意味著您可以看到對代碼所做的更改而無需刷新瀏覽器。這使開發過程更加高效。
開始創立
- 首先在你的command line 打以下指令，去創建你想要用的技術
註: 依照你的喜好用npm or yarn 都可以
npm create vite@latest2.選擇你想要的框架和技術
- 你會看到以下檔案架構
4.啟動專案
npm run dev- 進去你的Broswer，並輸入你的port吧
- 你會看到成功畫面
接下來請看影片教學，如何整理專案以及理解裡面架構
影片教學
結論
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
12會員
33內容數
設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr
留言0
查看全部
你可能也想看
Google News 追蹤
安裝程式 → 下載範本 → 列出專案的功能清單 → 開始開發
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟，包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置，及如何創建類型聲明文件來正確識別 .vue 文件。
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
接續上一篇
Step2：VC#專案建立
Step3：IIS新建站台
Step4：VC#架設到IIS中
# 簡介
身為一位專注於 Vue.js 的前端開發者，這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧！
## 第一次嘗試
### 第一步：創建一個 Flutter 應用
首先，通過運行以下命令來創建一個新的 Flutter 項目：
```sh
flutter
因為最近想嘗試編碼風格，於是就選了一套比較"不嚴格"的輔助工具來摸索。
編輯器 VS CODE
框架 VUE3
打包工具 VITE
編碼風格 Standard
環境 version
{
"nodejs":"v18.18.0",
"npm":"9.8.1"
}
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。
此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
安裝程式 → 下載範本 → 列出專案的功能清單 → 開始開發
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟，包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置，及如何創建類型聲明文件來正確識別 .vue 文件。
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
你好，在下最近在學習開發web，學了html css js，也得出一些心得，由於網路上已有許多教學，所以我會著重在如何開發出to do List，以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯，或者是可以寫得更好，歡迎在下方留言，討論。
首先先介紹我的開發環境:
我用了vs
接續上一篇
Step2：VC#專案建立
Step3：IIS新建站台
Step4：VC#架設到IIS中
# 簡介
身為一位專注於 Vue.js 的前端開發者，這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧！
## 第一次嘗試
### 第一步：創建一個 Flutter 應用
首先，通過運行以下命令來創建一個新的 Flutter 項目：
```sh
flutter
因為最近想嘗試編碼風格，於是就選了一套比較"不嚴格"的輔助工具來摸索。
編輯器 VS CODE
框架 VUE3
打包工具 VITE
編碼風格 Standard
環境 version
{
"nodejs":"v18.18.0",
"npm":"9.8.1"
}
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。
此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
軟體系統的發展歷程大多相似，首重解決基本需求、提供操作介面，進而提升安全性、擴充功能、優化操作。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。