Nuxtjs toastr和datatable插件无法从adminLTE中运行 - 3个模板。

Question

我有一个新安装的nuxtJs项目。我将adminLTE通过 npm. 我没有安装任何UI框架，因为adminLTE使用bootstrap4和jquery。但是当我使用 adminLTE 插件时，有些不工作，有些不显示，比如 toastr 和 datatables。我没有任何jquery在我的 package.json. 谁能告诉我，我做错了什么？谢谢。

我的Nuxt配置

 head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      //All adminLTE css from node_modules/admin-lte/

      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: '/plugins/fontawesome-free/css/all.min.css' },
      { rel: 'stylesheet', href: 'https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' },
      { rel: 'stylesheet', href: '/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' },
      { rel: 'stylesheet', href: '/plugins/icheck-bootstrap/icheck-bootstrap.min.css' },
      { rel: 'stylesheet', href: '/plugins/jqvmap/jqvmap.min.css' },
      { rel: 'stylesheet', href: '/dist/css/adminlte.min.css' },
      { rel: 'stylesheet', href: '/plugins/overlayScrollbars/css/OverlayScrollbars.min.css' },
      { rel: 'stylesheet', href: '/plugins/daterangepicker/daterangepicker.css' },
      { rel: 'stylesheet', href: '/plugins/summernote/summernote-bs4.css' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700' }
    ],
    script: [
      //All adminLTE js
      { src: '/plugins/jquery/jquery.min.js', body: true },
      { src: '/plugins/jquery-ui/jquery-ui.min.js', body: true },
      { src: '/plugins/bootstrap/js/bootstrap.bundle.min.js', body: true },
      { src: '/plugins/chart.js/Chart.min.js', body: true },
      { src: '/plugins/sparklines/sparkline.js', body: true },
      { src: '/plugins/jqvmap/jquery.vmap.min.js', body: true },
      { src: '/plugins/jqvmap/maps/jquery.vmap.usa.js', body: true },
      { src: '/plugins/jquery-knob/jquery.knob.min.js', body: true },
      { src: '/plugins/moment/moment.min.js', body: true },
      { src: '/plugins/daterangepicker/daterangepicker.js', body: true },
      { src: '/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js', body: true },
      { src: '/plugins/summernote/summernote-bs4.min.js', body: true },
      { src: '/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js', body: true },
      { src: '/dist/js/adminlte.js', body: true },
      //AdminLte toastr and datatable here
      { src: '/plugins/toastr/toastr.min.js', body: true },
      { src: '/plugins/jquery/jquery.min.js', body: true },
      { src: '/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js', body: true }
    ],

我的组件

//using toastr
import Vue from 'vue'
import toastr from 'admin-lte/plugins/toastr/toastr.min.js'
Vue.use(toastr)
window.toastr = require('toastr')

methods:{
   addDoctor(){
            console.log('hello doc')
            firebase.database().ref('doctors').push({
                name: this.name,
                address: this.address
            }).then((res)=>{
                $('#exampleModal').modal('hide')
                toastr.success('Added!')
            }).catch((err)=>{
                console.log(err)
            })
        }
}

表类

 <table id="myTable" class="table table-bordered table-responsive">

该toastr没有一个错误，但当我在网络搜索->js。我发现 toastr.min.js 但状态码是 304. 另外，我在控制台得到了一个关于数据表的错误。以下是错误信息

Uncaught TypeError: $(...).DataTable is not a function
    at HTMLDocument.eval (doctors.vue?78e7:120)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

and

Uncaught TypeError: Cannot read property 'defaults' of undefined
    at dataTables.bootstrap4.min.js:5
    at dataTables.bootstrap4.min.js:5
    at dataTables.bootstrap4.min.js:5

我做错了什么？谁能帮我解决这个问题，谢谢

EDIT：toastr的部分修复。css没有被导入

{ rel: 'stylesheet', href: '/plugins/toastr/toastr.min.css', body: true },

这就是为什么Toastr不显示的原因。现在Toastr问题解决了。只剩下数据表的问题

Answer 1

你只需要手动添加jquery和数据表样式来使用datatable类和函数。

在脚本数组中

  { src: '/plugins/jquery/jquery.min.js', body: true },
  { src: '/plugins/datatables/jquery.dataTables.min.js', body: true },
  { src: '/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js', body: true },

而在css中

{ rel: 'stylesheet', href: '/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css'}