01 挑战十分钟创建一个新的全栈项目

GitHub 地址:https://github.com/dom-bro/task-manager

接上篇: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 可以抛

标签: Javascript

添加新评论