将 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，并且在安装过程中我没有 select 任何 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 数组中添加了类似的内容

 /*
  ** 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" ]

这个对我有用。