应用程序插件

Quasar应用程序的常见用例是在实例化根Vue实例之前运行代码。
Quasar通过允许用户定义所谓的应用程序插件提供了一个优雅的解决方案。

重要
不要将应用程序插件与Quasar插件相混淆，如ActionSheet，Dialog，Notify。 Quasar插件完全是其他内容，将在Components部分中进行介绍。

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

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

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

解剖一个应用程序插件

一个应用程序插件是一个简单的JavaScript文件，需要导出一个函数。 当启动应用程序时，Quasar将调用导出的函数，并将具有以下属性的一个对象传递给该函数：

属性名称 说明
app 根组件通过Vue实例化的对象
router 来自’src/router/index.js’的Vue路由器实例
store ‘src/store/index.js’中的Vuex实例 - 只有当您的项目使用Vuex（您有src/store）时才会传递store
Vue 和import Vue from 'vue'一样，它在那里是为了方便 
export default ({ app, router, store, Vue }) => {
  // something to do
}

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

何时使用应用插件

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

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

适当使用应用程序插件的示例

不需要使用应用程序插件的示例

使用应用程序插件

第一步总是使用Quasar CLI生成一个新的插件：

$ quasar new plugin <name>

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

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

// import something here

// leave the export, even if you don't use it
export default ({ app, router, store, Vue }) => {
  // something to do
}

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

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

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

plugins: [
  '<name>' // 指向/src/plugins/<name>.js
]

Quasar应用程序流程

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

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

应用插件的例子

Axios

import axios from 'axios'

export default ({ Vue }) => {
  // 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 VueI18n from 'vue-i18n'

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

export default ({ app, Vue }) => {
  // 告诉Vue使用我们的Vue包:
  Vue.use(VueI18n)

  // 在应用中设置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/plugins/axios.js)

import axios from 'axios'

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

export default ({ Vue }) => {
  // 在Vue文件中通过this.$axios来使用
  Vue.prototype.$axios = axiosInstance
}

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

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

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

进一步阅读语法：ES6导入，ES6导出。

特殊应用插件：Boot

插件加载并执行后，每个Quasar网站/应用程序都会启动。 最后一步是调用new Vue()并将其附加到DOM。

如果由于某种原因需要控制最后一步并决定Vue开始运行的具体时刻，则可以创建一个名为“boot”的特殊Quasar插件（需要Quasar v0.15.6 + ）。

请记住只使用这个插件来最终调用new Vue(app)。 不要使用它来初始化任何你可能拥有的库 - 为此，请使用常规应用程序插件。

# 我们创建boot插件
$ quasar new plugin boot
 app:new Generated plugin: src/plugins/boot.js +0ms
 app:new Make sure to reference it in quasar.conf.js > plugins +2ms

然后，我们将此插件添加到/quasar.conf.js中的应用程序插件列表中：

module.export = function (ctx) {
  return {
    plugins: [
      'boot'
    ],
    ...
  }
}

重要
您的插件的名称“boot”对Quasar CLI有意义。 它在所有其他应用程序初始化执行完毕后运行这个插件，并且在用new Vue()开始Vue之前。 通过添加这个插件，你有责任自己开启Vue，我们将在下面看到。

我们编辑我们的新插件 (/src/plugins/boot.js):

export default ({ app, Vue }) => {
  // 在这里写一些逻辑...

  // ...然后，启动我们的Quasar网站/应用程序：

  /* eslint-disable-next-line no-new */
  new Vue(app)
  
  // “应用程序”具有Quasar CLI熟悉的所有功能，
  // 在这一点上你不需要注入任何东西
}

重要
不要忘记至少要有一个调用new Vue（app)决策分支，否则你的应用将无法启动，你只会看到一个空白页！

资源处理 API代理