时间戳

首页 > 解决方案 > 在 .blade 中导入 npm 包

laravel - 在 .blade 中导入 npm 包

问题描述

我正在开发的项目中使用 laravel 和 vue js。我已经安装了vue-colornpm 包以加载颜色选择器。

npm 包安装成功。但是当我尝试将其导入刀片时，它会显示以下错误。

未捕获的语法错误：无法在模块外使用 import 语句

下面的代码将显示我如何在刀片内部使用。

@section
<div>
  .......
</div>    
@endsection
@push('script')
    <script>

        import Photoshop from 'vue-color';

        var manageDisplayStore = new Vue({
            el: '#containerMain',
            name: 'manageDisplayStore',
            components: {
                // Photoshop
            },

如何导入包？

标签： laravelvue.jsnpm

解决方案

您可以在您的 中导入 NPM 包/resources/js/app.js，然后将其包含/resources/js/app.js在您的布局模板中，然后才能在 Blade 模板中调用它。

app.js如果您在安装 Laravel 时使用了默认预设之一，则最有可能包含 NPM 包（如 Bootstrap / Vue）。

将导入分配给全局变量，例如window.Photoshop = require('vue-color');

默认情况下，它app.js也应该包含在您的布局中。

然后像您使用的那样在 Blade 模板中使用它。Photoshop或window.Photoshop变量应该可用。

使用前检查文档是否准备就绪，或者可能undefined取决于您导入app.js.

推荐阅读