Vue.jsを準備する前の初期化ロジックFrontend

Question

現在、webview内で実行されているハイブリッドWebアプリケーションを実装しており、vue-cli webpackテンプレートとvuexに基づくアーキテクチャを使用することに決めました。

コンテナアプリケーションでは、フロントエンドを準備するために起動時に呼び出す必要があるAPI（ウィンドウオブジェクトにエクスポートされたAPI）がいくつか用意されています。さらに、アプリケーションを初期化している最中に2時間まで実行する必要があります。

このinitロジックをmain.js内で実行することを計画しています。私たちのAPIは約束事に基づいているので、約束がすべて解決された後でVueインスタンスを作成します。これは良いアプローチのように聞こえるか、より良いテクニックの提案がありますか？

Answer 1

コメントの後に私はポイントを得ました。しかし、あなたはまだ単一のモジュールであなたの「トレーラー」と「postvue」の手順を統合することができます。

// External function in module 
 
function initializeApp (vueCreated) { 
 
    return new Promise((resolve, reject) => { 
 
    switch (vueCreated) { 
 
     case false: // "prevue" initialization steps 
 
     console.log('vue not yet created, prevue steps happens') 
 
     // ... 
 
     setTimeout(_ => resolve(), 3500) // async call 
 
     break; 
 
     case true: // we can continue/prepare data for Vue 
 
     console.log('vue created, but waiting for next initialization steps and data') 
 
     // ... 
 
     setTimeout(_ => resolve('Mounted/shown when app ready'), 3500) // async call 
 
     } 
 
    }) 
 
} 
 

 
initializeApp(false).then(_ => { 
 
    new Vue({ 
 
    template: '#app', 
 
    data: { 
 
     content: null 
 
    }, 
 
    async created() { 
 
     this.content = await initializeApp(true) 
 
     this.$mount('#app') 
 
     console.log('all inicialization steps done, data arrived, vue mounted') 
 
    } 
 
    }) 
 
})

.fade-enter { opacity: 0; transform: translateY(30px) } 
 
.fade-enter-active { transition: all .4s }

<template id="app"> 
 
    <transition name="fade" appear> 
 
    <p>{{ content }}</p> 
 
    </transition> 
 
</template> 
 

 
<script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"></script>