准备Vue.js前端之前的初始化逻辑

Question

我们目前正在实现一个运行在webview内部的混合web应用程序，并决定使用基于vue-cli、webpack模板和vuex的体系结构。

容器应用程序为我们提供了几个app (导出到窗口对象)，我们必须在启动时调用这些app来准备前端。此外，在初始化应用程序时，我们必须执行最多两个xhr。

我们的计划是在main.js中运行这个init逻辑。因为我们的API是基于承诺的，所以在解决所有承诺之后，我们将创建Vue实例。这听起来是一个很好的方法，还是你对更好的技术有什么建议？

Answer 1

在你的评论之后，我明白了。但是，您仍然可以将"prevue“和"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>

​