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

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

我应该如何进行Vue-CLI 3项目？

提前谢谢

Answer 1

您可以继续public / index.html并将script标签添加到正文中，并带有指向jquery文件或cdn的路由。如果将其放在公共的jquery文件夹中，它将看起来像：

library(geosphere)

distm(df[,c('Longitude','Latitude')],
      df1[,c('Longitude','Latitude')],
             fun=distVincentyEllipsoid)

         [,1]     [,2]     [,3]     [,4]
[1,] 45461.49 23203.37 44300.99 10190.84
[2,] 60243.58 15053.19 53852.61 40763.35
[3,] 63272.26 22151.07 59016.34 32505.87
[4,] 56308.59 46393.08 59016.34 15048.01

我不确定这是否正是您想要的，但这是否会使它在您的项目中全局可用。

Answer 2

在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.$ = $;

Answer 3

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

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

3 个答案: