vue3搭建实战项目笔记二

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的好处

• 当项目代码越来越多的时候，上面的组织架构思路就会更清晰，做了一个分层架构，便于维护和修改， 将很多功能做了一个力度化