引言

大家好啊，我是前端拿破轮，川内唯二985在读，目前鹅厂前端实习，最近准备开始毕业设计了。

基于物联网工程专业的特性，需要选择一个软硬件结合的项目作为毕业设计，当然根据我的职业规划，该项目主要还是偏向Web前端。

经过调研分析，选择了《学习岛——无人自习室O2O平台设计及商业化分析》。之所以还有商业运行分析是因为拿破轮读的是交叉复合培养的双学位，毕设中需要体现金融学的内容。

接下来我会更新一个系列，记录完整的毕设开发过程，并将项目代码全部开源，欢迎各位大佬不吝赐教。

仓库地址：https://github.com/majialu-love-zouyutong/study-island

声明：本项目代码全部开源，但仅供学习交流使用，请注意学术规范，一旦发现抄袭，剽窃等行为，将追究法律责任。

本文先进行软件的技术选型，经过技术调研和分析，初步确定如下：

项目架构

由于整个项目由拿破轮自己独立设计，全栈开发。而且是整个项目统一使用TS语言，所以决定使用Monorepo的方式来管理项目的前端，后端，移动端，工具组件库和UI库。

前端主要使用React全家桶，包括React,ReactDOM,RectRouter,Redux,以及抖音的UI组件库Semi Design.

后端主要使用Nest.js。

移动端主要使用React Native。

整个项目配置eslint,、commitizen,husky,来规范TS代码和提交规范。

Monorepo管理工具使用pnpm-workspace和truborepo。

搭建项目结构

1. 创建文件夹

1
2
3
4
5
6
7
8
# 创建目录
mkdir study-island

# 进入目录
cd study-island

# 初始化
pnpm init

2. 创建pnpm-workspace

1
2
# 创建pnpm-workspace配置文件
touch pnpm-workspace.yaml

在其中写入以下内容：

1
2
3
packages:
  - 'packages/*'
  - 'apps/*'

这个文件的意思就是表明整个项目使用Monorepo方式进行管理，一个项目中会有多个子包。子包存在于packages/*和apps/*目录下。apps用于存放应用程序，即业务代码。而packages则用于存放工具包和UI组件库等与业务解耦的代码。

3. 创建子包文件夹

然后就可以创建对应的文件夹了。

1
mkdir apps packages

4. 创建前端项目

进入apps文件夹，使用vite创建一个React+TypeScript+SWC的项目。

1
2
cd apps
pnpm create vite@latest

项目名称取为web意味着这是PC端管理后台。

20250716230125

然后按照命令行的提示进入目录启动运行。

1
2
3
cd web
pnpm i
pnpm dev

20250716230318

项目成功启动，Web前端暂时做到这里。

5. 创建后端项目

后端项目使用Nest.js来进行开发。

首先回到apps目录。

1
cd ..

然后按照Nestjs官网的步骤进行创建项目

1
2
3
4
5
# 全局安装nest/cli的脚手架，帮助我们快速搭建一个项目
pnpm add -g @nestjs/cli

# 使用脚手架创建一个新项目,取名为backend
nest new backend

包管理工具选用pnpm按照提示确定即可。

20250716230746

按照提示进入后端项目并启动。

1
2
cd backend
pnpm start

进入backend/src/main.ts，我们发现后端项目运行在3000端口，所以使用浏览器访问http://localhost:3000来验证服务器是否启动成功。

20250716231057

观察发现项目成功启动，后端暂时结束。

6. 创建移动端项目

移动端我们使用React Native进行跨平台开发。按照React Native官网的文档来初始化一个RN项目。

还是先返回apps目录。

1
cd ..

官方推荐基于Expo框架来创建RN项目。

1
pnpm dlx create-expo-app@latest

项目名称取为mobile，表示移动端。

1
2
3
4
5
6
7
8
# 进入项目
cd mobile

# 安装依赖
pnpm i

# 启动项目,windows电脑只能启动android
pnpm ios

20250717001939

移动端处理暂时结束。

7. 整合项目结构，使其符合Monorepo架构

由于我们使用脚手架搭建的项目默认任务我们是单仓库管理的，所以有一些会给我们初始化git仓库，这是不适合我们的。因为我们采用统一的根目录git仓库。所以需要把子包中多余的仓库删除。

20250717002506

在根目录新建.gitignore文件，把node_modules先写进去。

1
2
3
# 确保当前处在根目录study-island下面
touch .gitignore
echo "node_modules" >> .gitignore

8. 配置commitlint和commitizen以及husky

具体配置细节可以参考拿破轮之前的文章🚀🚀🚀实在受不了混乱的提交——我使用了commitlint和commitizen

不过有一一点要注意，在pnpm管理的Monorepo架构中，如果要在根目录安装包必须使用-w参数。

1
2
# 安装@commitlint/cli @commitlint/config-conventional
pnpm add -D @commitlint/cli @commitlint/config-conventional -w

创建commitlint.config.mjs文件

1
touch commitlint.config.mjs

写入以下内容：

1
2
3
4
// commitlint.config.mjs
export default {
  extends: ['@commitlint/config-conventional'],
};

安装husky

1
pnpm add -D husky -w

在根目录创建.husky目录，并在该目录下创建commit-msg文件，写入以下内容。

1
pnpm dlx commitlint --edit $1

安装commitizen

1
pnpm add -D commitizen -w

安装规范依赖

1
pnpm add -D -w cz-conventional-changelog

配置commitizen，在根目录package.json中添加

1
2
3
4
5
6
7
8
9
10
"scripts": {
  ...,
  "commit": "git-cz"
}
// 根目录package.json
"config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }

9. 安装turbo

1
pnpm add turbo --save-dev --workspace-root

详情可参考turbo官网

创建turbo.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// turbo.json
{
  "$schema": "https://turborepo.com/schema.json",
  "tasks": {
    "build": {
      "outputs": ["dist/**"]
    },
    "check-types": {
      "dependsOn": ["^check-types"]
    },
    "dev": {
      "persistent": true,
      "cache": false
    }
  }
}

这个文件中配置的task在我们运行turbo xxx时就会执行各个子包中对应的xxx脚本。

将.turbo加入到.gitignore文件中。

在根目录的package.json中配置脚本

1
2
3
4
"scripts": {
  "commit": "git-cz",
  "lint": "turbo lint"
},

尝试运行trubo lint:

1
pnpm lint

由于web,backend,mobile子包的package.json中都有lint的脚本，所以turbo lint会执行每个子包中的脚本。

20250717005822

10. 初始化git仓库，利用命令行交互式提交

1
2
3
git init
git add .
pnpm commit

提交类型为feat，信息是初始化。

20250717010035

将项目发布到githbu，发布为public仓库。

总结

本篇完成技术选型和项目搭建，后续会优先进行Web前端开发。在本专栏后续文章更新。

好了，这篇文章就到这里啦，如果对您有所帮助，欢迎点赞,收藏,分享👍👍👍。您的认可是我更新的最大动力。由于笔者水平有限，难免有疏漏不足之处，欢迎各位大佬评论区指正。

往期推荐✨✨✨

我是前端拿破轮，关注我，和您分享前端知识，我们下期见！