01 挑戰十分鐘創建一個新的全棧項目

接上篇：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 地址：//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 可以拋

Tags:

VirMach 便宜 VPS