1.安装

npm i mockjs@1.1

 2.准备json数据

说明：mock数据需要的图片放置到public文件夹中（原封不动的打包到dist文件夹）

[{"id": "1","imgUrl": "/images/banner1.jpg"},{"id": "2","imgUrl": "/images/banner2.jpg"},{"id": "3","imgUrl": "/images/banner3.jpg"},{"id": "4","imgUrl": "/images/banner4.jpg"}
]

3.创建mockServe.js文件

说明：默认暴露json格式，图片等。mock数据：第一个参数请求地址，第二个参数：请求数据。

//说明：一定要大写
import Mock from "mockjs"// 把json数据格式引入进来,webpack默认暴露，图片，json格式文件
import banner from "./banner.json"import floor from "./floor.json"Mock.mock("/mock/banner",{code:200,data:banner})
Mock.mock("/mock/floor",{code:200,data:floor})

 4.引入main.js

说明：就是向引入图片一样；将Mock.mock语句放在main.js中是为了确保在整个应用程序运行时，模拟接口能够正常工作，而不是在某个特定组件或模块中只生效一次。这样做可以使模拟数据在整个应用程序范围内生效，方便进行开发和测试。

// 引入mock数据
import "@/mock/mockServe";

5. 重写axios

//对axios进行二次封装
import axios from "axios"
import "nprogress/nprogress.css"// 引入进度条import nprogress from "nprogress"// start代表进度条开始，done表示进度条结束
const requests =axios.create({//   发请求的时候自动出现apibaseURL:"/mock",//   请求超时的时间timeout:5000,})
// 请求拦截器，
requests.interceptors.request.use((config)=>{// config对象中有一个headers请求头// 进度条开始nprogress.start()return config
})// 响应拦截器
requests.interceptors.response.use((res)=>{// 成功的回调函数，服务器相应数据回来以后，响应拦截器可以检测到// 进度条结束nprogress.done()return res.data
},error=>{console.log(error);return Promise.reject(new Error("fail"))
})export default requests

 6.index.js

import mockRequest from "./mock";
// 轮播图
export const reqGetBannerList = () => {return mockRequest.get("/banner");
};

7.store

说明：store里面的index.js。

//home模块的小模块
import { reqCatgoryList,reqGetBannerList,reqFloorList } from "@/api"const state={//state中的默认值为空，服务器返回的值进行初始花，服务器返回的//  数组，就返回数组，对象也是categoryList:[],bannerList:[],floorList:[]
}
const actions={// 通过接口函数向服务器发送数据async categoryList({commit}){let result =await reqCatgoryList()if(result.code===200){commit("CATEGORYLIST",result.data)}},// 获取首页轮播图async getBannerList({commit}){const result=await reqGetBannerList()if(result.code===200){commit("GETBANNERLIST",result.data)}},// 获取floor数据async getFloorList({commit}){const result=await reqFloorList()if(result.code===200){commit("GETFLOORLIST",result.data)}}
}const mutations={CATEGORYLIST(state,categoryList){state.categoryList=categoryList},GETBANNERLIST(state,bannerList){state.bannerList=bannerList},GETFLOORLIST(state,floorList){state.floorList=floorList}}const getters={}export default {state,mutations,actions,getters
}

8.vue页面

说明：vue页面中的script标签

import { mapState } from "vuex";
// 引入swipter
export default {name: "",data() {return {};},mounted() {//派发action，将数据存储到仓库this.$store.dispatch("getBannerList");// 因为dispathch设置到异步请求是，// 导致v-for结构还没完成},computed: {...mapState({bannerList: (state) => state.home.bannerList,}),},
};