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