fullstack-blog

Hello，这是Vue3+TS+Node打造个人博客开源全栈项目，最初采用 Vue3 + Vue CLI + Typescript + NodeJS Express 实现，目前已经涵盖了多种技术实现，无论你是 Webpack/Vite 使用者，或者是 Vue/React 爱好者，这里都有你想要的内容，你甚至可以从这里学会多种框架的使用。

如果你是一个前端开发者，还不太清楚后端开发或者全栈的概念，请一定不要错过这个项目，我相信它会对你的工作或者求职有所帮助！

本项目最新代码采用 pnpm monorepo 架构搭建，工程化能力和开发体验都比较不错，目前支持：

• Pnpm monorepo 架构，单仓库开发全栈项目的极致体验
• Changeset：最先进的 monorepo 版本管理工具
• Vite 支持：跟进最新的 Vue 生态
• Prettier + ESLint + Stylelint 全项目支持，统一的代码风格，与低质量代码说拜拜
• Commitizen: git cz 交互式提交
• Commitlint: commit message 规范校验
• Husky + lint-staged 代码入库质量检查
• Docker Compose 开发和生产环境完整支持，一致的开发体验
• Github Actions 支持，构建和部署全部自动化
• unplugin-vue-components 支持识别和导入组件，按需加载

如果你需要找到旧版的前后端工程独立仓库代码，其中前端部分可以查看 2.X 版本，具体请查看v2 分支。后端部分可以打开express-blog-backend。

小程序源码是独立仓库维护的，可以打开blog-weapp。

在线体验

点击Tusi博客体验一把。

相关博客

我写了一系列博客专栏，介绍如何使用 Vue3+TS+Node 打造个人博客。点击前往专栏。

Monorepo 介绍

为了让大部分前端开发者能够上手本项目，我们在 pnpm monorepo 支持了多种技术框架，你可以根据需要组合使用。

其中前端部分：

• Vite + Vue3 + Pinia + TypeScript: 见目录 app/vite-vue3，线上效果点击blog.wbjiang.cn
• Vue CLI + Vue3 + Vuex + TypeScript + SCSS: 见目录 app/webpack-vue3
• CRA + React18 + TypeScript + React-Redux + Redux Toolkit + Tailwindcss + Styled Components: 见目录 app/cra-react18
• Vite + React18 + TypeScript + Zustand
• Vite + Nuxt

后端部分：

• Express + MySQL: 见目录 app/express-server
• NestJS 开发中...

Features

• 文章分页
• 文章详情
• 热门文章
• 分类及分类下文章
• 标签及标签下文章
• 留言板
• 文章评论区
• 文章时间轴
• 在线聊天室
• OpenAI聊天机器人
• JWT 认证（新版）
• Session 认证（旧版）
• 后台维护功能：文章管理，创作，评论管理及审核，留言管理及审核，分类管理，标签管理

全局依赖

pnpm add -g commitizen

git 配置

git config core.autocrlf input

安装项目依赖

pnpm install

容器化运行项目【推荐】

见docker-ops.md。

非容器化运行项目

见legacy-ops.md。

联系我

如果有遇到其他问题，也可以联系我交流。

如果本项目对你工作或者求职有所帮助，请留下您的 star 多多支持我，免费开源不易，让这个项目帮到更多的人，多谢！

反馈建议

如果你对本项目有一些建议或者想法，可以在issue提出，非常感谢！

贡献者

Star History