“微商城”项目（4首页）

1.显示轮播图

首页和商品详情页都有图片轮播图展示，考虑到Vue组件代码的复用性，把轮播图相关代码单独放置在src\components\swiper.vue文件中。

在src\pages\Home.vue文件中，编写HTML结构代码，示例代码如下。

在src\components下创建swiper.vue，公共轮播图文件中，swiper.vue编写如下代码。

 

 2.安装axios

使用npm方式在项目中使用命令安装，npm安装命令如下所示。

进入vue_shop04文件夹中，单击右键------>Git Bash Here--->输入如下命令

npm install [email protected] --save

安装完成后，创建src\axios.js脚本文件，示例代码如下。

import axios from 'axios'
import config from './config.js'
export default {
  install: function (vue) {
    var obj = axios.create({
      baseURL: config.baseURL
    })
    vue.prototype.$http = obj
  }
}

 

 创建src\config.js配置文件，编写如下代码。

export default {
  baseURL: 'http://tpadmin.test/api/'
}

接下来，在src\main.js项目入口文件中进行简单配置，将代码写在import Mint UI前面，示例代码如下。

import axios from './axios.js'
Vue.use(axios)

3.从服务器获取数据(注意需要开启，并且右下角要是绿色的，可以参考“微商城”项目（1环境搭建）_瑾寰的博客-CSDN博客)

通过浏览器打开http://tpadmin.test/api/imglist，进行访问测试，结果如下。

 在src\pages\Home.vue组件中，通过axios的方式来请求轮播图接口，展示数据。

data () {
  return {
    imgList: []
  }
},
created () {
    this.getImgList()
},
methods: {
  getImgList () {
    this.$indicator.open({
      text: '加载中'
    })
    this.$http.get('imglist').then(res => {
      this.$indicator.close()
      if (res.data.code === 0) {
        this.$toast('加载轮播图失败')
      } else {
        this.imgList = res.data.data
      }
    })
  }
},

保存代码，启动项目，测试程序是否获取到数据，运行结果如下图所示。

4.快速访问按钮

按钮图片放在src\assets\images目录下，图片素材需要从配套源码中复制过来其中src\assets\logo.png这个文件已经用不到了，删除即可。

我的百度网盘分享：

链接：https://pan.baidu.com/s/1lSsCjf-_zx1ymu6uZeG26Q?pwd=huan 
提取码：huan

在src\pages\Home.vue文件中，编写HTML结构代码，示例代码如下。

 

 保存代码，启动项目，运行结果如下图所示。

接着这篇文章的是“微商城”项目（5登录和注册）

若出现问题可以私信我，如果我能解决，会尽量帮忙的(●ˇ∀ˇ●)