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

Posted 2023-02-23

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

【英文标题】：How to instantiate a vue 3 application within Laravel without using a parent App.vue?

【发布时间】：2022-01-14 13:25:40

【问题描述】：

我正在使用 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, creates-s-rApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineProps, defines-s-rCustomElement, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hydrate, initCustomFormatter, initDirectivesFors-s-r, 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, s-s-rContextKey, s-s-rUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, uses-s-rContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)

【问题讨论】：

***.com/a/63968220/8172857

你不应该“从'vue'导入Vue，createApp;”。导入 'Vue' 是个问题，不允许使用 'new Vue'。所以强烈推荐像 App.vue 这样的单一起点

@BoussadjraBrahim @FerryKranenburg 所以基本上是的，我需要一个 App.vue。目前我在app.js 文件中注册全局vue 组件，就像Vue.component('user-header', require('./components/userHeader').default); 这样如果我创建一个App.vue 文件，我将如何注册全局组件以在我的应用程序的任何地方使用？

【参考方案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')

【讨论】：

谢谢@Donkarnash