vue3搭建实战项目笔记二
- 2.1.git管理项目
- 2.2.隐藏tabBar栏
- 2.2.1 方案一：在路由元信息中设置一个参数是否显示tabBar
- 2.2.2 方案二：通过全局设置相对定位样式
- 2.3.项目里封装axios
- 2.3.1 发送网络请求的两种做法
- 2.3.2 封装axios并发送网络请求
- 2.3.2.1 对axios的封装写在index.js中
- 2.3.2.2 统一配置文件
- 2.3.2.2 统一引用
- 2.3.3 测试发送网络请求并存储数据
- 2.3.3.1 创建storei并编写网络请求函数
- 2.3.2.2 封装请求地址函数
- 2.3.2.3 测试调用接口发送网路请求
- 2.3.2.4 补充数据请求地址封装的过程
- 2.3.2.5 封装axios的好处
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 发送网络请求的两种做法
- 两种做法如下：
- 引入第三方库 axios，直接在组件页面直接使用axios发送网络请求，但是这样来做不好，不利于代码维护
- 最好对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```
2.3.2.2 统一引用
- 在request文件下的index.js文件中如分别引入这两个参数
- 完整代码如图：
2.3.3 测试发送网络请求并存储数据
- 使用pinia状态管理库在actions发送网络请求
- 关键点：
- 在state里面存储数据
- 在actions里面编写异步函数（网络请求函数）
- 在页面调用异步函数（网络请求函数）
2.3.3.1 创建storei并编写网络请求函数
- 创建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
- 代码如下：
- 考虑到模块中可能会有大量网络请求，可能会有大量的网络请求地址会造成后期不好维护，所以在做了一层封装
- 代码如下:
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 封装请求地址函数
- 封装的原因：
- 会造成组件页面过多的维护请求URL，代码冗余
- 后期不利于修改和维护这个地址，如发生修改需要找到对应的组件，在修改对应的地址，不方便进行管理
- 第一步在service文件下新建modules文件夹，然后新建一个模块home.js文件,统一处理home页面请求地址函数(相当于对请求地址做了一层单独的封装)
- 代码如下：
import hyRequest from '../request'export function getHomeHotSuggests () {return hyRequest.get({ url: "/home/hotSuggests" })}```
- 代码如下：
- 第二步统一导出请求地址函数，在service文件夹下新建index.js,先从各模块中导入所有的函数，然后在进行统一导出
- 代码如下：
// ./modules/home从这个文件里面导入该文件所有导出的东西 // export * 然后在这里统一做一个导出(把所有导入的东西都导出下) export * from './modules/city' export * from './modules/home'
- 代码如下：
2.3.2.3 测试调用接口发送网路请求
- 测试调用接口函数，在home页面发送网络请求
- 代码如下
<script setup>import useHomeStore from '@/stores/modules/home';// 发送网络请求const homeStore = useHomeStore()homeStore.fetchHotSuggests()</script>``` - 在子组件中获取数据
- 代码如下：
<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 补充数据请求地址封装的过程
- 整体过程：单个组件想拿数据，不需要关心这个数据请求的URL(对于组件来说)，只需要从modules文件下找到对应的模块，引入对应的模块，直接调用相对应的接口地址函数封装
- 详细过程：
- 比如调用home.js中的getHomeHotSuggests的时候，要请求的URL和参数，全部都在home.js模块中做拼接的
- 地址和参数拼接好后在发送网络请求，拿到数据返回的是promise
- 把promise的数据返回出去，最后调用这个promise拿到数据，在组件中做数据渲染
- 文件目录结构如图：
2.3.2.5 封装axios的好处
- 当项目代码越来越多的时候，上面的组织架构思路就会更清晰，做了一个分层架构，便于维护和修改， 将很多功能做了一个力度化
)
