vue.js 如何将inertiaJS与quasar框架集成?

8i9zcol2  于 2023-04-12  发布在  Vue.js
关注(0)|答案(1)|浏览(178)

我想将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)中提供的 Boot 文件,但我必须承认我没有正确的方法。当我查看自动生成的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
  }
}

即原则上我应该能够链接而不会引起任何冲突情况。问题是,这看起来如何?
我必须链接到渲染后,并覆盖它所描述的代码示例。我想留在类星体Cli,因为它是非常有用的,这里描述的情况是唯一的例外。
p7

yhxst69z

yhxst69z1#

Boot 文件是注入和初始化您自己的依赖项或只是为您的应用程序配置一些启动代码的正确位置。
我还没有机会使用您提到的库,但我详细介绍了如何实现
创建你的 Boot 文件

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

另一方面,你不能对主示例进行mixin,但是你可以对每个页面进行mixin,但是我建议你制作一个组件部分,在其中添加你需要的数据,并对你需要的库进行mixin

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

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

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

相关问题