我们以 jQuery 为例,来讲解

一、绝对路径直接引入,全局可用

主入口页面 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 */ 以后,就不会报那个错了。

二、绝对路径直接引入,配置后,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 的话,我们还有方法


三、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,也是没有任何问题的

四、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 。

1、现在的项目一般都会加入 ESLint 代码检查,所以推荐使用第二种或者第三种方式(这两种方式在使用的时候都需要先 import 引入,然后再使用,也就不存在 ESLint 报 not defined 的问题)

2、如果你的项目没有使用 ESLint ,第一种和第四种也是不错的选择。

3、如果你使用了 ESLint,仍然想使用第一种或者第四种方式,那么,我们就得在 ESLint 的配置文件中添加规则:'no-undef': 0

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

Vue 中如何引入第三方 JS 库的更多相关文章

  1. Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

    1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车           ...

  2. vue 中引入第三方js库

    以 jQuery 为例 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1. ...

  3. 转《vue引入第三方js库》

    一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins, ...

  4. 在 Ionic2 TypeScript 项目中导入第三方 JS 库

    原文发表于我的技术博客 本文分享了在Ionic2 TypeScript 项目中导入第三方 JS 库的方法,供参考. 原文发表于我的技术博客 1. Typings 的方式 因在 TypeScript 中 ...

  5. 在Vue将第三方JS库封装为组件使用

    第三方JS库地址:https://github.com/inorganik/CountUp.js 使用NPM进行安装: npm install --save countup 根据官方回答,CountU ...

  6. vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)

    1.引入第三方js文件,npm安装不了 2.控制台显示引入成功 3.在methods下使用 图片看不清请看下面代码 updateTime() { setInterval(()=>{ var cd ...

  7. vue中加载three.js的gltf模型

    vue中加载three.js的gltf模型 一.开始引入three.js相关插件.首先利用淘宝镜像,操作命令为: cnpm install three //npm install three也行 二. ...

  8. Vue引入第三方JavaScript库和如何创建自己的Vue插件

    一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...

  9. 在 Angular 2 Component 中使用第三方 JS 库

    本文所有内容以 Angular 2 Quick Start 项目为基础,使用 TypeScript 语言. 如上图,最近遇到一个需求,需要在一个刚启动的 Angular 2 项目中使用 snap.sv ...

随机推荐

  1. Go数组求和

    package main import "fmt" ]int func main() { a := [],,,,} var b int for index,value := ran ...

  2. [LeetCode] Champagne Tower 香槟塔

    We stack glasses in a pyramid, where the first row has 1 glass, the second row has 2 glasses, and so ...

  3. php发送邮箱

    /** * 系统邮件发送函数 * @param string $tomail 接收邮件者邮箱 * @param string $name 接收邮件者名称 * @param string $subjec ...

  4. 关于python列表和元组的基本操作

    一.列表 列表是python中最常出现的一种数据存储形式,掌握列表的基本操作可以快速而有效的提高我们的代码书写效率.列表中存放的数据有如下基本操作:如增.删.改.查,掌握了这四个操作,就基本掌握了列表 ...

  5. BZOJ 1257 - 余数之和 - [CQOI2007]

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1257 题意: 给定正整数 $n,k$,求 $(k \bmod 1) + (k \bmod ...

  6. [dev] 中文版内核代码编码规范

    我是我最喜欢的编码规范.并始终坚持. https://www.kernel.org/doc/html/v4.15/translations/zh_CN/coding-style.html

  7. 解决spring 用@Value注入配置时候出现中文乱码问题

    只要是乱码,很明显需要指定编码格式,为utf-8 <!-- 注解使用properties --> <bean id="configProperties" clas ...

  8. python 包下载地址

    https://www.lfd.uci.edu/~gohlke/pythonlibs/

  9. mysql关于排序值的问题,指定排序值

    SELECT a.* FROM `catalog_eav_attribute` ea JOIN `eav_attribute` a ON ea.`attribute_id`=a.`attribute_ ...

  10. 把jmeter获取到的信息存到本地文件

    1.jmeter使用正则表达式提取器,获取到响应信息,把获取到的响应信息写到本地文件 2.添加后置Bean Shell ,写入以下脚本 3.打开本地文件查看,写入成功 脚本内容如下: FileWrit ...