开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 24 天，点击查看活动详情

Home首页模块

组件拆分

步骤

先完成静态页面
拆分出静态组件
获取服务器的数据进行展示
动态业务

拆分

三级联动--全局组件
轮播图+快报
今日推荐
热卖排行
猜你喜欢
家用电器、手机通讯（复用）
品牌logo

全局组件

由于三级联动在Home，Search，Detail都出现了，所以把他注册为全局组件。

好处：只需要注册一次，就可以在项目的任意地方使用了

// 三级联动组件--全局组件
import TypeNav from '@/pages/Home/TypeNav'
// 第一个参数:全局组件的名字,第二个参数:哪一个组件
Vue.component(TypeNav.name, TypeNav);

使用：在Home的index.vue中<TypeNav/>

三级联动全局组件:三级联动已经注册为全局组件,因此不需要再引入了,直接使用即可

POSTMAN测试接口

刚刚经过postman工具测试，接口是没问题的
如果服务器返回的数据code字段200，代表服务器返回数据成功
整个项目，接口前缀都有/api字样

axios二次封装

为什么要进行二次封装？

请求拦截器：在发请求之前可以处理一些业务
响应拦截器：当服务器数据返回以后，可以处理一些事情

安装命令： cnpm install --save axios

这里我在vsCode里运行的时候报错了

查了一下解决方法：

以管理员身份运行Windows PowerShell.
然后，输入命令set-ExecutionPolicy RemoteSigned更改执行策略。
最后，输入Y, 执行更改策略。

在项目中经常出现API文件夹

这个文件夹就是axios的

接口中，使路径都带有/api：baseURL:"/api" 有了这个之后，假如想写/api/list/card，那么直接写成/list/card`就可以了

axios参考文档：git或者NPM

在src文件夹下创建api文件夹，然后在这里创建request.js文件

//对axios进行二次封装
import axios from "axios";

//1.利用axios对象的方法create，去创建一个axios实例
//2.request就是axios，只不过稍微配置一下
const requests = axios.create({
        //配置对象
        //基础路径，发请求的时候，路径中会出现api
        baseURL: "/api",
        //代表请求超时的时间5s
        timeout: 5000,
    })
    //请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
    //config：配置对象，对象里面有一个属性很重要，headers请求头
    return config;
})

//响应拦截器
requests.interceptors.response.use((users) => {
    //成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return res.data;
}, (error) => {
    //响应失败的回调函数
    return Promise.reject(new Error('faile'));
})

//对外暴露
export default requests;

接口统一管理

项目很小，完全可以在组件的生命周期函数中发送请求
项目大：axios.get('xxx')

跨域问题

什么是跨域？

协议、域名、端口号不同请求，称之为跨域传统解决方案：JSONP，CROS，代理服务器

nprogress进度条的使用

安装进度条： cnpm install --save nprogress 装好后在package.json文件中保证其安装成功了注意引进进度条样式，可以在node_modules文件夹里面查找，鼠标左键按住然后ctrl+f进行查找，输入nprogress找到这个文件夹，里面有个nprogress.css，可以更改进度条颜色

改完记得重新npm run serve

总结

start：进度条开始
done：进度条结束
进度条颜色可以改

vue项目笔记4