Question

我想知道如何在Laravel 5.4中的vue文件中使用jQuery库

我想在我的vue文件中使用这个库： input mask

在我的vue文件中，我正在创建一个表，每行都有一个带有日期字段且带有'date'类的表单。

使用jQuery我会用以下方法掩盖这些字段： $（”。日期 '）掩模（'00 / 00/0000'）;

如何将库导入vue并屏蔽所有这些日期字段？

js文件位于：public / js / jquery.mask.min.js

我试过了：

var mask_script = require('/js/jquery.mask.min.js');

和

var mask_script = require('js/jquery.mask.min.js');

然后：

export default {

        mounted: function () {
            this.loadData();
            $('.date').mask('00/00/0000');

但是我在npm run dev：

上得到了这个错误

无法解析js / jquery.mask.min.js

有人可以帮忙吗？

Answer 1

您必须从实际路径加载文件。

尝试

// make sure the path is the actual path of jquery.mask.min.js
var mask_script = require('../../../public/js/jquery.mask.min.js');

然后我会将jquery.mask.min.js移到您的resources/assets/js/文件夹中，因为您正在将其编译到app.js文件中。

Answer 2

我试图在Vue中使用this引导模板。它需要holder libaray才能显示缩略图图标。因此我在 resources / js / scripts 中创建了一个文件夹，保存了holder.min.js，然后像这样在vue页面中调用。

laravel 5.7的文件夹结构

     resources
          \js
           |components
           |views (I have created this folder to save vue pages)
                 \inventory(folder)
                                 \Index.vue
           |scripts
                   \holder.min.js

在Index.vue视图中，位于资源/ js /库存/索引

<script> require('../../scripts/holder.min.js')</script>

first ../ will take it to views directory from inventory
second ../ will take it to main js directory where scripts folder is located

它工作正常，没有任何问题。

如何在vue中使用外部js文件

2 个答案: