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

Question

我在 SO 和其他地方看到了很多关于此问题的问题，但到目前为止我还没有运气。

为了了解一些背景信息，我在使用“旧”命令创建的 Vue 项目上构建了 SPA 网站。我不记得是哪一个，但看起来如下:

vue init webpack <my project>

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

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

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 is not defined

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

我应该如何继续 Vue-CLI 3 项目？

提前谢谢

Answer 1

您可以使用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')