如何在Vue项目中引入jQuery?

假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project).

在你的vue项目目录下执行:

npm install jquery --save-dev

打开 build/webpack.base.conf.js 文件并添加 plugins:

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery'
    })
  ]
  ...
}

在文件顶部添加

const webpack = require('webpack')

如果你有在使用eslint, 打开 .eslintrc.js  文件添加 global 项

module.exports = {
  globals: {
    "$": true,
    "jQuery": true
  },
  ...

现在你可以在vue项目中随意使用$了

PS: 此方法不需要额外的类似 expose loader 等的插件

posted @ 2018-05-29 17:11  PajamaCat  阅读(2644)  评论(0编辑  收藏  举报