Imite la configuración de enrutamiento, la instalación del complemento, la estructura del proyecto de Xiaomi Mall

• Intercepción unificada sin firmar

  • Primero necesita instalar axios y vue-axios

  • Después de la instalación, debe introducirse en main.js

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

  • Realice ajustes de acuerdo con el método de dominio cruzado de front-end (aquí se usa el proxy)

    axios.defaults.baseURL = '/api'
    

  • Gestionar el tiempo de espera de la solicitud (optimizar la experiencia del usuario)

    axios.defaults.timeout = 8000
    

  • Intercepción de errores de interfaz (esto se acuerda con el backend, el código de estado de éxito es 0, el código de estado no registrado es 10, aquí debe usar el salto window.location.href, porque es una ruta hash, así que agregue #)

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

• Instalación necesaria del complemento

  • Complemento de carga diferida de imágenes

    • npm install vue-lazyload --save-dev
      

  • elemento-ui

    • npm install element-ui --save-dev
      

  • axios

    • npm install axios --save-dev
      

  • vue-axios

    • npm install vue-axios --save-dev
      

  • vue-enrutador

    • npm install vue-router --save-dev
      

  • vuex

    • npm install vuex --save-dev
      

  • Instale el complemento sass

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

  • Instalar el complemento carrusel

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

  • vue-cookie

    • npm install vue-cookie --save-dev
      

  • Encontré un error al instalar node-sass, el código de error es

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

  • La solución es la siguiente

    * Resuelva el problema de la instalación lenta de npm de node-sass: se puede resolver configurando la fuente de espejo de Taobao, primero configure la fuente de espejo de Taobao

    Ejecute el comando:
    npm config set registry https://registry.npm.taobao.org

    * Luego agregue el siguiente contenido en ~ / .npmrc

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

    Nota: El archivo .npmrc se encuentra en:

    win: C: \ Users [nombre de su cuenta] .npmrc
    linux: use vi ~ / .npmrc directamente

• Encapsulación de enrutamiento

  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
  

• Después de guardar, se formateará automáticamente como reglas compatibles con eslint

  • Instalar el complemento vetur y el complemento eslint

  • Abra settings.json en la configuración y luego copie las siguientes reglas en él

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

• El componente de informe de error de solución eslint se ha registrado pero no se ha utilizado (el componente definido no se ha utilizado)

  • Agregue un código en las reglas del archivo .eslintrc.js, de la siguiente manera:

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

  • O busque las reglas en eslintConfig en package.json y agregue el siguiente código

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

  • La configuración está completa y el servicio debe reiniciarse. La prioridad de .eslintrc.js es mayor que la de package.json