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

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

新建 home 分支


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

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

git checkout -b home01

2.查看分支

git branch

入住日期展示和处理


引入时间处理函数库:dayjs

npm install dayjs

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")
}

2. 获取时间

微信图片_20221011222557.png

3. 引入 Vant 中的 Calendar 组件

微信图片_20221011222633.png4. 页面及样式

微信图片_20221011222703.png

效果:

image.gif

价格和关键字布局

微信图片_20221011222811.png

效果:

微信图片_20221011222837.png

热门城市推荐


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


服务器地址在文末

微信图片_20221011222928.png

2. 创建首页数据容器


微信图片_20221011223003.png


3. 从 Store 中取到数据


微信图片_20221011223034.png

4. 渲染页面

微信图片_20221011223059.png

效果

Git 管理和代码托管(github)

微信图片_20221011223121.png

Git 管理和代码托管(github)


1.添加到暂存区

git add .

2.添加到仓库

git commit -m "home01分支"

3.推送代码

git push -u origin home01

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

git checkout mater

5.分支合并

git merge home01

6.更新远程仓库 master 分支

git push

7.git push

git branch -d home01
相关文章
|
1月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
91 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
1月前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
151 2
|
1月前
|
JavaScript
Vue CLi脚手架创建第一个VUE项目
Vue CLi脚手架创建第一个VUE项目
35 3
|
23天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
9天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
1月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
41 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
26天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
20 7
|
22天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
26天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
30 6
|
22天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
下一篇
无影云桌面