【Vue3.0移动端项目--旅游网】-- 首页日期和热门推荐处理

多一些不为什么的坚持🤳

贤蛋 🥚大眼萌 ，一名很普通但不想普通的程序媛🙊

📝本文章收录于专栏：Vue3.0移动端项目-旅游网

第一篇：【Vue3.0移动端项目–旅游网】–项目初始化搭建

第二篇：【Vue3.0移动端项目–旅游网】–配置tabBar &首页搭建

第三篇：【Vue3.0移动端项目–旅游网】-- 城市页面搭建

🧲 新建 home 分支

通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。

1. 创建新分支并且跳转到改分支上

git checkout -b home01
1

2. 查看分支

git branch
1

🚀 入住日期展示和处理

引入时间处理函数库：dayjs

npm install dayjs
1

1. 设置时间格式

新建时间处理函数工具 util/farmat-time.js

import dayjs from "dayjs"

export function formatMonthDay(date) {
  return dayjs(date).format("MM月DD日")
}

export function getDiffDays(startDate, endDate) {
  return dayjs(endDate).diff(startDate, "day")
}

1
2
3
4
5
6
7
8
9
10

2. 获取时间

3. 引入 Vant 中的 Calendar 组件

4. 页面及样式

效果：

🏓 价格和关键字布局

效果：

🥁 热门城市推荐

1. 发送网络请求获取数据

服务器地址在文末

2. 创建首页数据容器

3. 从 Store 中取到数据

4. 渲染页面

效果：

🧬 Git 管理和代码托管（github）

1. 添加到暂存区

git add .
1

2. 添加到仓库

git commit -m "home01分支"
1

3. 推送代码

git push -u origin home01
1

4. 将本地的tabbar 分支 合并到主分支上master （注意要先切换在主分支上）

git checkout mater
1

5. 分支合并

git merge home01
1

6. 更新远程仓库 master 分支

git push
1

7. 删除tabbar分支

git branch -d home01
1

补充：

网络数据请求地址城市数据

项目github 地址：https://github.com/fdfd-0313/cz-trip.git