Imite a configuração de roteamento, instalação do plug-in, estrutura do projeto do Xiaomi Mall

• Interceptação unificada sem sinal

  • Primeiro preciso instalar axios e vue-axios

  • Após a instalação, ele precisa ser introduzido em main.js

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

  • Faça ajustes de acordo com o método de domínio cruzado de front-end (proxy é usado aqui)

    axios.defaults.baseURL = '/api'
    

  • Lidar com o tempo limite da solicitação (otimizar a experiência do usuário)

    axios.defaults.timeout = 8000
    

  • Interceptação de erro de interface (isso é acordado com o back-end, o código de status de sucesso é 0, o código de status não registrado é 10, aqui deve usar window.location.href jump, porque é uma rota hash, então adicione #)

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

• Instalação de plugin necessária

  • Plugin de carregamento lento de imagem

    • 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-roteador

    • npm install vue-router --save-dev
      

  • vuex

    • npm install vuex --save-dev
      

  • Instale o plugin sass

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

  • Instale o plugin carrossel

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

  • vue-cookie

    • npm install vue-cookie --save-dev
      

  • Encontrei um erro ao instalar o node-sass, o código do erro é

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

  • A solução é a seguinte

    * Resolva o problema da instalação lenta de npm de node-sass: Isso pode ser resolvido configurando a fonte de espelho do Taobao, primeiro configure a fonte de espelho do Taobao

    Execute o comando:
    npm config set registry https://registry.npm.taobao.org

    * Em seguida, adicione o seguinte conteúdo em ~ / .npmrc

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

    Observação: o arquivo .npmrc está localizado em:

    win: C: \ Usuários [nome da sua conta] .npmrc
    linux: use vi ~ / .npmrc diretamente

• Encapsulamento de roteamento

  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
  

• Depois de salvar, ele será formatado automaticamente conforme as regras suportadas pelo eslint

  • Instale o plugin vetur e o plugin eslint

  • Abra settings.json nas configurações e copie as seguintes regras para ele

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

• O componente do relatório de erros do eslint foi registrado, mas não foi usado (componente definido não usado)

  • Adicione um código nas regras do arquivo .eslintrc.js, da seguinte maneira:

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

  • Ou encontre as regras em eslintConfig em package.json e adicione o seguinte código

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

  • A configuração está concluída e o serviço precisa ser reiniciado. A prioridade de .eslintrc.js é maior do que a de package.json