1、绝对路径直接引入
在index.html中用script引入
<script src="./static/jquery-1.12.4.js"></script>
然后在webpack中配置external
externals: { 'jquery': 'jQuery' }
在组件中使用时import
import $ from 'jquery'

2 、在webpack中配置alias
resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'jquery': resolve('static/jquery-1.12.4.js') } }
然后在组件中import

3、在webpack中配置plugins
plugins: [ new webpack.ProvidePlugin({ $: 'jquery' }) ]
全局使用，但在使用eslint情况下会报错，需要在使用了 $ 的代码前添加 /* eslint-disable*/ 来去掉 ESLint 的检查。

一、绝对路径直接引入，全局可用
主入口页面 index.html 中用 script 标签引入：
<script src="./static/jquery-1.12.4.js"></script>
由于开启了 ESLint 检测，所以会报一个 warning[警告] ：'$' is not defined 。需要加 /* eslint-disable */
二、绝对路径直接引入，配置后，import 引入后再使用
还是先在主入口页面 index.html 中用 script 标签引入：
<script src="./static/jquery-1.12.4.js"></script>
然后，在 webpack 中配置一个 externals
externals: { 'jquery': 'jQuery' }
这样，就可以在每一个组件中用 import 来引用这个 jquery 了。
`import $ from 'jquery'

export default {
created() {
console.log($)
}
}`

三、webpack中配置 alias，import 引入后再使用
只需要在 webpack 的配置文件中，在 resolve 中为 jQuery 添加一个 alias[别名] 。

resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'jquery': resolve('static/jquery-1.12.4.js') } }

在任意组件中，通过 import 的方式来使用 jquery 了

四、webpack 中配置 plugins，无需 import 全局可用
在第三种的基础上，如果我们增加一个 plugins 的配置，那么，我们在使用的时候，无需 import $ from 'jquery' 也可以

resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'jquery': resolve('static/jquery-1.12.4.js') } }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery' }) ]

在项目中，就可以直接使用 $ 了。

直接引入

最简单的方式是在index.html文件中通过<script>标签直接引入CDN提供的第三方库的URL。例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

使用import导入

如果项目使用了模块化的构建工具（如Vue CLI），可以使用import语句将第三方库作为模块导入。
首先，通过npm或其他包管理工具安装第三方库：

npm install jquery

然后，在需要使用第三方库的组件中，使用import语句导入并使用：

import $ from 'jquery';
// 然后可以在组件中使用$

Vue插件形式引入：

对于一些比较复杂的第三方库，可能需要将其封装成Vue插件，以便在Vue项目中更好地集成和使用。
创建一个自定义插件文件，如jquery-plugin.js，并在其中封装第三方库的功能：

import $ from 'jquery';

export default {
  install: (app) => {
    app.config.globalProperties.$jquery = $;
    // 或者将其作为局部插件挂载到组件上
    // app.provide('$jquery', $);
  },
};

在Vue的主入口文件（如main.js）中导入并使用该插件：

import jQueryPlugin from './jquery-plugin.js';

createApp(App)
  .use(jQueryPlugin)
  .mount('#app');