如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

54

使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码

// 在开头引入webpack,后面的plugins那里需要
var webpack = require('webpack')
// resolve

module.exports = {
   // 其他代码...
   resolve: {
      extensions: ['', '.js', '.vue'],
      fallback: [path.join(__dirname, '../node_modules')],
      alias: {
          'src': path.resolve(__dirname, '../src'),
          'assets': path.resolve(__dirname, '../src/assets'),
          'components': path.resolve(__dirname, '../src/components'),

          // webpack 使用 jQuery,如果是自行下载的
          // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
          // 如果使用NPM安装的jQuery
          'jquery': 'jquery' 
      }
   },

   // 增加一个plugins
   plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
      })
   ],

   // 其他代码...
}

这样就可以正确的使用jQuery了,比如我要引入Bootstrap,我们在vue的入口js文件src/main.js开头加入

// 使用Bootstrap
import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'

这样Bootstrap就正确的被引用并构建。
在比如使用toastr组件,只需要在需要的地方import进来,或者全局引入css在需要的地方引用js,然后直接使用

// 使用toastr
import 'assets/libs/toastr/toastr.min.css'
import toastr from 'assets/libs/toastr/toastr.min'

toastr.success('Hello')

参考:

vue-cli webpack全局引入jquery

  1. 首先在package.json里加入,

    dependencies:{
     "jquery" : "^2.2.3"
    }

    然后 nmp install

  2. webpack.base.conf.js里加入

    var webpack = require("webpack")
  3. 在module.exports的最后加入

    plugins: [
     new webpack.optimize.CommonsChunkPlugin('common.js'),
     new webpack.ProvidePlugin({
         jQuery: "jquery",
         $: "jquery"
     })
    ]
  4. 然后一定要重新 run dev

  5. 在main.js 引入就ok了

    import $ from 'jquery'

参考: vue-cli怎么引入jquery

在.vue文件中引入第三方非NPM模块

var Showbo = require("exports?Showbo!./path/to/showbo.js");

参考: exports-loader

vue-cli引入外部文件

webpack.base.conf.js 中添加externals

externals 中 swiper 是键,对应的值一定的是插件 swiper.js 所定义的变量 Swiper :


之后再在根目录下的index.html文件里引入文件:<script src="static/lib/swiper.js"></script>
这样子就可以在需要用到swiper.js的文件里加入这行代码:import Swiper from 'swiper',这样就能正常使用了。
参考: https://segmentfault.com/q/1010000005169531?_ea=806312

你可能感兴趣的

22 条评论
Juven · 2016年12月19日

在设置了provideplugin配置之后,貌似不用import引入jquery也可以使用$或者jquery的了。

+2 回复

2

不需要import引入jquery,jquery是全局的了

淡然_57 · 2017年04月01日
0

是的 已经是全局的了 vue已经帮助配置好了 如果是单纯的webpack确实得手动import

灰了个灰 · 2018年01月17日
uuueeu · 2017年08月16日

牛B,解决了第三方插件的问题了。cropper我用的是第三方的非NPM的。能用了。

+1 回复

无尽的故事 · 2016年11月13日

请问一下import toastr from 'assets/libs/toastr/toastr.min',而vue-cli又有eslint检查,这样不是会出错不通过吗?

回复

淡然_57 · 2017年04月01日

漂亮,谢谢

回复

HongHaiyang · 2017年04月06日

为什么我这样还是不行啊,提示我需要jquery。。。网上所有方法我都试了个遍。。。

回复

0

试试在index.html里加入jquery

小王子 · 2018年06月28日
cuijinxin · 2017年06月26日

build/webpack.base.conf.js 工程目录下找不到这个文件怎么办

回复

傲娇小公举 · 2017年07月04日

为什么我设置了provideplugin配置之后调用外部的js方法的时候还是提示我我没定义

回复

傻子和白痴的心 · 2017年07月17日

你好

回复

傻子和白痴的心 · 2017年07月17日

为什么我引用了jquery没法使用吧,我在组件中可以console出来,但是绑定时间就没有效果

回复

JohnNiang · 2017年08月03日

重启解决一切

回复

我是一只茶叶蛋 · 2017年08月21日

引入jquery 根本解决不了 http://blog.csdn.net/yiifaa/a... 这个才可以

回复

南极快没有冰山 · 2017年10月23日

哈哈 很强 谢谢分享

回复

Shine · 2017年10月26日

我的报错,帮忙看看什么问题
42 verbose cwd D:VUEmy-norm
43 error Windows_NT 6.1.7601
44 error argv "D:\ANZHUANG\node\node.exe" "D:\ANZHUANG\node\node_modules\npm\bin\npm-cli.js" "install"
45 error node v6.11.2
46 error npm v3.10.10
47 error code ETIMEDOUT
48 error errno ETIMEDOUT
49 error syscall connect
50 error network connect ETIMEDOUT 151.101.72.162:443
51 error network This is most likely not a problem with npm itself
51 error network and is related to network connectivity.
51 error network In most cases you are behind a proxy or have bad network settings.
51 error network
51 error network If you are behind a proxy, please make sure that the
51 error network 'proxy' config is set properly. See: 'npm help config'
52 verbose exit [ 1, true ]

回复

0

npm的配置有问题

kemplaw · 2017年11月21日
kemplaw · 2017年11月21日

这个很强了 感谢楼主的知识分享

回复

皓月之心 · 2017年12月06日

我发现不用在webpack.base.conf.js中配置,在要用的地方直接import $ from 'jquery'也可以,请问楼主有什么区别吗?

回复

0

在webpack.base.conf.js中配置只是为了可以全局使用,就不用import了,在哪个文件中都可以使用;如果不在配置文件中设置,那么就需要在用到的地方import或require了。

_ing · 2018年01月26日
一杯凉白开 · 2018年02月26日

楼主你好,

http://eslint.org/docs/rules/... '$' is defined but never used
srcmain.js:6:8
import $ from 'jquery'

      ^

✘ 1 problem (1 error, 0 warnings)

Errors:
1 http://eslint.org/docs/rules/...

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use / eslint-disable / to ignore all warnings in a file.

不知道是什么问题

回复

7nz · 2018年07月22日

按照此方法,直接引入的jq文件,之后在main.js里面 引入 import {$} from 'jquery'
就会报错"export '$' was not found in 'jquery'

回复

载入中...