从 Laravel Blade 文件导入 Vue js 组件

Question

我在文件中注册了一些组件作为全局组件js/app.js，但这使得编译后的app.js文件更大。

//example: app.js
Vue.component('profile-page', require('./components/profiles/ProfilePage.vue').default);

问题是：有没有办法在 laravel-blade 文件中导入这些全局组件，而不是在app.js文件中全局注册它？

像这样的东西：

// laravel-blade file
<script>
    import ProfilePage from ...;
</script>

Answer 1

在另一个文件中注册组件而不是app.js

resources/js/example.js

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

将您的组件编译到另一个文件中webpack.mix.js

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

将其包含在刀片中

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