Xiaomiモールのルーティング構成、プラグインのインストール、プロジェクト構造を模倣します

• 符号なしの統一された傍受

  • 最初にaxiosとvue-axiosをインストールする必要があります

  • インストール後、main.jsに導入する必要があります

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

  • フロントエンドクロスドメイン方式に従って調整を行います（ここではプロキシが使用されます）

    axios.defaults.baseURL = '/api'
    

  • リクエストのタイムアウトに対処する（ユーザーエクスペリエンスを最適化する）

    axios.defaults.timeout = 8000
    

  • インターフェイスエラーのインターセプト（これはバックエンドで合意されています。成功ステータスコードは0、ログに記録されていないステータスコードは10です。ハッシュルートであるため、ここではwindow.location.hrefジャンプを使用する必要があります。＃を追加してください）

    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"。
    

  • 解決策は次のとおりです

    * node-sassのnpmインストールが遅いという問題を解決します：Taobaoのミラーソースを構成することで解決できます。最初にTaobaoのミラーソースを構成します

    次のコマンドを実行し
    ます：npm config set Registry https://registry.npm.taobao.org

    *次に、〜/ .npmrcに次のコンテンツを追加します

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

    注：.npmrcファイルは次の場所にあります。

    win：C：\ Users [アカウント名] .npmrclinux
    ：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エラーレポートコンポーネントは登録されていますが、使用されていません（コンポーネント定義は使用されていません）

  • 次のように、.eslintrc.jsファイルのルールにコードを追加します。

  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でルールを見つけて、次のコードを追加します

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

  • 構成が完了し、サービスを再起動する必要があります。.eslintrc.jsの優先度はpackage.jsonの優先度よりも高くなっています。