前言
好像掘金已经好久没有搞活动了，我也是好久没有写文章了。
而近来，自己刚做了一个小的全栈项目吧。这算是自己第一次完整地去做一个全栈的项目。
反正自己已经很久没有写文章了，刚好趁着这个机会，写一下自己做过的这个项目吧。
一方面，完成自己的写作目的。另外一方面，也是把这个小项目给写下来，算是一种记录吧。
需求分析
这个项目，主要是做一个和宠物有关的一个网站吧。原本一开始的时候，我想的是要做一个完整的网站的。
不过当自己去做的时候，发现好像不是这么容易做的。做需求分析，也是做的有点懵。
自己以前都没做过需求分析，都是BA做需求分析，出一份需求文档。我们根据这份需求文档，进行开发就好了。有不懂的地方，询问一下BA。
如果叫我开发一个网站，我可以开发的很快，很快就把它完成了。
但是如果叫我去分析一个网站要怎么做，有什么功能，有什么页面？
我就不知道该怎么去做了。
不过后面，我思考了一下。既然自己不知道要怎么做，那就从一个简单的网站，开始做起吧。
我先做几个页面，有一些基础的功能。后面如果有需要了，我再继续把它进行扩展。
我计划做下面几个模块：
-
首页
-
登录/注册
-
新增/修改宠物
-
宠物详情
- 详情
- 评论
-
收藏
就做这几个模块吧。不要看只有这几个模块，当你真正地去做的时候，你会发现，还是有非常大的难度的。
如果单纯地从前端角度来看，这几个模块，好像没有什么内容。但是从需求分析或者后端角度来看，就没有这么容易了。
比如，宠物详情模块，你要怎么展示详情，页面要怎么做？
当你去思考的时候，你就会发现，事情没有这么简单。
技术选型
我以前主要是使用vue来开发项目的，不过前段时间，我也有学习了react。
既然自己以前一直是使用vue来开发的，那现在，何不换一下其它框架来开发呢。
刚好自己学习了react，这就立马来一个项目，可以使用react开发了。
这个项目比较简单，也就没有用什么其它库了。
主要是：react + ts + redux + ant design
感觉当下，ts还是很流行的。好，那在项目里，也使用一下ts。
项目搭建
以前搭建项目，都是使用CRA来搭建的。因为老版本的react官网里，就是推荐使用CRA来搭建react项目的。
不过现在到react的官网里，发现好像不是推荐使用CRA来搭建react的项目了。而是推荐使用nest来搭建react项目了。
不过我对nest不是很熟悉，也没怎么使用过nest来创建react项目。
使用vue3开发项目时，我都是使用vite来创建项目的。当时创建项目的时候，发现不仅可以创建vue项目，也可以创建react的项目。
不过我没有使用过vite创建react项目，那好，这次就使用vite来创建react项目了。
使用vite创建项目，创建时，根据提示，选择你想要的配置即可。
开发
开发，就按照正常的前端开发就好了。
开发这些页面和功能，其实不是很难的。难的是，前面需求分析的时候。这些功能要怎么做，页面要设计成什么样。当你把这些，都想好了，开发的时候，就不难了。很快就开发好了。
不过也遇到了一个小的问题：路由配置。
正常的路由配置，是在Routes标签里，写Route。
<Routes>
<Route path='/' element={<Home />}></Route>
</Routes>
要配置多个路由的话，就要写多个Route标签。
这里，我想按照vue里面的路由配置一样，在一个js文件里，单独定义路由。
react-router-dom已经帮我们实现了这个功能，在js文件里定义好路由，引入进来，使用useRoutes方法注册路由即可。
当时我项目里，使用了ts了。我当时想到的是，把这个定义路由的js文件，改成ts就好了。
改了之后，在这个文件里，发现ts报错了。提示一些组件有问题。
在js里面，引入这些组件没有问题。但是到了ts里，这些组件就报错了。
后面查阅了一些资料，发现是不能在ts文件里使用组件的。要在tsx文件里，才能使用使用组件。
后面改了之后，没有报错了。
总结
本篇文章，主要是介绍了这个全栈项目和前端有关的内容。比如需求分析、前端项目搭建等。
作为一个前端来说，项目搭建和项目开发都不难，难主要难在需求分析上面。
这次这个项目，我也没有做特别复杂的需求，可能自己没有考虑到吧。
好了，关于我的第一个全栈项目-前端篇，就介绍到这里了。
