1、安装jquery

npm install jquery --save

2、vue.config.js添加配置:

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

3、在vue页面中引用:

import jQuery from 'jquery'

4、使用jquery三方库,例如cloud9carousel,下载三方库js到自定义目录然后引入:

import carousel from '@/utils/jquery-ext/jquery.cloud9carousel'

5、可以在mounted中使用:

mounted() {
    const that = this
    that.$nextTick(() => {
      const showcase = jQuery('#showcase')
      showcase.css('opacity', '0')
   })
}

6、注意三方库和vue引入的jquery的版本号是否对应,有些三方库加载后报错就是jquery版本引起的找不到方法,需要手动修改三方库的代码。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐