Vueのプロジェクトの簡単なデモンストレーションaxiosデカップリング

-api \ sug.js（設定の取得方法）

-utils \ request.js（axiosカスタム構成例）

-vue.config.js（クロスドメインを解決）

-demo.vue（導入と\ sug.js__function getSug（リクエストメソッドのAPIを呼び出します））

ステップ1：

module.exportsは= {
    outputDirの： 'DIST'、    // 出力ディレクトリビルドし 
    assetsDirを'資産'、// 静的リソースディレクトリ（JS、CSS、IMG） 
    lintOnSave：trueに、// eslint開くかどうかを
    devserverました：{
        オープン：偽、// 自動的にブラウザのページをポップアップするかどうか 
        ホスト：「ローカルホスト」を、
        ポート： '8080' 、
        HTTPS：falseに、    // かhttpsプロトコル 
        hotOnly：falseに、// ホットアップデート開くかどうかを
        {：プロキシ
             '/ API' ：{
                ターゲット： 'https://suggest.taobao.com'、// APIサーバのアドレス 
                changeOrigin：trueに、
                Pthriawrite：{
                    '^ / API'： ''
                }
            }
        }
    }
}

vue.config.js　

ステップ2：

「axios」からインポートaxios

CONSTサービス = axios.create（{
    ベースURL： '/'火災、
    タイムアウト： 1000
}）

輸出デフォルトのサービス

utilsの\ request.js

ステップ3

「@ / utilsの/リクエスト」からインポート要求

エクスポート関数getSug（paramsは）{
   リターン要求（{
    URL： "/ SUG" 、
    方法：「取得」、
    params
  }）
}

火災の\ sug.js

ステップ4

<テンプレート>
  <DIV ID = "アプリ">
    <IMG ALT = "Vueのロゴ" SRC = "./資産/ logo.png">
    <のHelloWorld MSG = "あなたのVue.jsアプリケーションへようこそ" />
  </ div>
</テンプレート>

<スクリプト> 
からインポートのHelloWorld「./components/HelloWorld.vue」
からインポート要求「./utils/request.js' 
からインポート{getSug}」./api/sug.js' 
エクスポートデフォルト{
  名前：「アプリ」、
  成分：{
    こんにちは世界
  }、
  {）（マウント
    getSug({
      コード： "UTF-8" 、
      Q： "セーター"
    }）
    .then（RES => {
      console.log（RES）
    }）
    。キャッチ（ERR => {
      console.log（ERR）
    }）
  }
}。
</ SCRIPT>

<スタイル>
#app {
  フォント -family： 'アベニール'はHelvetica、Arialの、sans- セリフ。
  -webkit-font- スムージング：アンチエイリアス。
  -moz-OSX-font- スムージング：グレースケール。
  テキスト - 揃える：センター;
  色：＃2c3e50。
  マージン - トップ：60PX;
}
</スタイル>

App.vue

ビューネットワーク

首尾よく分離axiosおめでとう

Vueのプロジェクトの簡単なデモンストレーションaxiosデカップリング

おすすめ