启动文件

Quasar应用程序的一个常见用例是在实例化根Vue应用程序实例之前运行代码,例如注入和初始化您自己的依赖项(例如:Vue组件、库…)或者只是配置一些启动代码应用程序。

由于您无法访问任何/main.js文件(因此Quasar CLI可以无缝初始化并为SPA/PWA/SSR/Cordova/Electron构建相同的代码库)Quasar提供了该问题的优雅解决方案——允许用户定义所谓的启动文件。

在早期的Quasar版本中,要在实例化根Vue实例之前运行代码,可以更改/src/main.js文件并添加需要执行的任何代码。

这种方法存在一个主要问题。 随着项目的不断发展,你的main.js文件非常容易混乱,难以维护,这与Quasars鼓励开发人员编写可维护且优雅的跨平台应用程序的理念相违背。

使用启动文件,可以将您的每个依赖项分解为自包含的、易于维护的文件。 可以轻易禁用任何启动文件,甚至可以通过quasar.conf.js配置来确定哪些启动文件可以进入构建。

解剖一个启动文件

启动文件是一个简单的可以选择导出函数的JavaScript文件。 当启动应用程序时,Quasar将调用导出的函数,并将具有以下属性的一个对象传递给该函数:

属性名称说明
app根组件通过Vue实例化的对象
router来自’src/router/index.js’的Vue路由器实例
store应用Vuex存储的实例 - 只有当您的项目使用Vuex(您有src/store)时才会传递store
Vueimport Vue from 'vue'一样,它在那里是为了方便
ssrContext如果为SSR构建,则仅在服务器端可用
urlPath(@quasar/app 1.0.7+) URL的路径名(路径+搜索)部分;在客户端(仅在客户端),它也包含哈希值。
publicPath(@quasar/app 2+) 配置的公共路径。
redirect(@quasar/app 1.0.7+) 重定向到另一个URL的调用函数。接受字符串(URL路径)或Vue路由器位置对象。
export default ({ app, router, store, Vue }) => {
  // something to do
}

从v1.0开始,启动文件也可以是异步的:

export default async ({ app, router, store, Vue }) => {
  // something to do
  await something()
}

从v1.9开始,您可以使用boot帮助程序包装返回的函数,以获得更好的IDE自动完成体验(通过Typescript):

import { boot } from 'quasar/wrappers'

export default boot(async ({ app, router, store, Vue }) => {
  // something to do
  await something()
})

注意我们正在使用ES6解构赋值。只分配你实际需要/使用的东西。

WARNING

永远不要在你的启动文件中调用new Vue(App),因为这会完全破坏你的网站/应用程序。 您不需要它,因为Quasar CLI负责使用Vue实例化您的应用程序。

您可能会问自己为什么需要导出函数。 这实际上是可选的,但在您决定删除默认导出之前,您需要了解何时需要它:

// Outside of default export:
//  - Code here gets executed immediately,
//  - Good place for import statements,
//  - No access to router, Vuex store, ...

export default async ({ app, router, store, Vue }) => {
  // Code here has access to the Object param above, connecting
  // with other parts of your app;

  // Code here can be async (use async/await or directly return a Promise);

  // Code here gets executed by Quasar CLI at the correct time in app's lifecycle:
  //  - we have a Router instantiated,
  //  - we have the optional Vuex store instantiated,
  //  - we have the root app's component ["app" prop in Object param] Object with
  //      which Quasar will instantiate the Vue app
  //      ("new Vue(app)" -- do NOT call this by yourself),
  //  - ...
}

何时使用启动文件

WARNING

请确保您了解应用插件解决什么问题,以及何时适合使用它们,以避免在不需要它们的情况下应用它们。

启动文件实现了一个特殊的目的:它们在应用程序的Vue根组件被实例化之前运行代码,同时允许您访问某些变量,如果需要初始化库、干预Vue路由器、注入Vue原型或注入Vue应用程序的根实例。

适当使用启动文件的示例

  • 你的Vue插件有安装说明,就像需要调用Vue.use()一样。
  • 你的Vue插件需要实例化添加到根实例的数据 - 一个例子是vue-i18n
  • 您想使用Vue.mixin()添加全局mixin。
  • 您想添加一些东西到Vue原型以方便访问 - 一个例子是在Vue文件中方便地使用this.$axios而不是在每个这样的文件中导入Axios。
  • 你想干涉路由器 - 一个例子是使用router.beforeEach进行认证
  • 你想干涉Vuex存储实例 - 一个例子是使用vuex-router-sync软件包
  • 配置库的方面 - 一个例子是创建一个带有基本URL的Axios实例;你可以将它注入到Vue原型中和/或导出它(这样你就可以从应用程序中的任何其他地方导入实例)

不需要使用启动文件的示例

  • 对于像Lodash这样的普通JavaScript库,在使用之前不需要任何初始化。例如,Lodash可能只有在你想注入Vue原型时(例如可以在你的Vue文件中使用this.$_)用作启动文件才有意义。

使用启动文件

第一步总是使用Quasar CLI生成一个新的启动文件:

$ quasar new boot <name>

其中<name>应该替换为您的启动文件的合适名称。

这个命令创建一个新文件:/src/boot/<name>.js包含以下内容:

// import something here

// "async" is optional
// remove it if you don't need it
export default async ({ /* app, router, store, Vue */ }) => {
  // something to do
}

You can also return a Promise:

// import something here

export default ({ /* app, router, store, Vue */ }) => {
  return new Promise((resolve, reject) => {
    // do something
  })
}

TIP

如果不需要默认导出,可以将其从启动文件中删除。 在这些情况下,您不需要访问“app”,“router”,“store”等。

您现在可以将内容添加到该文件,具体取决于您的启动文件的预期用途。

不要忘记,您的默认导出需要是一个功能。 但是,如果启动文件公开某些内容以供日后使用,则你可以根据需要拥有任意数量的命名导出。 在这种情况下,您可以在应用程序的任何位置导入任何这些命名导出。

最后一步是告诉Quasar使用你的新启动文件。 为了做到这一点,你需要在/quasar.conf.js中添加启动文件

boot: [
  // references /src/boot/<name>.js
  '<name>'
]

构建SSR应用程序时,您可能希望某些启动文件仅在服务器上运行或仅在客户端上运行,在这种情况下,您可以执行以下操作:

boot: [
  {
    server: false, // run on client-side only!
    path: '<name>' // references /src/boot/<name>.js
  },
  {
    client: false, // run on server-side only!
    path: '<name>' // references /src/boot/<name>.js
  }
]

如果要从node_modules指定启动文件,可以通过在路径前加上~(波浪号)字符来实现:

boot: [
  // boot file from an npm package
  '~my-npm-package/some/file'
]

如果您希望仅针对特定的构建类型将启动文件注入您的应用程序:

boot: [
  ctx.mode.electron ? 'some-file' : ''
]

重定向到另一个页面

export default ({ urlPath, redirect }) => {
  // ...
  const isAuthorized = // ...
  if (!isAuthorized && !urlPath.startsWith('/login')) {
    redirect({ path: '/login' })
    return
  }
  // ...
}

如前几节所述,引导文件的默认导出可以返回Promise。 如果此Promise被包含“url”属性的对象拒绝,则Quasar CLI会将用户重定向到该URL:

export default ({ urlPath }) => {
  return new Promise((resolve, reject) => {
    // ...
    const isAuthorized = // ...
    if (!isAuthorized && !urlPath.startsWith('/login')) {
      reject({ url: '/login' })
      return
    }
    // ...
  })
}

或更简单的等效代码:

export default () => {
  // ...
  const isAuthorized = // ...
    if (!isAuthorized && !urlPath.startsWith('/login')) {
    return Promise.reject({ url: '/login' })
  }
  // ...
}

Quasar应用程序流程

为了更好地理解启动文件的功能和用途,您需要了解您的网站/应用程序是如何启动的:

  1. Quasar已初始化(组件、指令、插件、Quasar i18n、Quasar图标集)
  2. Quasar Extras被导入(Roboto字体 - 如果使用,图标,动画…)
  3. Quasar CSS和您的应用程序的全局CSS已导入
  4. App.vue被加载(尚未被使用)
  5. Store被导入(如果在src/store中使用Vuex存储)
  6. Router已导入(在src/router中)
  7. 启动文件已导入
  8. Router默认导出功能已执行
  9. 启动文件会执行其默认导出功能
  10. (如果在Electron模式下)Electron 被导入并注入Vue原型
  11. (如果在Cordova模式下)收听“deviceready”事件,然后继续执行以下步骤
  12. 使用根组件实例化Vue并附加到DOM

启动文件的例子

Axios

import Vue from 'vue'
import axios from 'axios'

// we add it to Vue prototype
// so we can reference it in Vue files
// without the need to import axios
Vue.prototype.$axios = axios

// Example: this.$axios will reference Axios now so you don't need stuff like vue-axios

vue-i18n

import Vue from 'vue'
// 导入外部包
import VueI18n from 'vue-i18n'

// 包含语言包的/src/i18n中一个文件
import messages from 'src/i18n'


// 告诉Vue使用我们的Vue包:
Vue.use(VueI18n)
export default ({ app, Vue }) => {
  // 在应用中设置i18n实例;
  // 我们通过这样做将它注入到根组件;
  // new Vue({..., i18n: ... }).$mount(...)

  app.i18n = new VueI18n({
    locale: 'en',
    fallbackLocale: 'en',
    messages
  })
}

路由验证

一些插件可能需要干涉Vue路由器配置:

export default ({ router, store, Vue }) => {
  router.beforeEach((to, from, next) => {
    //现在您需要在这里添加验证逻辑,比如调用一个API
  })
}

从启动文件访问数据

有时,您想访问您在启动文件中配置的数据,这些数据在您无权访问根Vue实例的文件中。

幸运的是,因为启动文件只是普通的JavaScript文件,所以您可以根据需要将任意数量的导出添加到您的启动文件。

以Axios为例。 有时候你想要在你的JavaScript文件中访问你的Axios实例,但是你不能访问根Vue实例。 为了解决这个问题,你可以在你的启动文件中导出Axios实例并将其导入到别处。

考虑下面的axios启动文件:

// axios启动文件(src/boot/axios.js)

import Vue from 'vue'
import axios from 'axios'

// 我们创建我们自己的axios实例并设置一个自定义的基本URL。
// 请注意,如果我们不在这里设置任何配置,我们不需要
// 一个命名的导出,因为我们可以`import axios from 'axios'`
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com'
})

// 在Vue文件中通过this.$axios来使用
Vue.prototype.$axios = axiosInstance

// 这里我们定义一个命名的导出,
// 然后我们后面可以使用这个内部的.js文件:
export { axiosInstance }

在任何JavaScript文件中,您都可以像这样导入axios实例:

// 我们从src/boot/axios.js中导入一个命名的导出
import { axiosInstance } from 'boot/axios'

进一步阅读语法:ES6导入ES6导出