新建 city 分支
通过 Git 管理项目，养成良好的开发习惯，可以创建分支。最后开发完可以合并分支。
1.创建新分支并且跳转到改分支上
git checkout -b city
2.查看分支
git branch
封装网络请求 axios（补充）
如果不封装 axios 也可以直接依赖 axios 发送请求，但是为了方便开发，我们队对 axios 做一层封装，一次封装以后都可以直接拷贝使用。
1.安装axios
npm install axios
2.创建 config.js (网络请求基本配置文件)
export const BASE_URL = "http://123.207.32.32:1888/api" export const TIMEOUT = 10000
3.创建request/index.js(对axios进行封装)
import axios from "axios" import { BASE_URL, TIMEOUT } from "./config.js" class CXRequest { constructor(baseURL, timeout = 10000) { this.instance = axios.create({ baseURL, timeout }) } request(config) { return new Promise((resolve, reject) => { this.instance .request(config) .then(res => { resolve(res.data) }) .catch(err => { reject(err) }) }) } get(config) { return this.request({ ...config, method: "get" }) } post(config) { return this.request({ ...config, method: "post" }) } } export default new CXRequest(BASE_URL, TIMEOUT)
搭建城市页面
1. 创建 City 页面
2. 路由跳转
这里需要隐藏掉 tabbar，所以给路由携带了meta参数。在 tabbar 组件使用处采用v-if判断是否显示
效果：
GIF
城市页面布局
1. 搜索框搭建
这里引入 Vant 的搜索框样式，并且修改其样式
效果：
2. 城市标签页
效果：
3. 从服务器获取城市相关数据
- 发送网络请求
- 将数据数据存入pinia的单独的city store中
- city 页面拿取 city store 中的数据
4. 将获取到的数据渲染到城市页面
效果“
效果
热门城市展示
效果：
5. 监听城市点击事件
效果：
Git 管理和代码托管（github）
1.添加到暂存区
git add .
2.添加到仓库
git commit -m "city分支"
3.推送代码
git push -u origin city
4.将本地的tabbar 分支 合并到主分支上master （注意要先切换在主分支上）
git checkout mater
5.分支合并
git merge city
6.更新远程仓库 master 分支
git push
7.删除tabbar分支
git branch -d city
