Vue整合外部jQuery与MDB时遇$未定义及pickadate报错的解决咨询

我来帮你搞定这个问题——这确实是遗留项目适配Vue时很容易碰到的坑。核心原因就是你同时引入了两个独立的jQuery实例：一个是index.html里全局加载的，另一个是通过npm安装后import的，而MDB的pickadate插件只挂载在了全局的那个jQuery实例上，所以才会出现两种报错。

下面是具体的解决步骤：

1. 移除重复的jQuery依赖 #

首先把通过npm安装的jQuery删掉，彻底避免两个实例冲突：

npm uninstall jquery

2. 让Vue能访问全局的jQuery实例 #

Vue组件默认处于模块化作用域，无法直接访问全局的$，我们有两种方式让组件拿到全局的jQuery：

方法一：通过vue.config.js配置外部依赖（推荐Vue CLI项目使用） #

在项目根目录的vue.config.js里添加如下配置，告诉Webpack把jquery指向全局的jQuery对象：

module.exports = {
  configureWebpack: {
    externals: {
      jquery: 'jQuery'
    }
  }
}

之后在需要使用jQuery的组件里，就可以正常import并使用了：

import $ from 'jquery'

export default {
  mounted() {
    // 这里的$就是全局的那个jQuery，已经挂载了MDB的pickadate插件
    $('.datepicker').pickadate({
      // 你的日期选择器配置项
    })
  }
}

方法二：挂载到Vue原型上（更简单的全局访问方式） #

如果不想配置vue.config.js，可以直接在main.js里把全局的$挂载到Vue原型上，这样所有组件都能通过this.$访问：

// main.js
import Vue from 'vue'
// 直接把window上的jQuery实例挂载到Vue原型
Vue.prototype.$ = window.$

然后在组件里就可以直接用：

export default {
  mounted() {
    this.$('.datepicker').pickadate({
      // 配置项
    })
  }
}

3. 关键注意事项 #

• 确保index.html里的资源加载顺序正确：先加载jQuery，再加载MDB的js文件，你现在的顺序是对的，不用调整。
• 操作DOM的代码一定要放在mounted钩子函数里，因为只有这个阶段组件的DOM才完全渲染完成，$('.datepicker')才能找到对应的元素。

内容的提问来源于stack exchange，提问作者Bogdan Dubyk