草庐IT

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

MakeMoreTime 2023-03-28 原文

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 可以抛

有关01 挑战十分钟创建一个新的全栈项目的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣,我很好奇如何按顺序创建PI,而不是在过程结果之后生成数字,而是让数字在过程本身生成时显示。如果是这种情况,那么数字可以自行产生,我可以对以前看到的数字实现垃圾收集,从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法,类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  3. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  4. ruby - 使用 Vim Rails,您可以创建一个新的迁移文件并一次性打开它吗? - 2

    使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta

  5. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何

  6. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  7. ruby-on-rails - 无法使用 Rails 3.2 创建插件? - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject),但我没有脚本/生成,只有脚本/rails,当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗?没有这个命令可以创建插件吗?PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布,插件生成器已经被移除。查看变更日志here.现在

  8. ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务? - 2

    如何使用RSpec::Core::RakeTask初始化RSpecRake任务?require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录;它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake

  9. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0,我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时,我通过运行railss并访问localhost:3000确保该应用程序正常运行以前,我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后,由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0,此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  10. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象,为什么它会起作用? - 2

    如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象

随机推荐