Vue 中如何引入第三方 JS 库

• • 一绝对路径直接引入全局可用
  • 二绝对路径直接引入配置后import 引入后再使用
  • 三webpack中配置 aliasimport 引入后再使用
  • 四webpack 中配置 plugins无需 import 全局可用
  • 结论

咱们以 jQuery 为例，来说解

1、绝对路径直接引入，全局可用

主入口页面 index.html 中用 script 标签引入：

<script src="./static/jquery-1.12.4.js"></script>

这样，其实就已经能够在项目中使用 jQuery 了。

mounted () { console.log($) }

 

咱们来看一下 调试器 截图： 

能够看到，咱们是能够正常打印出 jQuery 的。 
因为个人项目开启了 ESLint 检测，因此也会报一个 error ：'$' is not defined 。

咱们可让 ESLint 不检查这一行：

mounted () { /* eslint-disable */ console.log($) }

 

加了 /* eslint-disable */ 之后，就不会报那个错了。

2、绝对路径直接引入，配置后，import 引入后再使用

第一种方法有一个弊端就是：咱们每个使用了 $ 的地方，都要再前面加上 /* eslint-disable */ ，这显然是不方便的。

因而，咱们有了第二种方法

仍是先在主入口页面 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($) } }

 

控制台截图以下： 

很好，没有任何问题，咱们能够在这个组件中 随意的 任意的 屡次的 来使用 $ 了。

---

OK，我们已经介绍两种方式了，它们有一个共同点：都须要在主入口页面 index.html 中，用 script 标签来引入 jQuery。

若是你不想在 inde.html 中使用 script 标签来引入 jQuery 的话，咱们还有方法

---

3、webpack中配置 alias，import 引入后再使用

咱们不须要在主入口文件 index.html 中引入 jQuery 。咱们只须要在 webpack 的配置文件中，在 resolve 中为 jQuery 添加一个 alias 。

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

 

那么，咱们就能够在任意组件中，经过 import 的方式来使用 jquery 了。

<script> import $ from 'jquery' export default { name: 'app', created() { console.log($) } } </script>

 

控制台截图： 

OK，也是没有任何问题的

4、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' }) ]

 

这个时候，咱们在项目中，就能够直接使用 $ 了。

<script> export default { name: 'app', created() { /* eslint-disable*/ console.log($) } } </script>

 

同理，因为个人项目使用了 ESLint ，因此须要在使用了 $ 的代码前添加 /* eslint-disable*/ 来去掉 ESLint 的检查，不然会报错：'$' is not define

结论

第一种和第四种方式使用的时候，不须要 import ，全局直接可用；第二种和第三种方式使用的时候，须要先 import 。

一、如今的项目通常都会加入 ESLint 代码检查，因此推荐使用第二种或者第三种方式（这两种方式在使用的时候都须要先 import 引入，而后再使用，也就不存在 ESLint 报 not defined 的问题）

二、若是你的项目没有使用 ESLint ，第一种和第四种也是不错的选择。

三、若是你使用了 ESLint，仍然想使用第一种或者第四种方式，那么，咱们就得在 ESLint 的配置文件中添加规则：'no-undef': 0

转自：http://blog.csdn.net/csdn_yudong/article/details/78795743