3 Star 0 Fork 0

yangjx/metaverse

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

Metaverse

基于React的元宇宙社交与社区前端项目

项目说明

1.安装依赖包

npm install

2.启动

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

3.文件介绍

  • 运行成功之后,简单了解一下项目文件结构。每一个组件以及子组件分的很详细。

  • UI库采用的是Antd。在文档中找到合适的模版,组件结构直接复制粘贴,再调整一下,在顶部引入相应的组件就可以了。具体的api配置文档里面也有,可以直接搜索关键字快速找到。

  • 所有的api请求方法抽离到一个文件中,利于后期查看和维护修改等。

  • 静态文件放在static文件夹中,例如图片等。

  • 如果组件需要单独的样式文件可以在index.jsx同级目录下创建`.scss文件或者.less文件。

  • eslintrc.json:位于根目录的文件,用于配置eslint检查规则以及其他选项。

  • craco.config.js:位于根目录的文件,用于修改webpack配置。

4.确认项目是否正常运行

  • 路由是否正常匹配,以及子组件是否正常切换。

    路由匹配是采用编程式路由。页面结构文档有路由路径列表,按照列表逐一手动输入确认,有链接按钮的可以点按钮(去编辑)。

  • redux状态管理是否正常。

    redux采用的是reduxjs/toolkit即redux工具包。下面有文档链接,可以去看一下基础教程中的基本使用方法。

    Home组件中含有redux的演示代码。配合redux开发工具(Redux DevTools)可以确认状态是否添加成功。

目录结构

src-|

    |--api  -------------------------所有请求api统合到这一个文件里

    |--components  ------------------组件文件夹

    |--redux  -----------------------redus的store.js文件

    |--static  ----------------------一些静态文件放在这里

    |--App.jsx

    |--App.less

    |--index.js

    |--page404.jsx

相关文档的链接

react-router-v6 文档链接

轻服务JS-SDK

Redux JS/toolkit

空文件

简介

字节前端青训营之大作业项目:【元宇宙社交与社区】 ——by【我们一起来作队】Team 展开 收起
JavaScript 等 4 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/yangjx24/metaverse.git
git@gitee.com:yangjx24/metaverse.git
yangjx24
metaverse
metaverse
master

搜索帮助