2.1.git管理項目

• createVue工具默認沒有初始化git倉庫，vue-cli是默認初始化git本地倉庫的

  • 基于webpack工具；
  • 命令：vue create xxx

• 沒有的話，手動用git來做一個項目管理

  • 初始化一個git倉庫
  • 命令：
    • 1.git init 初始化倉庫
    • 2.git add . 將對應的文件添加的本地倉庫
    • 3.git commit -m ‘xxx’ 做一個本地提交版本
    • 4.補充husky是一個用于git鉤子的工具,提交代碼時做驗證

• 依賴問題：

  • 當出現npm install報錯安裝不上的時候，
  • 查看報錯原因，如果是依賴不兼容，可以使用–force（強制安裝）或者 --legacy-peer-deps（忽略沖突、各自安裝）

2.2.隱藏tabBar欄

2.2.1 方案一：在路由元信息中設置一個參數是否顯示tabBar

- 在router文件夾下index.js中設置路由元信息```javascript  import { createRouter,  createWebHashHistory } from 'vue-router'const router = createRouter({history: createWebHashHistory(),// 映射關系：path -> componentroutes: [{path: '/city',component: () => import('@/views/city/city.vue'),meta: {hideTabBar: true}}]})export default router;```
- 在App.vue中通過獲取當前活躍的路由對象的meta信息，通過判斷是否隱藏tabBar來控制tabBar的顯示和隱藏```javascript  <template><div class="app"><!-- 根據路由元信息是否顯示 tabBar --><router-view></router-view><tab-bar v-if="!route.meta.hideTabBar"/></div></template><script setup>import tabBar from '@/components/tab-bar/tab-bar.vue';import { useRoute } from 'vue-router';// 當前活躍的路由對象const route = useRoute()</script>```

2.2.2 方案二：通過全局設置相對定位樣式

- 在common.css中設置top-page
- 樣式如下：```javascript.top-page {position: relative;z-index: 9;height: 100vh;overflow-y: auto;background-color: #fff;}```
- 使用時加上類名即可

2.3.項目里封裝axios

2.3.1 發送網絡請求的兩種做法

• 兩種做法如下：
  1. 引入第三方庫 axios，直接在組件頁面直接使用axios發送網絡請求，但是這樣來做不好，不利于代碼維護
  2. 最好對axios做一層封裝，不管是復用性、可用性、可維護性，甚至框架的替換都是更方便的

2.3.2 封裝axios并發送網絡請求

2.3.2.1 對axios的封裝寫在index.js中

• 步驟： 在service文件夾下新建request文件夾，然后在新建index.js

• index.js代碼如下：

      ```javascript import axios from 'axios'import { BASE_URL, TIME_OUT } from './config'class HyRequest {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 HyRequest(BASE_URL, TIME_OUT)```
  

  • 文件結構圖如下：

2.3.2.2 統一配置文件

• 步驟： 在request文件夾，然后在新建config.js主要用于配置基礎路徑和超時時間
• config.js代碼如下：

              export const BASE_URL = "http://123.207.32.32:1888/api"export const TIME_OUT = 10000```![在這里插入圖片描述](https://i-blog.csdnimg.cn/direct/ac0accb215d646639a93558bf1358dab.png)

2.3.2.2 統一引用

1. 在request文件下的index.js文件中如分別引入這兩個參數
2. 完整代碼如圖：

2.3.3 測試發送網絡請求并存儲數據

1. 使用pinia狀態管理庫在actions發送網絡請求
2. 關鍵點：
   • 在state里面存儲數據
   • 在actions里面編寫異步函數（網絡請求函數）
   • 在頁面調用異步函數（網絡請求函數）

2.3.3.1 創建storei并編寫網絡請求函數

1. 創建home模塊——在stores新建modules文件夾，新建一個模塊home.js處理home中共的網絡請求和數據存儲
   • 代碼如下：

        import { defineStore } from "pinia";import hyRequest from '@/service/request/index.js'const useHomeStore = defineStore("home", {state: () => ({hotSuggests: [],categories: []}),actions: {async fetchHotSuggests () {const res = await hyRequest.get({ url:'/home/hotSuggests' })this.hotSuggests = res.data}}})export default useHomeStore
     

2. 考慮到模塊中可能會有大量網絡請求，可能會有大量的網絡請求地址會造成后期不好維護，所以在做了一層封裝
   • 代碼如下:

               import { defineStore } from "pinia";import { getHomeHotSuggests } from "@/service";const useHomeStore = defineStore("home", {state: () => ({hotSuggests: [],categories: []}),actions: {async fetchHotSuggests () {const res = await getHomeHotSuggests()this.hotSuggests = res.data}}})export default useHomeStore```

2.3.2.2 封裝請求地址函數

1. 封裝的原因：
   • 會造成組件頁面過多的維護請求URL，代碼冗余
   • 后期不利于修改和維護這個地址，如發生修改需要找到對應的組件，在修改對應的地址，不方便進行管理
2. 第一步在service文件下新建modules文件夾，然后新建一個模塊home.js文件,統一處理home頁面請求地址函數(相當于對請求地址做了一層單獨的封裝)
   • 代碼如下：

     	import hyRequest from '../request'export function getHomeHotSuggests () {return hyRequest.get({ url: "/home/hotSuggests" })}```
     

3. 第二步統一導出請求地址函數，在service文件夾下新建index.js,先從各模塊中導入所有的函數，然后在進行統一導出
   • 代碼如下：

     // ./modules/home從這個文件里面導入該文件所有導出的東西
     // export * 然后在這里統一做一個導出(把所有導入的東西都導出下)
     export * from './modules/city'
     export * from './modules/home'
     

2.3.2.3 測試調用接口發送網路請求

1. 測試調用接口函數，在home頁面發送網絡請求
   • 代碼如下

   	<script setup>import useHomeStore from '@/stores/modules/home';// 發送網絡請求const homeStore = useHomeStore()homeStore.fetchHotSuggests()</script>```
   

2. 在子組件中獲取數據
   • 代碼如下：

     	<template><div class="section hot-suggests"><template v-for="(item,index) in hotSuggests" :key="index"><div class="item":style="{ color: item.tagText.color, background: item.tagText.background.color }">{{ item.tagText.text }}</div></template></div></template><script setup>import useHomeStore from '@/stores/modules/home'import { storeToRefs } from 'pinia'// 熱門建議const homeStore = useHomeStore()const { hotSuggests } = storeToRefs(homeStore)</script>
     

2.3.2.4 補充數據請求地址封裝的過程

1. 整體過程：單個組件想拿數據，不需要關心這個數據請求的URL(對于組件來說)，只需要從modules文件下找到對應的模塊，引入對應的模塊，直接調用相對應的接口地址函數封裝
2. 詳細過程：
   • 比如調用home.js中的getHomeHotSuggests的時候，要請求的URL和參數，全部都在home.js模塊中做拼接的
   • 地址和參數拼接好后在發送網絡請求，拿到數據返回的是promise
   • 把promise的數據返回出去，最后調用這個promise拿到數據，在組件中做數據渲染
3. 文件目錄結構如圖：
   

2.3.2.5 封裝axios的好處

• 當項目代碼越來越多的時候，上面的組織架構思路就會更清晰，做了一個分層架構，便于維護和修改， 將很多功能做了一個力度化