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数组中添加了类似的内容

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

对我有用。

将adminLTE集成到nuxt项目

1 个答案: