时间戳

首页 > 解决方案 > VueJS - 未定义 Jquery

jquery - VueJS - 未定义 Jquery

问题描述

我正在尝试创建一个使用预制 css 样式的 Vue 组件，但问题是我不断收到以下错误，因为模板使用引导程序并且引导程序使用一些 jquery：

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

代码：

组件.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'

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

标签： jqueryvue.jsbootstrap-vue

解决方案

您在这里有一些选择：

或者你把这些链接放到 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 文件中使用。

推荐阅读