引言

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

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

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

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

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

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

本文会在Web项目中引入ReactRouter,Redux，以及UI组件库SemiDesign。

1. 引入ReactRouter

ReactRouter有三种引用方式，分别是Framework框架使，还是Data数据式，以及Declarative声明式。

由于拿破轮之前使用过VueRouter，所以选择与其最为类似的Data式来引入项目中。

根据ReactRouter项目官网对于Data式引入的说明一步一步来操作。

1
2
# 进入web目录
pnpm add react-router

配置main.tsx如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import { createBrowserRouter, RouterProvider } from 'react-router';

const router = createBrowserRouter([
  {
    path: '/',
    element: <div>Hello World</div>,
  },
]);

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>
);

20250717185505

然后访问项目根目录成功显示出HelloWorld.

2. 引入Redux

根据Redux官网的提示进行安装

1
pnpm add @reduxjs/toolkit

在src下新建stores目录并创建index.ts文件，写入以下示例内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// src/stores/index.ts

import { configureStore, createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

const store = configureStore({
  reducer: counterSlice.reducer,
});

store.subscribe(() => {
  console.log(store.getState());
});

3. 引入SemiDesign

根据SemiDesign官网提示进行安装。

1
pnpm add @douoyinfe/semi-ui

按照官网提示启动demo

20250717193322

官方建议引入reset-css清除浏览器的默认样式，保证样式的一致性。

1
pnpm add reset-css

在main.tsx中导入即可。具体细节可以看github仓库

进入具体开发

具体开发细节不在此处赘述，感兴趣的同学可以直接去github仓库拉取源码查看。

总结

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

往期推荐✨✨✨

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