vue3搭建实战项目笔记二
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 -> component
routes: [
{
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的好处
- 当项目代码越来越多的时候，上面的组织架构思路就会更清晰，做了一个分层架构，便于维护和修改， 将很多功能做了一个力度化