1 Star 0 Fork 0

孤独的呆吃货 / 好客租房

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

React + Vite

完成的功能

  • 首页
    • 整租
    • 合租
    • 地图找房
    • 定位
  • 找房
    • 房间筛选
    • 房间信息
  • 资讯
  • 我的
    • 登录
    • 注册
    • 我的收藏

项目准备

  • 准备 icon 图标
  • 技术栈:less + axios + Ant 移动端 + React

开发流程

后端操作

  • xp,软件管理安装 MySOL8.0.12
  • 在 SQLyog 中导入数据
  • 运行 npm start
  • 后端地址:localhost:8009

前端操作

创建项目

  • 创建 react+vite 项目: pnpm create vite hkzf-client -- --template react
  • cd hkzf-client
  • pnpm install
  • pnpm run dev

安装依赖

  • 安装路由:pnpm i react-router-dom
  • 安装 Redux:pnpm i @reduxjs/toolkit,pnpm i react-redux//
  • 安装 Ant Design Mobile:pnpm add antd-mobile
  • 安装 Ajax:pnpm i axios
  • 安装 less: pnpm i less
  • 安装 ahooks: pnpm i ahooks
  • 安装类名管理: pnpm i classnames,pnpm i prop-types,pnpm i styled-components
  • 安装地图依赖:pnpm install react-bmapgl --save
  • 引入 icon 图标链接://at.alicdn.com/t/c/font_4202928_u87ote5tyak.css,//at.alicdn.com/t/c/font_4207438_srxfliblx1c.css

创建文件夹

在 src 中新增的文件夹

  • api --用于封装 api 接口
  • components --用于封装组件
  • css --用于存放 css 样式
  • hooks --
  • less --用于存放 less 样式的文件夹
  • routes --用于存放路由文件
  • utils --
  • store --用于存放 redux 文件
  • views --用于存放 React 组件

开发流程

  • 在 main.js 中导入全局通用样式文件 normalize.less,
*,
::after,
::before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
html {
  box-sizing: border-box;
  color: #333;
  font-family: "Helvetica Neue", Tahoma, Arial, PingFangSC-Regular,
    "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  line-height: 1.2;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  text-size-adjust: none;
}
body,
button,
dd,
dl,
ol,
ul {
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
}
a {
  outline: 0;
  color: inherit;
  text-decoration: none;
}
a,
img {
  -webkit-touch-callout: none;
}
button,
input,
select,
textarea {
  outline: 0;
  border: none;
  font-size: inherit;
  font-family: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  font-weight: 400;
}
img {
  max-width: 100%;
}
textarea {
  resize: none;
}
select {
  background-color: transparent;
  appearance: none;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
  appearance: button;
}
input:-webkit-autofill {
  box-shadow: 0 0 0 100px #fff inset;
}
.clearfix::before,
.clearfix::after {
  display: block;
  width: 0;
  height: 0;
  visibility: hidden;
  clear: both;
}
  • 在路由文件中配置路由,
  • 在 index.html 文件中引入字体图标链接
  • 在 vite.config.js 引入:
 resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }

报错解决

空文件

简介

使用React写的移动端好客租房项目 展开 收起
JavaScript 等 4 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/user-li-qi/hkzf.git
git@gitee.com:user-li-qi/hkzf.git
user-li-qi
hkzf
好客租房
master

搜索帮助