vue.js - inertiaJS如何与quasar框架集成？

Question

我想将 intertiaJS 集成到我的 Quasar 应用程序中，以便我可以与我的 Laravel 后端进行通信。我现在的问题是一般的东西由 Quasar CLI 接管，这在原则上是好的，但在这种情况下它带走了我的入口点，如 https://inertiajs.com/client-side-setup 中所述。 :

import { createApp, h } from 'vue'
import { App, plugin } from '@inertiajs/inertia-vue3'

const el = document.getElementById('app')

createApp({
  render: () => h(App, {
    initialPage: JSON.parse(el.dataset.page),
    resolveComponent: name => require(`./Pages/${name}`).default,
  })
}).use(plugin).mount(el)

我的想法是我可以使用类似 Quasar ( https://quasar.dev/quasar-cli/boot-files ) 中提供的引导文件，但我不得不承认我没有正确的方法。当我查看自动生成的 app.js 时，我发现渲染中没有发生任何特殊情况:

/**
 * THIS FILE IS GENERATED AUTOMATICALLY.
 * DO NOT EDIT.
 *
 * You are probably looking on adding startup/initialization code.
 * Use "quasar new boot <name>" and add it there.
 * One boot file per concern. Then reference the file(s) in quasar.conf.js > boot:
 * boot: ['file', ...] // do not add ".js" extension to it.
 *
 * Boot files are your "main.js"
 **/
import Vue from 'vue'
import './import-quasar.js'

import App from 'app/src/App.vue'

import createStore from 'app/src/store/index'

import createRouter from 'app/src/router/index'

export default async function () {
  // create store and router instances
  
  const store = typeof createStore === 'function'
    ? await createStore({Vue})
    : createStore
  
  const router = typeof createRouter === 'function'
    ? await createRouter({Vue, store})
    : createRouter
  
  // make router instance available in store
  store.$router = router
  

  // Create the app instantiation Object.
  // Here we inject the router, store to all child components,
  // making them available everywhere as `this.$router` and `this.$store`.
  const app = {
    router,
    store,
    render: h => h(App)
  }

  app.el = '#q-app'
  
  // expose the app, the router and the store.
  // note we are not mounting the app here, since bootstrapping will be
  // different depending on whether we are in a browser or on the server.
  return {
    app,
    store,
    router
  }
}

即原则上我应该能够链接而不会引起任何冲突情况。问题是，那看起来如何？

之后我必须链接到渲染中并按照代码示例中的描述覆盖它。我想继续使用 Quasar Cli，因为它非常有用，这里描述的情况是唯一的异常(exception)。

第7页

Answer 1

引导文件是注入(inject)和初始化您自己的依赖项或为您的应用程序配置一些启动代码的正确位置。

我还没有机会使用你提到的库，但我详细介绍了你如何实现

创建启动文件

import { plugin } from '@inertiajs/inertia-vue';
    
export default async({ app, Vue }) => {
  Vue.use(plugin);
}

直到你有 50%。另一方面，您不能对主实例进行混入，但可以为每个页面进行混入，但是我建议您制作一个组件部分，向其中添加所需的数据并混入所需的库

<template>
  <div />
</template>
    
<script>
import { App } from '@inertiajs/inertia-vue';

export default {
  mixins: [App],
  props: ['initialPage', 'resolveComponent'],
}
</script>

为此，请根据您使用的库的工作方式进行修改。