VueJS - Jquery 未定义

Question

我正在尝试创建一个使用预制 css 样式的 Vue 组件，但问题是我不断收到以下错误，因为模板使用 bootstrap 和 bootstrap 使用一些 jquery:

custom.js?2435:952 Uncaught ReferenceError: jQuery is not defined

代码：

component.vue

<template>
    <html>
        <body>
        ...
        </body>
    </html>
</template>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="./Crypo/assets/js/jquery-3.4.1.min.js"></script>
<script src="./Crypo/assets/js/popper.min.js"></script>

<script src="./Crypo/assets/js/amcharts-core.min.js"></script>
<script src="./Crypo/assets/js/amcharts.min.js"></script>
<script src="./Crypo/assets/js/jquery.mCustomScrollbar.js"></script>
<script src="./Crypo/assets/js/custom.js"></script>

<style scoped src="./Crypo/assets/css/style.css"></style>

Crypo 文件夹与 component.vue 在同一文件夹中。我不明白为什么 jQuery 没有定义，即使我正在导入它。我试图添加到我的代码

import jQuery from 'jquery'

但我仍然遇到错误。有什么解决办法吗？

Answer 1

您在这里有一些选择：

或者您将这些链接放入 index.html

- public
  - index.html

如这里所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="./Crypo/assets/js/jquery-3.4.1.min.js"></script>
    <script src="./Crypo/assets/js/popper.min.js"></script>
    <script src="./Crypo/assets/js/amcharts-core.min.js"></script>
    <script src="./Crypo/assets/js/amcharts.min.js"></script>
    <script src="./Crypo/assets/js/jquery.mCustomScrollbar.js"></script>
    <script src="./Crypo/assets/js/custom.js"></script>    
    ...

或者您可以使用 bootstrap-vue

通过 npm（首选）安装所有内容

npm install vue bootstrap-vue bootstrap

然后像这样将其导入您的应用程序入口点：

import Vue from 'vue'
// bootstrap lib import
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// css imports
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

另一件事是，你不应该在 vue 组件中使用 html 和 body 标签，它们应该只在 index.html 文件中使用。

VueJS - Jquery 未定义

VueJS - Jquery is not defined

jquery

vue.js

bootstrap-vue