如何在不使用父 App.vue 的情况下在 Laravel 中实例化 vue 3 应用程序？

Question

我在 Laravel 8.x 应用程序中工作并且安装 vue 2.6.12 的时间最长。我正在努力升级以将 Vue 3 与 laravel 一起使用，并与 Webpack 一起使用。我已经更新了我的 package.json 脚本并为 Vue 3 兼容性安装了以下内容：

{
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "bootstrap": "^4.5.2",
        "jquery": "^3.4",
        "laravel-mix": "^6.0.39",
        "laravel-mix-polyfill": "^2.0.0",
        "vue-loader": "^16.8.3"
    },
    "dependencies": {
        "@vue/compiler-sfc": "^3.2.24",
        "jquery-validation": "^1.17.0",
        "jquery.nicescroll": "^3.7.6",
        "jquery.scrollto": "^2.1.2",
        "mdb-vue-ui-kit": "^1.7.0",
        "sass": "^1.21.0",
        "sass-loader": "^7.1.0",
        "vue": "^3.2.24",
        "vue-moment": "^4.1.0",
        "vue-router": "^4.0.12",
        "vue-template-compiler": "^2.6.14",
    }
}

我从来没有一个主 App.vue 文件，因为它最初是一个 Laravel 应用程序，后来引入了 Vue。相反，我在 /resources/js/app.js 文件中创建了（现在使用 vue 2 和 vue3）初始 vue 对象。这只是关闭了位于我的父 blade.php 文件中的 <div id="app">。但是现在使用 Vue 3 我不确定如何在不手动添加 App.vue 文件的情况下执行此操作。在我的 Laravel 应用程序中配置 vue 3 实例化是必需的吗？

Vue 2 设置（有效）

const router = new VueRouter({
  mode: 'history',
  routes: routes
});

const app = new Vue({
  el: '#app',
  router
});

Vue 3 实例化尝试

import Vue, {createApp } from 'vue';
import router from './router/routes.js';
const app = new Vue({});

createApp(app)
    .use(router)
    .use(require('vue-moment'))
    .use(VueToast)
    .mount('#app')

我在运行 npm run dev

时遇到的主要错误

WARNING in ./resources/js/app.js 50:14-17
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineProps, defineSSRCustomElement, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)

Answer 1

您可以将全局组件注册到您正在创建的应用程序。

import {createApp, defineComponent } from 'vue';
import router from './router/routes.js';
import MyComponent from '@/components/MyComponent.vue'

// Root vue component
const root = defineComponent({/* ... */})

//Create the app
const app = createApp(root)

//Configure the app
app.use(router)
   .use(require('vue-moment'))
   .use(VueToast)

//Attach global components to the app
app.component('my-component', MyComponent)

//Mount the app
app.mount('#app')

如何在不使用父 App.vue 的情况下在 Laravel 中实例化 vue 3 应用程序？

How to instantiate a vue 3 application within Laravel without using a parent App.vue?

laravel

vue.js

vuejs3