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

  • 01 挑战十分钟创建一个新的全栈项目已关闭评论
  • 22 次浏览
  • A+
所属分类:Web前端
摘要

接上篇:Vue+Koa+MongoDB从零打造一个任务管理系统话不多说,直接开整。相比 vue cli 的编译打包,vite 利用了浏览器原生的 module 加载,速度极快。

接上篇: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 目录结构如下图所示

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

比较重要的几个文件

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

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

跑起来啦,可以看到已经可以正常调用上面定义的 /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 可以抛