Question

我创建了一个laravel 6项目并设置了前端预设vue，并使用bootstrap.Ex：Navbar和Modal创建了一些vue组件，当我尝试使用$('#modalName').modal('show');打开模态时什么都没发生

所以我认为这是一个jquery问题。我已经安装了bootstrap和jquery（npm install）

这是我的bootstrapjs

try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
} catch (e) {
}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

和appjs

window.Vue = require('vue');
import App from './components/App';
const app = new Vue({
    el: '#app',
    template:'<App/>',
    components: {App}
});```

error message not found the modal function

`$(..).modal('show');`

Answer 1

在您的app.js中，您没有包括bootstrap.js，这就是它不起作用的原因。

在顶部的app.js中包含boostrap.js，如下所示

require('./bootstrap');

如果我们不导入它，那么axios也将不起作用，因为它是导入在app.js中不包含的bootstrap.js中的。

Answer 2

我找到了一个解决方案，Laravel 6有一个新的UI包。首先，我们需要安装此数据包，并且所有文件都可以正常工作。

如何在vue项目中安装jquery

2 个答案: