Webpack 环境下 Vue 项目正确引入 jQuery 及第三方插件的方法

创建 jQuery 封装文件

首先，在项目中新建一个名为 jquery-vendor.js 的文件。

import $ from 'jQuery';
console.log($);
window.$ = $;
window.jQuery = $;
export default $;

在该文件中导入 jQuery，并将其赋值给 window 对象，从而将其注册为全局变量。具体操作包括将 jQuery 实例赋值给 window.$ 和 window.jQuery，最后导出该实例。

在 Vue 组件中引用

接下来，在需要使用的 Vue 组件中引入该文件。

import $ from './assets/jquery-v';
import 'bootstrap-material-design'; 
//调用初始化
$(function(){
 $.material.init();
});

注意事项与常见问题

需要注意以下关键事项：

第一，这种引入方式仅适用于在 Vue 组件内部进行引用。

第二，如果在 main.js 中直接引入 jquery.js，虽然 jQuery 本身可以正常工作，但在 main.js 或 Vue 组件中引入 jQuery 的第三方插件时会出现问题，导致插件无法正确初始化。

以上就是在 Webpack 和 Vue 环境中引入 jQuery 及第三方插件的完整流程，希望这对大家的学习或工作有所帮助。