在 Vue 3 和 Laravel 的“vue”中找不到导出“默认”（导入为“Vue”）答案

【问题标题】：export 'default' (imported as 'Vue') was not found in 'vue' in Vue 3 and Laravel在 Vue 3 和 Laravel 的“vue”中找不到导出“默认”（导入为“Vue”）
【发布时间】：2021-07-08 04:46:02
【问题描述】：

我将创建一个 Laravel 8 + Vue JS 3 混合项目。我已经设置了所有内容，但是当我npm run watch 时，出现如下错误。我尝试了各种方法来查看一些论坛，但仍然出错。谁能帮帮我？

./resources/js/components/index.js 6:2-15 中的警告 在“vue”中找不到导出“default”（导入为“Vue”）（可能的导出：BaseTransition、Comment、Fragment、KeepAlive、Static、Suspense、Teleport、Text、Transition、TransitionGroup、callWithAsyncErrorHandling , callWithErrorHandling, camelize,....

./js/components/ExampleComponent.vue

<template>
    <div>
        <h1>Test</h1>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

./js/components/index.js

import Vue from 'vue';
import Card from './Card';
import Button from './Button';

// Components global.
[
  Card,
  Button,
].forEach(Component => {
  Vue.component(Component.name, Component)
})

./js/app.js

require('./bootstrap');

window.Vue = require('vue');
import './components';

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

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

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue()
   .sass('resources/sass/app.scss', 'public/css');

   if(!mix.inProduction()) {
      mix.sourceMaps();
      mix.webpackConfig({ devtool: 'source-map'})
      .options({
         processCssUrls: false
      });
   }

【问题讨论】：

这能回答你的问题吗？ "export 'default' (imported as 'Vue') was not found in 'vue'
查看本教程以了解没有 vue-cli 的 Vue v3 设置：frontendguruji.com/blog/…

标签： javascript laravel vue.js laravel-8 vuejs3

【解决方案1】：

你的代码应该是这样的：

./js/app.js

require('./bootstrap');
import { createApp } from 'vue';

import components from  './components';
import ExampleComponent from './components/ExampleComponent.vue'

let app=createApp(ExampleComponent)
app.use(components)


app.mount("#app")

./js/components/index.js

这是一个全局注册组件的插件


import Card from './Card';
import Button from './Button';

// Components global.

export default {
  install: (app, options) => {
    [
  Card,
  Button,
].forEach(Component => {
  app.component(Component.name, Component)
})
  }
}

【讨论】：