Bootstrap

【从0到1完成一个项目(二)】用户中心(上)

用户中心(上)

书接上回,继续记录做项目的过程

进行项目的瘦身

项目瘦身就是根据自己项目的实际需求,删掉Ant design pro提供的一些用不到的功能,就是删代码。

去除国际化

国际化的代码在:/src/locales,打开这个文件就可以发现它支持简体中文、英文、繁体等。
在package.json里找到i18n-remove,这就是移除国际化的脚本,执行它。

介绍项目结构(在这个过程进行项目瘦身)

/config

顾名思义,存储一些配置(比如:本地代理,路由)
路由举例:config文件夹里有一个routes.ts文件。作用就是用户输入不同的地址访问到不同的组件,比如登录的组件写在/src/pages/user/Login/index.less,把这个代码文件展示给用户。

/dist

要部署项目的时候就已经编译好的项目目录。

/mock

这个是模拟存放数据的地方,在没有后台数据库这个项目也能登录访问,就是因为它帮我们定制了一些模拟数据。

/public

存放一些静态资源,比如网站的logo,视频音频等。

/src

源代码文件夹,平时写代码时常用的目录

/src/components

存放组件,组件其实可以理解是一些代码片段,具有某项功能或者渲染的界面效果。

/src/e2e

集成测试,可以删掉。

/src/pages

前端页面。虽然不是很懂前端,但是大概理解就是我们真实看到的页面是由这个文件夹的代码和组件一起组成的。

/src/services/swagger

这个是接口文档工具(之后可以学学,删),包括/config/oneapi.json这个文件也定义了项目用到的接口,可删。像这两个工具都是小技术,遇到再学,先学会最小必要知识,在慢慢扩展,这才符合正确的学习步骤,学编程切忌陷入细节的泥潭,而且这些技术要用的时候直接看官方文档就行,然后把自己的理解输出为博客,就算学会了。

/src/app.tsx

项目的入口,启动离不开这个文件。就好比后端的main方法。

/src/global.less

全局引用的less文件(和css差不多,属于样式文件,可以编译为css文件)

/src/global.tsx

全局的脚本文件

/src/service-worker.js

前端界面的缓存

/src/typings.d.ts

定义了TS的类型(类似于C++的宏定义)

/tests

测试文件,可删。一般是专门做测试的人用

/.editorconfig

编辑器的配置,比如说代码要求空几格,配置了之后编辑器就会自动的帮你格式化

/.eslintrc.js

检查js代码语法是否规范

/.prettierrc.js

美化前端代码的工具

/.stylelintrc.js

检查css语法

/.jest.config.js

测试工具 可以删掉

/playwright.config.ts

自动化测试工具,帮你在火狐或谷歌自动测试,不用真实的打开浏览器就能测试。用不到,删。

删掉不要的文件,再重启。只要不报错,初始化前端就完成了。
即使发现报错也不要慌,原因是找不到某个文件,看哪个文件用到它,把用到的删掉就行。

;