Imitate the routing configuration, plug-in installation, project structure of Xiaomi Mall

• Unsigned unified interception

  • First need to install axios and vue-axios

  • After installation, it needs to be introduced in main.js

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

  • Adjust according to the cross-domain approach of the front end (proxy is used here)

    axios.defaults.baseURL = '/api'
    

  • Deal with request timeout (optimize user experience)

    axios.defaults.timeout = 8000
    

  • Interface error interception (this is agreed with the backend, the success status code is 0, the unlogged status code is 10, here must use window.location.href jump, because it is a hash route, so add #)

    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);
      }
    });
    

• Necessary plugin installation

  • Image lazy loading plugin

    • 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
      

  • Install the sass plugin

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

  • Install carousel plugin

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

  • vue-cookie

    • npm install vue-cookie --save-dev
      

  • I encountered an error when installing node-sass, the error code is

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

  • The solution is as follows

    * Solve the problem of slow npm installation of node-sass: It can be solved by configuring Taobao's mirror source, first configure Taobao's mirror source

    Execute the command:
    npm config set registry https://registry.npm.taobao.org

    * Then add the following content in ~/.npmrc

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

    Note: The .npmrc file is located at:

    win: C:\Users[your account name].npmrc
    linux: use vi ~/.npmrc directly

• Routing encapsulation

  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
  

• After saving, it will be automatically formatted as rules supported by eslint

  • Install vetur plugin and eslint plugin

  • Open settings.json in the settings, and then copy the following rules into it

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

• Solve eslint error report component has been registered but not used (component defined not used)

  • Add a code in the rules of the .eslintrc.js file, as follows:

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

  • Or find the rules under eslintConfig in package.json and add the following code

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

  • The configuration is complete and the service needs to be restarted. The priority of .eslintrc.js is higher than that of package.json