Vue3搭建实战项目笔记二

@[TOC](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 -> component routes: [ { path: '/city', component: () => import('@/views/city/city.vue'), meta: { hideTabBar: true } } ] }) export default router; ``` - 在App.vue中通过获取当前活跃的路由对象的meta信息，通过判断是否隐藏tabBar来控制tabBar的显示和隐藏 ```javascript

import tabBar from '@/components/tab-bar/tab-bar.vue'; import { useRoute } from 'vue-router'; // 当前活跃的路由对象 const route = useRoute() ``` #### 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) ``` - 文件结构图如下： ![](https://upload-images.jianshu.io/upload_images/30712146-fbe869206a6fc67a.png) ##### 2.3.2.2 统一配置文件 - 步骤：在request文件夹，然后在新建config.js主要用于配置基础路径和超时时间 - config.js代码如下： ```javascript 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. 完整代码如图： ![](https://upload-images.jianshu.io/upload_images/30712146-e2e05620569e041c.png) #### 2.3.3 测试发送网络请求并存储数据 1. 使用pinia状态管理库在actions发送网络请求 2. 关键点： - 在state里面存储数据 - 在actions里面编写异步函数（网络请求函数） - 在页面调用异步函数（网络请求函数） ##### 2.3.3.1 创建storei并编写网络请求函数 1. 创建home模块——在stores新建modules文件夹，新建一个模块home.js处理home中共的网络请求和数据存储 - 代码如下： ```javascript 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. 考虑到模块中可能会有大量网络请求，可能会有大量的网络请求地址会造成后期不好维护，所以在做了一层封装 - 代码如下: ```javascript 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页面请求地址函数(相当于对请求地址做了一层单独的封装) - 代码如下： ```javascript import hyRequest from '../request' export function getHomeHotSuggests () { return hyRequest.get({ url: "/home/hotSuggests" }) } ``` 3. 第二步统一导出请求地址函数，在service文件夹下新建index.js,先从各模块中导入所有的函数，然后在进行统一导出 - 代码如下： ```javascript // ./modules/home从这个文件里面导入该文件所有导出的东西 // export * 然后在这里统一做一个导出(把所有导入的东西都导出下) export * from './modules/city' export * from './modules/home' ``` ##### 2.3.2.3 测试调用接口发送网路请求 1. 测试调用接口函数，在home页面发送网络请求 - 代码如下 ```javascript import useHomeStore from '@/stores/modules/home'; // 发送网络请求 const homeStore = useHomeStore() homeStore.fetchHotSuggests() ``` 2. 在子组件中获取数据 - 代码如下： ```javascript

import useHomeStore from '@/stores/modules/home' import { storeToRefs } from 'pinia' // 热门建议 const homeStore = useHomeStore() const { hotSuggests } = storeToRefs(homeStore) ``` ##### 2.3.2.4 补充数据请求地址封装的过程 1. 整体过程：单个组件想拿数据，不需要关心这个数据请求的URL(对于组件来说)，只需要从modules文件下找到对应的模块，引入对应的模块，直接调用相对应的接口地址函数封装 2. 详细过程： - 比如调用home.js中的getHomeHotSuggests的时候，要请求的URL和参数，全部都在home.js模块中做拼接的 - 地址和参数拼接好后在发送网络请求，拿到数据返回的是promise - 把promise的数据返回出去，最后调用这个promise拿到数据，在组件中做数据渲染 7. 文件目录结构如图： ![](https://upload-images.jianshu.io/upload_images/30712146-f8ac2a99cc6d275b.png) ##### 2.3.2.5 封装axios的好处 - 当项目代码越来越多的时候，上面的组织架构思路就会更清晰，做了一个分层架构，便于维护和修改，将很多功能做了一个力度化本文由[mdnice](https://mdnice.com/?platform=6)多平台发布

Vue3搭建实战项目笔记二

推荐阅读更多精彩内容