我在 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 物件。這只是關閉了<div id="app">位于我的父blade.php 檔案中的一個。但是現在使用 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, one rrorCaptured, 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)
uj5u.com熱心網友回復：
您可以將全域組件注冊到您正在創建的應用程式。
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')
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/378490.html