将 adminLTE 集成到 nuxt 项目答案

【问题标题】：Integrate adminLTE to nuxt project将 adminLTE 集成到 nuxt 项目
【发布时间】：2020-06-02 19:05:10
【问题描述】：

我创建了一个新的 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 数组中添加了类似的内容

 /*
  ** 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 有所不同。谢谢。

【问题讨论】：

标签： javascript vue.js bootstrap-4 nuxt.js adminlte

【解决方案1】：

运行npm i jquery而不是在默认布局文件中导入jquery

import 'jquery/src/jquery'

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

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

它对我有用。

【讨论】：

会试试这个