如何在 Vue 应用程序中实现 Angular 样式配置和运行阶段？答案

【问题标题】：How to implement Angular style config and run phases in a Vue application?如何在 Vue 应用程序中实现 Angular 样式配置和运行阶段？
【发布时间】：2017-05-17 22:18:07
【问题描述】：

从 Angular 转向 Vue 我无法弄清楚如何在应用程序启动时配置组件和“服务”（例如 JS 单例类）。

Angular 能够在整个应用程序中指定 .config() 块，这些块都可以运行，并允许您在执行的第一阶段配置任何“提供者”。然后，它允许您在同一模块上指定 .run() 块，这些块随后都会在它们出现在代码中的任何位置运行。

所以，我理解 VueJS 不是一个完整的框架，而是一个视图层，所以我想这更像是一个关于如何在纯 JS 中实现这种模式的问题？

【问题讨论】：

你想做什么样的配置？
你的意思是生命周期钩子吗？ vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks
是的，有点，但更多的是应用程序的生命周期。例如，假设您正在导入其他人的模态窗口组件，并且您想在页面上编译该组件的所有实例之前进行配置，即使您的代码是在他们之后声明的。在 Angular 中，您可以使用“提供者”，它的方法只能从配置块中调用，并且都在配置阶段运行，该阶段发生在您的 html 编译成工作应用程序之前。
没有像 Angular 那样的配置阶段。但是，在实例化 Vue 之前，您可以使用所有组件。与（如在 Angular 中）有一些官方支持的配置过程不同，Vue 通常只依赖于普通的 javascript。在实例化 Vue 之前，你可以配置你的组件、插件、mixins，或者以任何你喜欢的方式修改它们。
谢谢伯特。我想我的大脑太习惯于在 Angular 中思考，我只是错过了在完成其他所有操作之前不必实例化 Vue。因此，我可以将我的“提供者”或“服务”创建为普通的 JS 单例，以任何我想要的方式配置它们，然后在我的组件中使用它们，这些组件在 Vue 实例化后编译。如果您将其转换为一个，很高兴将其标记为正确答案。

标签： javascript angularjs ecmascript-6 vue.js

【解决方案1】：

在 Vue 中没有类似于 Angular 的官方配置过程。本质上，您在 Vue 中所做的只是在实际实例化 Vue 之前创建和配置任何服务、插件、mixin 或您的主脚本中的内容。

一个很好的例子可能是官方的 VueRouter。 Vue 的典型入口脚本会导入路由器组件、配置路由、实例化路由器，然后然后实例化根 Vue（下面的代码直接来自 documentation）。

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes // short for routes: routes
})

const app = new Vue({
  router
}).$mount('#app')

【讨论】：