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 git@github.com: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 可以抛