如何在Vue-CLI 3项目中全局声明jQuery？

Question

如何在Vue-CLI 3项目中全局声明jQuery？

javascriptjqueryvue.jswebpackvue-cli-3

3

我在SO和其他地方看到了很多关于这个问题的提问，但是到目前为止我还没有成功。

为了提供一点背景，我建立了一个SPA网站，在一个我创建的Vue项目上，该项目使用了一个“旧”的命令。我不记得是哪一个，但它看起来像下面这样：

vue init webpack <my project>

最近我意识到对于我来说，Vue-CLI 3会更容易维护、更新和改进，因为有各种各样的情境原因，所以我安装了@vue/cli，创建了一个新的项目，并开始从我的旧项目中复制/粘贴文件到新项目中。

旧项目中有一个build目录，其中包含各种Webpack配置文件，我需要将jQuery全局设置为我想要使用的包，因此我添加了以下内容到Webpack的“base”配置中。

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
}),

然而，对于这个新项目，我现在只有位于项目根目录下的babel.config.js和vue.config.js作为配置文件，没有build或config目录。

我尝试在main.js文件中使用以下代码将jQuery设置为全局变量：

import jQuery from 'jquery'

window.$ = window.jQuery = jQuery
global.$ = global.jQuery = jQuery

但是每次我重新加载页面时，都会出现以下错误信息：

jQuery未定义

到目前为止，我使用的是CDN版本的jQuery，但是我对这个解决方案感到不放心。

那么在Vue-CLI 3项目中该怎么做呢？

提前感谢您的帮助。

- Jaeger

1

不要这样做！像Vue这样的现代模板引擎的意义在于，你不需要使用类似jQuery这样的遗留库。千万不要这样做！ - Adrian Brand

问题是，我无法在Vue环境中找到或使一个原生JS包正常工作。 - Jaeger

1

你应该在每个需要它的 .js/.vue 文件开头使用 import jquery from jquery，然后使用 jquery("#id").whatever。 - Anuga

也许你可以将其添加到 Vue() 中，并通过 .vue 文件内的 this.$jquery 进行访问，尚未尝试过。 - Anuga

3个回答

0

你可以进入 public/index.html 并在 body 中添加指向你的 jQuery 文件或 CDN 的脚本标签。如果你将它放在 public 中的一个 jQuery 文件夹中，它会像这样：

<body>
    <div id="app"></div>
    <script type="text/javascript" src="/jquery/jquery-3.4.1.min.js"></script>
</body>

我不确定那是否正是你想要的，但这将使其在整个项目中全球可用。

- Leonardo Cló

-1

如果您正在使用Jquery插件，您应该在main.js中执行以下操作：

/*
* If using Jquery plugins they will expect to be available in the global namespace, 
* which isn’t the case when you import/require it. So manually assign jquery to 
* window. Use require instead of import because the imports are hoisted to the
* top of a file by the compiler, which would break VueJS code.
*/
const $ = require('jquery')
window.jQuery = window.$ = $;

- prison-mike

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rutz · Accepted Answer

你可以使用Vue插件。这样可以为每个组件添加新的属性。

在main.js中。

import Vue from 'vue';
import jQuery from 'jquery';

Vue.use({
  install (V) {
    V.$jQuery = V.prototype.$jQuery = jQuery
  }
})

然后你可以在组件中随处使用jQuery。

在MyComponent.vue中

import Vue from 'vue'

export default {
  mounted () {
    this.$jQuery('h1').text('Hello World')
    Vue.$jQuery('h1').text('Hello World')
  }
}

即使是另一个js文件。

在util.js中。

import Vue from 'vue'

Vue.$jQuery('h1').text('Hello World')