从零开始，搭建一个简单的购物平台（十二）前端商城部分

从零开始，搭建一个简单的购物平台（十一）：
https://blog.csdn.net/time_____/article/details/108447234
项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping

从这篇文章开始对前端商城开发进行介绍，当然中间也会穿插着后端的新增模块一起介绍
效果图地址：https://gitee.com/DieHunter/myCode/tree/master/shopping/pic
效果图也附上：
主页       分类              购物车           我的           商品详情        主题区         订单详情      修改信息

由于小程序和App或移动端有差别，所以个人信息页面另做修改
本篇文章主要介绍一下准备工作和项目的搭建，在第一篇文章中已经对webpack配置以及Vue脚手架工具配置，以及其他依赖的安装进行了一个简单叙述，这里开始对准备工作做一个详细介绍，以及项目中的一些临时调整做一个说明

• 使用vue init webpack + 项目的名字（我这里是shopclient，名称不能有大写字母）   初始化项目（一般直接全回车继续，eslink和test可选择不装）
•  安装完成后，我们可以简单配置一下webpack，在自动生成的config文件夹下，index.js中的配置是我们使用webpack进行build和dev时用得上的配置，这里简单介绍几个常用的：
  dev属性：proxyTable，用于开发环境中的代理，解决跨域，以及使用自定义接口重定向

  proxyTable: {
          '/testApi':{//代理接口名，请求到/testApi会定向到http://127.0.0.1:1024/testApi下
              target:'http://127.0.0.1:1024',//目标域名
              changeOrigin:true,//是否允许跨域
              pathRewrite:{"^/testApi":''} // 把testApi替换成空
          }
      },

  host: '127.0.0.1'：本地dev项目服务器地址，通过127.0.0.1加端口号访问项目主页
  port: 8080：本地dev项目端口，通过服务器地址加8080访问项目主页
  autoOpenBrowser：开发环境下项目编译完成后是否在默认浏览器自动打开项目
  assetsPublicPath：静态文件地址，如果写成/static则通过根目录（根据上面的配置是127.0.0.1:8080/static）+/static可访问静态文件
  build属性：index，打包后的主页路径
  assetsRoot：打包输出路径
  productionGzipExtensions：代码压缩类型，一般是['js', 'css']，打包后将会压缩成min.js和min.css

• 配置完成之后，开始下载其他依赖，用到的有，devDependencies：less，less-loader，dependencies：vue-router，axios，crypto-js，mint-ui

• 新建以下文件夹
  

• 配置less常用的初始值，我这里是这样配置的，其中icon用的是阿里的icon，将字体和样式包下载至style，animate用的是Animate.css，transition.less是自己写的一个导航切换时的过渡动画，后面通过全局路由守卫进行切换动画，init中主要对初始样式声明变量，reset.less是设置页面默认样式
  

• 配置mint-ui，在main.js下引入mint-ui和css,以及按需引入组件，我这里项目中在每个组件中按需引入，建议在全局按需引入，减少重复代码

  import Vue from 'vue'
  import 'mint-ui/lib/style.css'
  import MintUI from 'mint-ui'
  
  Vue.use(MintUI);

   

• 配置axios请求方法拦截器，为了方便调用，我们将axios部署在Vue原型上，通过组件中的this.$axios进行调用，以下是拦截器配置，其中config是常量配置文件

  import Vue from "vue";
  import Axios from "axios";
  import Config from "../config/config";
  import { Toast, Indicator } from "mint-ui";
  Axios.defaults.baseURL = Config.RequestPath; //默认请求地址
  Axios.defaults.timeout = Config.RequestTimeOut; //请求超时
  // 添加请求拦截器
  Axios.interceptors.request.use(
    function(config) {
      Indicator.open("加载中...");
      // 在发送请求之前做些什么
      return config;
    },
    function(error) {
      Indicator.close();
      // 对请求错误做些什么
      return Promise.reject(error);
    }
  );
  // 添加响应拦截器
  Axios.interceptors.response.use(
    function(response) {
      Indicator.close();
      // 对响应数据做点什么
      if (response.data.result != 1) {
        Toast(response.data.msg);
      }
      if (response.data.result === -999) {
        //token验证失败
      }
      return response.data;
    },
    function(error) {
      Indicator.close();
      Toast("加载失败");
      // 对响应错误做点什么
      return Promise.reject(error);
    }
  );
  
  Vue.prototype.$axios = Axios;
  

   

•  配置vue-router，我们直接在config中添加vue-router的界面配置项，考虑到路由跳转的过渡动画，我们将router的每个界面进行了一个分级，形成这样的效果

  
  在config文件夹中新建routeConfig，内容如下

  import Home from "../page/home/home";//商品首页
  import Kind from "../page/kind/kind";//分类界面
  import ShopCar from "../page/shopCar/shopCar";//购物车
  import Info from "../page/info/info";//个人主页
  import Order from "../page/order/order";//订单管理界面
  import ShopTheme from "../page/shopTheme/shopTheme";//主题界面
  import ShopInfo from "../page/shopInfo/shopInfo";//商品详情
  import Register from "../page/register/register";//注册界面
  import UpdateInfo from "../page/updateInfo/updateInfo";//个人信息修改
  
  export default class RouteConfig {
    static routes = [
      {
        path: "/",
        redirect: "/Home"
      },
      {
        path: "/Home",
        name: "Home",
        component: Home,
        meta: {
          index: 0
        }
      },
      {
        path: "/Kind",
        name: "Kind",
        component: Kind,
        meta: {
          index: 0
        }
      },
      {
        path: "/ShopCar",
        name: "ShopCar",
        component: ShopCar,
        meta: {
          index: 0
        }
      },
      {
        path: "/Info",
        name: "Info",
        component: Info,
        meta: {
          index: 0
        }
      },
      {
        path: "/ShopTheme",
        name: "ShopTheme",
        component: ShopTheme,
        meta: {
          index: 1
        }
      },
      {
        path: "/ShopInfo",
        name: "ShopInfo",
        component: ShopInfo,
        meta: {
          index: 2
        }
      },
      {
        path: "/Register",
        name: "Register",
        component: Register,
        meta: {
          index: 1
        }
      },
      {
        path: "/UpdateInfo",
        name: "UpdateInfo",
        component: UpdateInfo,
        meta: {
          index: 1
        }
      },
      {
        path: "/Order",
        name: "Order",
        component: Order,
        meta: {
          index: 1
        }
      }
    ];
  }
  

  在router文件夹的index下引用该配置

  import Vue from 'vue'
  import Router from 'vue-router'
  import routeConfig from "../config/routeConfig"
  const {
    routes
  } = routeConfig
  Vue.use(Router)
  export default new Router({
    routes
  })
  

   

      配置全局watch监听路由跳转，在App.vue中新增watch函数监听路由

watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        this.transitionName = "slide-left";//下一层，进入子页面
      } else if (to.meta.index < from.meta.index) {
        this.transitionName = "slide-right";//上一层，返回
      } else {
        this.transitionName = "fade";//同级
      }
    }
  }

到此为止，前端商城部分基本配置已完成，下一篇将介绍工具类和其他需要使用的配置，以及storage全局状态实现