VueJS 3+ Laravel :未定义的TypeError:无法读取未定义的属性“组件”
VueJS 3+ Laravel :未定义的TypeError:无法读取未定义的属性“组件”
提问于 2021-01-14 22:17:10
大家好，我在我的Laravel项目开始Vue时遇到了一些小问题。
这是我的package.json
"devDependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-brands-svg-icons": "^5.15.1",
"@fortawesome/free-regular-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@vue/compiler-sfc": "^3.0.5",
"axios": "^0.21",
"bootstrap": "^4.0.0",
"jquery": "^3.2",
"laravel-mix": "^6.0.0-beta.17",
"laravel-mix-vue3": "^0.7.0",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"postcss": "^8.1.14",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^3.0.5",
"vue-loader": "^16.1.2",
"vue-template-compiler": "^2.6.10"
}Webpack组合：
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');这是我的app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
require('./fontawesome');
window.Vue = require('vue').default;
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('user-info', require('./components/UserInfo.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});我有组件UserInfo，它包含在我的blade.php中，我得到了未定义的TypeError:无法读取属性“组件”
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-14 22:36:54
在Vue 3中更改了全局，您必须使用createApp函数来创建应用实例：
import { createApp } from 'vue';
require('./bootstrap');
require('./fontawesome');
let app=createApp({})
app.component('user-info', require('./components/UserInfo.vue').default);
app.mount("#app")有关使用vue 3和laravel设置完整应用程序的更多信息，请查看此。
Stack Overflow用户
发布于 2022-06-21 17:57:02
试试这段代码也许会有帮助。
require('./bootstrap');
import {createApp} from 'vue';
import VueRouter from 'vue-router';
import {routes} from './routes.js';
const router = new VueRouter({
routes,
mode:'history'
})
createApp().use(router).mount('#app')页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65727706
复制相关文章
相似问题
腾讯云开发者
