vue.js电商项目--美丽购物街day01首页制作

首页效果如图

下拉首页

划分目录结构

使用vue-cli3搭建脚手架

vue.config.js配置文件别名

vue-cli3没有vue.config.js,要自行新建此文件

module.exports={
   
    configureWebpack: {
   
        resolve: {
   
         alias: {
   
          'assets':'@/assets',
          'common':'@/common',
          'components':'@/components',
          'network':'@/network',
          'views':'@/views'
         }
        }
    }
}

App.vue文件

<template>
  <div id="app">  
  //keep-alive保存组件状态
    <keep-alive>
      <router-view/>  
    <keep-alive/>
    //底部tabbar
    <main-tab-bar/>
  </div>
</template>

<script>
 import MainTabBar from 'components/content/mainTabbar/MainTabBar.vue'
export default {
   
  name: 'App',
  components:{
   
    MainTabBar
  }
}

</script>

<style lang = "less" scoped>
 @import "assets/css/base.css";
</style>

router文件下的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home=()=>import('../views/home/Home.vue')
const Category=()=>import('../views/category/Category.vue')
const Cart=()=>import('../views/cart/Cate.vue')
const Profile=()=>import('../views/profile/Profile.vue')
const Detail=()=>import ('../views/detail/Detail.vue')

Vue.use(VueRouter)

  const routes = [
  {
   
   path:'/',
   redirect:'/home'
  },
  {
   
    path:'/home',
    component:Home
    },
  {
   
  path:'/category',
  component:Category
  },
  {
   
   path:'/cart',
   component:Cart
  },
  {
   
   path:'/profile',
   component:Profile
   },
   {
   
   //携带id跳转到详情页
    path:'/detail/:iid',
    component:Detail
    }
]

const router = new VueRouter({
   
  routes
})

export default router

封装网络请求

network文件夹专门用来处理网络请求相关的文件
request.js文件代码

import axios from'axios'

export function request(config){
   
  //1.创建axios的实例
  const instance=axios.create({
   
      baseURL:'http://152.136.185.210:8000/api/n3',
      timeout:5000
  })
  //2.axios的拦截器
  //2.1请求拦截
  instance.interceptors.request.use(config=>{
   
      return config
  },err=>{
   

  })
  //2.2响应拦截
  instance.interceptors.response.use(res=>{
   
      return res.data
  },err=>{
   
      console.log(err);
  })
  //3.发送真正的网络请求
  return instance(config)

}

home.js专门处理首页请求相关的

//home.js文件代码
import{
   request}from './request'
//获取轮播图推荐模块数据
export function getHomeMultidata(){
   
  return request({
   
      url:'/home/multidata'
  })
}

//获取楼层区数据
export function getGoodsList(type,page){
   
  return request({
   
    url:'home/data',
    params:{
   
      type,
      page
    }
  })
}

Home.vue文件

<template>
  <div id="home">
   <!-- 导航标题 -->
   <nav-bar>
     <div slot="center">美丽购物街</div>
   </nav-bar>
  <tab-control :titles="['流行','新款','精选']" 
               @tabClick="tabClick"
               class="tab-control2"
               v-show="isTabFixed"
               ref="tabControl1" />
   <scroll class="home-content" 
           :probeType="3" 
           :pullUpLoad="true" 
           @pullingUp="loadMore"
           ref="scroll"
           @scroll="contentScroll">
     <!-- 轮播图 -->
   <home-swiper :banners="banners" @swiperImgLoad="swiperImgLoad"/>
   <!-- 推荐模块 -->
   <home-recommends :recommends="recommends"/>
   <!-- 本周流行 --