仿掘金，前台vue服务端渲染（ssr）、后台react(spa)、后台服务是Nodejs Koa的一个多人文章发布系统（分享）

我做这个的目的主要就是，把目前所学的全部都用上，包含前端大部分的技术栈了，主要就是怕自己学的东西不使用然后就慢慢淡忘了，这个里面包括脚手架都是自己搭的，vue 的 ssr 也是用的最基础的，让看的人也能了解原理。
虽然现在有些框架都封装的很好，很快能使用，但是很多别人都不了解原理吧

针对你提到的仿掘金的多人文章发布系统，采用Vue服务端渲染（SSR）、React（SPA）前台以及Node.js Koa作为后台服务，以下是一个简要的技术实现概述及部分代码示例：

Vue SSR 部分

1. 环境搭建：

   • 安装依赖：npm install vue vue-server-renderer express
   • 配置Webpack，分别创建客户端和服务端的配置文件。

2. 创建Vue实例：

   const Vue = require('vue');
   const app = new Vue({
     template: `<div>文章内容</div>` // 示例模板
   });
   

3. 服务端渲染： 使用vue-server-renderer创建渲染器，并集成到Express服务器中。

React SPA 部分

• 使用Create React App初始化React项目。
• 配置路由及组件，实现文章展示等功能。

Node.js Koa 后台服务

1. 项目初始化：

   npm init -y
   npm i koa koa-router koa-body
   

2. 创建Koa应用：

   const Koa = require('koa');
   const Router = require('koa-router');
   const app = new Koa();
   const router = new Router();
   
   router.get('/articles', async (ctx) => {
     ctx.body = [{ title: '文章1' }, { title: '文章2' }]; // 示例数据
   });
   
   app.use(router.routes()).use(router.allowedMethods());
   
   app.listen(3000, () => {
     console.log('Server running on http://localhost:3000');
   });
   

总结

上述方案展示了Vue SSR前台、React SPA前台以及Node.js Koa后台服务的基本搭建思路。实际项目中，还需根据具体需求进行功能完善和性能优化。