一般的なバックグラウンド管理システムのフロントエンドインターフェイス Ⅴ——Axios の使用とパッケージング、構成のルーティングとルーティングの遅延読み込み

Axios の使用とパッケージング

1. axios をダウンロード

npm i -S axios

2. axios を main.js にインポートして使用する使用頻度が高いため、グローバルインポートしてプロトタイプにマウントする方法を採用

import axios from 'axios'
Vue.prototype.axios = axios // 挂载到原型,可在全局使用

ルーティングを構成する

1. vue-router をダウンロード

npm および [email protected] -S

2. ルーティングを構成する (新しいルーターフォルダーと index.js ファイル)

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home.vue'
Vue.use(Router)
export default new Router({
    routes: [
        {
            path: '/',
            component: Home
        }
    ],
    mode: 'history'
})

3. 取り付けて使用する

import Vue from 'vue'
import App from './App.vue'
import '../plugins/element'
import 'font-awesome/css/font-awesome.min.css'
import axios from 'axios'
import router from './router/index'
//或者这样导入：会自动找到index文件
//import router from './router'
Vue.config.productionTip = false
Vue.prototype.axios = axios

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

4.使用：App.vueでルーティング出口を設定します

<router-view></router-view>

この方法でコンテンツにアクセスできます: ps 以前のアクセスは常にhttp://localhost:8080でした

遅延読み込みのルーティング

通常、ルートにはさまざまなページを定義します。遅延読み込みを適用しないと、多くのページが同じ js ファイルにパッケージ化され、ファイルが非常に大きくなります。その結果、ホームページに入るとき、あまりにも多くのコンテンツをロードする必要があり、時間がかかりすぎます. ブラウザに短い空白のページが表示され、ユーザーエクスペリエンスが低下する可能性があります.各モジュールを個別に読み込み時間を短縮するには、対応するモジュールを読み込みます。

つまり、現在クリックしているモジュールのみをロードします。最初の画面の読み込み速度を上げるために、必要に応じてルートに対応するリソースを読み込みます(ヒント: ホームページは遅延読み込みする必要はなく、ページが読み込まれると、再度アクセスされたときに再度読み込まれることはありません) )

実装原理: ルーティング関連のコンポーネントは直接インポートされなくなり、非同期コンポーネントとして書き換えられます. 関数が呼び出された場合にのみ、対応するコンポーネントのコンテンツが読み込まれます.

実装 1: router フォルダーの下にある index.js ファイルを次のように変更します。

公式に推奨される方法は、ES で import を使用することです: component: () => import('@/component/Home')

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    routes: [
        {
            path: '/home',
            component: () => import('@/components/Home')
        }
    ],
    mode: 'history'
})

前後の比較: 最初にインポートしてからマウントすることはできません。

実装 2: Vue 非同期コンポーネントを使用して、router フォルダーの下の index.js ファイルを次の
コンポーネントに変更します: resolve => require(['@/components/Home'], resolve)

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    routes: [
        {
            path: '/home',
            component: resolve => require(['@/components/Home'], resolve)
        }
    ],
    mode: 'history'
})