在vue项目中如何引入第三方库（比如jQuery）？有哪些方法可以做到？

Answer 1

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 的检查。

Answer 2

一、绝对路径直接引入，全局可用
主入口页面 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' }) ]

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

Answer 3

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.1/jquery.min.js"></script>