从Laravel Blade File导入Vue js组件 [英] Import a Vue js component from Laravel Blade File

问题描述

我已经在js/app.js文件中将一些组件注册为全局组件，但这会使编译后的app.js文件更大.

I have registered a some components as a global components in js/app.js file, But this makes the compiled app.js file larger.

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

问题是:是否可以将所有这些全局组件导入laravel-blade文件中，而不是在app.js文件中进行全局注册?

The question is: Is there a way to import any of these global component in the laravel-blade file instead of registering it globally in app.js file?

类似这样:

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

推荐答案

在另一个文件而不是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');

将其包含在刀片服务器中

Include it in blade

<script src="/js/example.js"></script>

这篇关于从Laravel Blade File导入Vue js组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！