接上篇：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 可以拋
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502255.html
標籤：其他