将adminLTE集成到nuxt项目中

Question

我创建了一个新的nuxtjs项目，我想使用/添加使用bootstrap4的adminLTE组件。如何将其集成到纯nuxtjs项目中？我以前和laravel合作过，我记得我在我的bootstrap.js里放了类似这样的东西

require('bootstrap');
require('admin-lte');
require('admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js');
require('admin-lte/plugins/toastr/toastr.min.js');

如何在nuxtjs中实现这一点？我已经通过npm安装了adminLTE，并且在安装过程中没有选择任何UI框架，因为adminLTE本身已经使用了bootstrap4。

下面是我的依赖项

 "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/dotenv": "^1.4.0",
    "@nuxtjs/pwa": "^3.0.0-0",
    "admin-lte": "^3.0.5",
    "nuxt": "^2.0.0"
  },

在我的nuxt.config.js中，我在css array中添加了如下内容

 /*
  ** Global CSS
  */
  css: [
    'admin-lte/plugins/toastr/toastr.min.js',
    'admin-lte',
    'bootstrap'
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],

我认为我错了，因为当我访问我的项目时，我在控制台中得到了一个错误。错误是这样的：

Uncaught ReferenceError: jQuery is not defined
    at eval (adminlte.min.js?a86f:6)
    at eval (adminlte.min.js?a86f:6)
    at eval (adminlte.min.js?a86f:6)
    at Object../node_modules/admin-lte/dist/js/adminlte.min.js (vendors.app.js:177)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)
    at eval (App.js:37)
    at Module../.nuxt/App.js (app.js:11)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)

有人能告诉我我该怎么做吗？我是nuxt的新手，我发现使用laravel + vue是不同的。谢谢。

Answer 1

在缺省布局文件导入npm i jquery中运行jquery

import 'jquery/src/jquery'

另外，将jquery添加到您的插件中

 plugins: [
"~/assets/src/scripts/jquery.min.js" ]

这对我很管用。