仿小米商城的路由配置，插件安装，项目结构

• 未登录统一拦截

  • 首先需要安装axios和vue-axios

  • 安装好了之后需要在main.js中引入

    import axios from 'axios'
    import VueAxios from 'vue-axios'
    Vue.use(VueAxios, axios)
    

  • 根据前端的跨域方式做调整（此处使用的是proxy做代理）

    axios.defaults.baseURL = '/api'
    

  • 对请求超时做处理（优化用户体验）

    axios.defaults.timeout = 8000
    

  • 接口错误拦截（此处和后端约定好，成功状态码为0，未登录状态码为10，此处必须使用window.location.href跳转，由于是hash路由，所以加上#）

    axios.interceptors.response.use(function(response) {
      let res = response.data;
      if (res.status == 0) {
        return res.data;
      } else if (res.status == 10) {
        window.location.href = "/#/login";
      } else {
        alert(res.msg);
      }
    });
    

• 必要插件安装

  • 图片懒加载插件

    • npm install vue-lazyload --save-dev
      

  • element-ui

    • npm install element-ui --save-dev
      

  • axios

    • npm install axios --save-dev
      

  • vue-axios

    • npm install vue-axios --save-dev
      

  • vue-router

    • npm install vue-router --save-dev
      

  • vuex

    • npm install vuex --save-dev
      

  • 安装sass插件

    • npm install node-sass sass-loader --save-dev
      

  • 安装轮播插件

    • npm install vue-awesome-swiper --save-dev
      

  • vue-cookie

    • npm install vue-cookie --save-dev
      

  • 在安装node-sass的时候遇到了报错，错误代码为

    MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 "4.0"。
    

  • 解决办法如下

    * 解决 npm 安装 node-sass 速度慢的问题: 可通过配置淘宝的镜像源解决，首先配置淘宝的镜像源

    执行命令：
    npm config set registry https://registry.npm.taobao.org

    * 然后在 ~/.npmrc 加入下面内容

    sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

    注：.npmrc 文件位于：

    win：C:\Users[你的账户名称].npmrc
    linux：直接使用 vi ~/.npmrc

• 路由封装

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Home from '../views/home.vue'
  import Product from '../views/product.vue'
  import Detail from '../views/detail.vue'
  import Cart from '../views/cart.vue'
  import Order from '../views/order.vue'
  import OrderConfirm from '../views/orderConfirm'
  import OrderList from '../views/orderList'
  import OrderPay from '../views/orderPay'
  import Index from '../views/index.vue'
  import Login from '../views/login.vue'
  import Alipay from '../views/alipay.vue'
  
  Vue.use(VueRouter)
  
  const routes = [
    {
      path: '/',
      name: 'home',
      component: Home,
      // 重定向到index页面
      redirect: '/index',
      // 这里是Home页面的子页面使用children来引入
      children: [{
        path: 'detail/:id',
        name: 'detail',
        component: Detail
      }, {
        path: 'product/:id',
        name: 'product',
        component: Product
      }, {
        path: 'index',
        name: 'index',
        component: Index
      }]
    }, {
      path: '/login',
      name: 'login',
      component: Login
    }, {
      path: '/cart',
      name: 'cart',
      component: Cart
    }, {
      path: '/order',
      name: 'order',
      component: Order,
      children: [{
        path: 'confirm',
        name: 'order-confirm',
        component: OrderConfirm
      }, {
        path: 'list',
        name: 'order-list',
        component: OrderList
      }, {
        path: 'pay',
        name: 'order-pay',
        component: OrderPay
      }, {
        path: 'alipay',
        name: 'alipay',
        component: Alipay
      }]
    }
  ]
  
  const router = new VueRouter({
    routes
  })
  
  export default router
  

• 保存后自动格式化为eslint支持的规则

  • 安装vetur插件和eslint插件

  • 在设置中打开settings.json，然后复制如下规则进去

    "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
        }
    

• 解决eslint报错component has been registered but not used(组件定义了未使用)

  • 在.eslintrc.js文件的rules内增加一条代码，如下：

  rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'vue/no-unused-components': 'off'
    }
  

  • 或者在package.json中找到eslintConfig下的rules，新增如下代码

  "eslintConfig": {
      "rules": {
          "vue/no-unused-components": "off"
      }
  }
  

  • 配置完成需要重启服务，.eslintrc.js优先级高于package.json