前端使用 vite 構建，vite 利用了瀏覽器原生的 module 載入，速度極快。創建一個 node 伺服器，使用 koa 框架。簡簡單單，一個全新的全棧項目就搭起來啦。 ...
接上篇：Vue+Koa+MongoDB從零打造一個任務管理系統
話不多說，直接開整。
前端使用 vite 構建
相比 vue cli 的編譯打包，vite 利用了瀏覽器原生的 module 載入，速度極快。
執行 npm create vite@latest task-manager -- --template vue 在當前目錄生成 task-manager 項目。
這裡我是選擇了一個項目模版快速創建了出來，當然你也可以通過 npm init vue@latest 去自定義包含的內容，兩者都是用的 create-vue 腳手架。
此時自動生成的 task-manager 目錄結構如下圖所示
比較重要的幾個文件
package.json # 前端項目必備
.gitignore # 一些 git 要忽略的文件和目錄
vite.config.js # vite 配置
index.html # spa 入口，可以看到 script 標簽使用了 type="module"
src/main.js # vue 實例化，應用從這裡啟動
src/App.vue # 應用容器
node 服務端
框架依然使用 koa
定義介面需要用到 koa-router
解決一下跨域問題 @koa/cors
全套安裝 npm i koa koa-router @koa/cors
在根目錄新建 server.js，此為服務啟動入口
import http from 'http'
import Koa from 'koa'
import KoaRouter from 'koa-router'
import cors from '@koa/cors'
const app = new Koa()
const router = new KoaRouter()
// 定義一個測試介面
router.get('/echo', (ctx, next) => {
ctx.body = ctx
})
app.use(cors())
app.use(router.routes())
const server = http.createServer(app.callback())
server.listen(8686)
執行 node server 服務端就啟動啦
值得註意的是，vite 腳手架生成的 package.json 中設置了 "type": "module"，因此 node 端將採用 ES module 語法書寫。
啟動預覽
啟動前端服務 npm run dev
同時啟動後端服務 node server
跑起來啦，可以看到已經可以正常調用上面定義的 /echo 測試介面
莫急，添加 git 版本管理
在 task-manager 目錄執行 git init
在 GitHub 上創建新項目 task-manager
直接 git remote add origin [email protected]:dom-bro/task-manager.git 綁定 github 遠程源
git commit 之後執行 git push
簡簡單單，一個全新的全棧項目就搭起來啦。
最後
GitHub 地址：https://github.com/dom-bro/task-manager
接下來會不斷在這個項目上迭代更新，歡迎 star 和 issue
雖然十分鐘就把這個項目搭起來了，但如果想掌握其中所涉及的技術，至少需要十個月孜孜不倦的去學習和摸索。
正文結束。點擊查看代碼變更
閑言碎語
vue or react ？
vue 和 react 現在基本上分庭抗禮，都是前端必知的 mvvm 框架。
選擇 vue 是因為喜歡和熟悉，沒做什麼功能和性能上的對比。這幾年工作和生活中基本上都是用的 vue，閉著眼睛都會寫。
然而如果讓我提供建議，兩者可兼得。有時間和精力的同學能熟悉甚至精通兩個是最好的，跳起槽來你永遠比別人機會多一倍。
vue3 or vue2 ?
毫無疑問，vue3 比 vue2 更好。
雖然推崇組合式 api，但我還是使用選項式 api。因為之前是 vue2 寫的，使用選項式幾乎零遷移成本。
vite or vue-cli ？
相比 vue cli 的編譯打包，vite 利用了瀏覽器原生的 module 載入，速度極快。官方都推薦 vue-cli -> vite，還選啥！
koa or express ?
express 內置了很多中間件，而 koa 可以自由組裝，還可以 async/await。
若為自由故，express 可以拋
