Vue 中引用第三方js总结
vue中引用第三方js总结
By:授客 QQ:1033553122
实践环境
win10
Vue 2.9.6
本文以引用jsmind
为例,讲解怎么在vue中引用第三方js类库
基础示例
1、把下载好的js类库放在src/static目录下
2、在src/index.html
入口文件中通过script
引用需要使用的js(参见以下第8-10行代码)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>测试管理平台</title><link rel="icon" type="image/x-icon" href="/static/favicon.png"><script src="./static/jsmind0.4.6/js/jsmind.js"></script><script src="./static/jsmind0.4.6/js/jsmind.draggable.js"></script><script src="./static/jsmind0.4.6/js/jsmind.screenshot.js"></script></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>
3、在webpack.base.config.js(webpack基础配置文件,包含开发和生产环境的通用配置)中,增加一个externals配置(参见以下带背景色,加粗,倾斜的内容)
3、在webpack.base.config.js(webpack基础配置文件,包含开发和生产环境的通用配置)中,增加一个externals配置(参见以下第17-19行代码)module.exports = {...略node: {// prevent webpack from injecting useless setImmediate polyfill because Vue// source contains it (although only uses it if it's native).setImmediate: false,// prevent webpack from injecting mocks to Node native modules// that does not make sense for the clientdgram: "empty",fs: "empty",net: "empty",tls: "empty",child_process: "empty"}, externals: {jsmind: "jsMind" // 属性名称:字符串 // 该字符串将用于检索一个同该字符串同名的变量,本例中 将用jsMind来检索一个全局的jsMind变量,即需要的类库}
};
注意:之所以配置在externals
中,是因为该配置项配置提供了「从输出的 bundle
中排除依赖」的方法,即防止程序将 import
的包(package
) 打包到 bundle
中。这里,我们不需要打包第三方库,仅需要在运行时(runtime
)从外部获取这些扩展依赖(external dependencies
)。
4、引用
通过import关键字根据实际需要进行全局、局部引用,如下,进行局部引用
<template><div class="jm-div"><div id="jsmindContainer"></div></div>
</template><script>
import jsMind from "jsmind" // from 类库名称 import 属性名称
</script>
5、导入css文件
一般情况下,引用第三方js的同时,还需要引入对应的css文件,引入方式分以下两种:
全局引入
在
main.js
文件中通过import
引入,例如import "../static/jsmind0.4.6/style/jsmind.css"
局部引入
非全局引入,比如在.vue等组件(例中组件存放路径为
src/views/example.vue
)<style scoped> @import "../../static/jsmind0.4.6/style/jsmind.css"; // 这个分号一定要写,要不会报错 </style>
参考链接
https://webpack.docschina.org/configuration/externals
Vue 中引用第三方js总结相关推荐
- vue 引用src中的文件_Vue中引用第三方JS文件
使用Vue时会经常使用jQuery.bootstrap这类第三方工具库,而boostrap的渲染不仅依赖于jQuery js文件的加载,也依赖于HTML中DOM树内容的加载.但Vue中DOM树是有Vu ...
- Vue之引用第三方JS插件,CKPlayer使用
前言: 不管是VUE还是Angular,有时候我们需要使用到一些js插件,但是的源库中并没有相应的插件包,这个时候我们需要如何引入并且使用呢?这个问题其实非常简单,接下来我以VUE为例写给大家介绍一下 ...
- vue中引入第三方js
vue中常遇到第三方js,简单粗暴的可以直接在html页面中引入cdn. 或者在 webpack.base.conf.js 中进行配置. module.exports = {entry: {track ...
- Vue如何引入第三方js
最近遇到的问题是如何在vue中引入mui.js,通过import引入就报这个错 一看就知道mui是传统模式,没有es6的export写法,所以import引用不到,给mui加上export defau ...
- vue中通过monment.js插件来将时间戳转换为常用的时间格式
vue中通过monment.js插件来将时间戳转换为常用的时间格式 在项目中很多时候需要展示时间信息,我们一般都是用时间戳来传输时间信息,但是我们在页面展示的话是我们想要的常见格式,比如:2021-4 ...
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
- vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离 一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
- vue中引用tinymce图标不显示解决方法
vue中引用tinymce图标不显示解决方法 通过官网查到一篇博客,按照上面步骤可以实现tinymce富文本编辑器的封装和使用. https://www.cnblogs.com/zhongchao66 ...
- html 全景图three,vue中利用three.js实现全景图的完整示例
粗暴一点,直接上代码: 第一步: 通过指令下载three.js npm install three -S 第二步: 在组件中引用 import * as THREE from 'three' 第三步: ...
最新文章
- R语言ggplot2可视化绘制分组水平条形图并在条形图的各种位置添加数值标签实战
- 插入排序 链表 java_Java实现 LeetCode 147 对链表进行插入排序
- java代码调用python_Java调用Python
- php打开目录文件类型,php中打开目录并输出目录文件实现代码
- ORACLE客户端jdbc连接测试,Oracle 客户端JDBC连接测试工具
- [转]各种字符集和编码详解
- (转)Spring Boot 2 (九):【重磅】Spring Boot 2.1.0 权威发布
- linux开启多少到多少端口命令,Linux端口命令
- 【Linux】shell调用Java程序main方法通过crontab定时执行
- PHP 对和队列的区别,【php】Redis的队列和消息队列的区别是什么?
- 一次spinlock死锁故障的定位(太经典,收藏!)
- Validation进行参数校验
- 批量制作学校图书馆条码标签
- 由连连看游戏作弊器想到的
- CoordConv:An intriguing failing of convolutional neural networks and the CoordConv solution
- 尚医通项目101-123:前台用户系统、登录注册、邮箱登录
- snownlp对天猫商品评论数据进行情感分析(附源码)
- 使用ffmpeg进行音频采样率转换
- 实现strstr()函数
- 全世界好老男人的女人都该去看“边境风云”(剧透慎入)
热门文章
- 二叉树计算叶子节点c语言报告,二叉树计算叶子节点的算法(数据结构)C语言版...
- 物流项目中Oracle 数据库的使用及OGG是如何同步
- Bose Soundlink Ⅲ在Lenovo Thinkcentre上的蓝牙连接
- 小程序 tabBar右上角 加标志 加数字提醒
- Base64及Base64Url的编码解码
- Arduino STC单片机远程升级(1)单机版 STC_OTA云端升级
- 秋季天凉 增强抵抗力防感冒
- House-GAN 论文阅读
- 飞蚁http代理:如何寻找爬虫入口?
- SQL实现新增表,表名更改,列名更改,约束更改等