Vue商城——首页功能

Vue商城项目的前提工作

用脚手架3创建项目

• vue create 项目名称

在GitHub上建一个仓库

将项目与github联系起来

• git init
• git add .
• git commit -m ‘项目名称’
• git remote add origin github地址
• git push -u origin master

更新文件到github

• git add 文件名称或者 git add .

• git commit -m “这是注释内容”

• 这一步从本地仓库或本地分支获取并集成(整合)，输入指令：git pull origin master

• 如果过程中出现‘please enter a commit message…’,首先按下esc退出键然后输入 ：wq即可

• 输入指令：git push -u origin master

划分目录结构

• src
  • assets 放一些资源
    • css
    • img
  • components 放一些公共的组件
    • common 当前项目里面可以使用的组件 在下一个项目里面也可以使用的组件
    • content 与业务相关的组件 只针对于当前项目来说是公共的
  • views 对应视图的一些逻辑
  • router 路由相关的东西
  • store 公共状态的管理 vuex
  • network 网络相关的
  • common 公共的js文件
    • const.js 公共常量
    • utils.js 工具函数
    • mixin.js 一些混入
      

引入css文件

一般开发的是一个前端项目的话，会对项目里面很多css进行初始化

• normalize.css 对浏览器上的很多标签进行统一 在github上搜索 文件链接
• base.css 这是属于自己的css

配置别名

在vue.config.js中配置别名

首页功能的实现

项目模块划分

在components/common封装tabbar
在components/content封装mainTabbar

1. npm install vue-router --save
2. 在router的index.js中配置路由映射关系
   对组件进行懒加载
3. 在main.js中挂载

请求首页的多个数据

1. npm install axios --save 安装框架
2. 在network文件夹下新建request.js
3. import axios from 'axios' 导入
   注意：这里写的是export而不是export default，为什么？
   因为export default只能暴露一个对象，而export 可以暴露多个对象，以后需要用到多个的话就可以
4. 在network文件夹下新建home.js获取首页所需数据的api
5. 在Home组件中面向home.js进行开发，首页创建好之后就发送网络请求在create中
6. 在data中保存数据

网络模块的封装

network->request.js
第一层是工具函数层，封装一个通用的axios，创建一个实例，包括请求的基本路径，请求拦截器，响应拦截器。

export function request(config) {
   
  // 创建axios实例
  const instance = axios.create({
   
    // 默认是get请求
    // 支持跨域 jsonp 在url后面写上callback
    // 这个接口不支持post
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000,
  })

  // 请求的拦截器
  instance.interceptors.request.use(config => {
   
    // 比如config中的一些信息不符合服务器的请求
    // 比如每次发送网络请求时，都希望界面中显示一个请求的图标
    // 某些网络请求(比如登录)，需要携带一些信息
    return config
  }, err => {
   
    console.log(err);
  })

  // 响应的拦截器
  instance.interceptors.response.use(res => {
   
    return res
  }, err => {
   
    console.log(err);
  })

  //发送真正的网络请求
  return instance(config)
}

首页面向request发送网络请求
network->home.js
第二层封装,接口层，对首页所有数据的请求都在home.js中，统一管理。

export function getHomeMultidata(){
   
  return request({
   
    url:'/home/multidata'
  })
}

第三层,调用层，Home.vue中，首页创建完就进行网络请求

getHomeMultidata(){
   
      getHomeMultidata().then(res=>{
   
      //console.log(res);
      // result在组件中，会一直存在，保存在data中
      //this.result=res;
      this.banners=res.data.data.banner.list;// 轮播图
      this.recommends=res.data.data.recommend.list; // 推荐信息
    })
    },

导航栏的封装和使用

1. 在common中封装NavBar，使用具名插槽
2. 在Home中引入封装好的组件
   NavBar的封装

<template>
  <div class="nav-bar">
    <div class="left"><slot name="left"></slot></div>
    <div class="center"><slot name="center"></slot></div>
    <div class="right"><slot name="right"></slot></div>
  </div>
</template>

在Home.vue中的使用
固定在顶部，不跟随滚动条滚动

<nav-bar class="home-nav">
  <div slot="center">购物街</div>
</nav-bar>

轮播图的封装和使用

1. 在componets/common下新建swiper文件下，封装Swiper和SwiperItem
2. 在home/childComps下封装HomeSwiper组件，
3. 在Home中引入封装好的组件
4. 展示轮播图数据banners

推荐信息的展示

1. 在home/childComps下封装HomeRecommendView组件
2. 在Home中引入封装好的组件
3. 展示推荐信息的数据recommend

<div class="recommend">
    <div v-for="(item,index) in recommends" :key="index" class="recommend-item">
      <a :href="item.link">
        <img :src="item.imag