vue.js - 如何将惯性JS与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，因为它非常有用，这里描述的情况是唯一的例外。

p7

标签： vue.jsquasar-frameworkquasarinertiajs

Answer 1

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

我没有机会使用您提到的库，但我详细说明了如何实现

创建你的启动文件

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>

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