当前栏目
Vue组件中如何引入外部的js文件
https://zhuanlan.zhihu.com/p/379504188
背景
在Vue中,通常我们引入一个js插件都是使用npm 方式下载然后import使用的。但是我现在本地有了js文件或者是一个远程js文件链接,我不想使用npm install xxx 的方式,有什么办法吗?
方式一
简单粗暴,直接在Vue项目的index.html 中使用全局的方式引入,比如:
<title>测评</title>
<link type="text/css" href="//at.alicdn.com/t/font_43459_d124thd3lgu.css" rel="stylesheet">
{{ie9 /resources/js/history.min.js}}
// 暴力引入 缺点:不使用该js插件的组件也会加载,而我只想在某个Vue组件中使用该js插件。
方式二
如果是下载到本地的静态文件,可以使用import 的方式导入。
import { xxx } from ‘…/js/xxx.js’ //注意路径
缺点:下载的本地静态文件才可以,远程js文件不可以。
方式三
在Vue组件加载完后,手动操作DOM插入js插件。
export default {
mounted() {
let script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.src = ‘你的js文件地址’;
document.body.appendChild(script);
},
}
该方式直接操作DOM,只在当前组件插入js插件。
方式四
使用render方法。
export default {
components: {
‘xxx-js’: {
render(createElement) {
return createElement(
‘script’,
{
attrs: {
type: ‘text/javascript’,
src: ‘你的js文件地址’,
},
},
);
},
},
},
}
// 使用 在页面中调用
使用的时候,使用 在页面中调用。
方式五
高阶玩法。将方式三包装成一个js插件,使用 Promise,js加载成功,调用resolve,js加载失败,调用reject。
function loadJs(src) {
return new Promise((resolve,reject)=>{
let script = document.createElement(‘script’);
script.type = “text/javascript”;
script.src= src;
document.body.appendChild(script);
script.onload = ()=>{
resolve();
}
script.onerror = ()=>{
reject();
}
})
}
export default loadJs
使用的时候:
import loadJs from ‘./loadJs’
export default {
mounted(){
loadJs(‘http://api.map.baidu.com/xxx.js’).then(()=>{
// 加载成功,进行后续操作
})
}
}
方式六
更高阶方式。可以动态替换要加载的js文件。
包装一个importJs.js 插件。
// 导入外部js
import Vue from ‘vue’
Vue.component(‘remote-script’, {
render: function (createElement) {
var self = this;
return createElement(‘script’, {
attrs: {
type: ‘text/javascript’,
src: this.src
},
on: {
load: function (event) {
self.KaTeX parse error: Expected 'EOF', got '}' at position 30: …vent); }̲, error…emit(‘error’, event);
},
readystatechange: function (event) {
if (this.readyState == ‘complete’) {
self.$emit(‘load’, event);
}
}
}
});
},
props: {
src: {
type: String,
required: true
}
}
});
使用方式:
// 引入
import ‘common/importJs.js’
// html使用的地方
(完)
相关文章
- 大前端开发中的路由管理之五:Flutter篇
- Javascript的DOM操作
- 在Vue项目中使用WebSocket技术
- 新手向:前端程序员必学基本技能——调试JS代码
- React 毁了 Web 开发!
- 「JS 逆向百例」cnki 学术翻译 AES 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营
- 网站建设如何选择储存空间 选择空间要考虑什么因素
- 如何建设网站后端 前端跟后端的区别是什么
- 如何用html建设网站 html网站建设需要用什么工具
- 如何自学网站建设 网站建设公司靠谱吗
- 自导自演的内在图像分解网络考虑反射一致性
- React & Ant Design Table组件自定义单元格文字颜色
- 利用Com组件绕过UAC
- Rust 是 JavaScript 基础设施的未来
- npm现代前端开发的基石,共享代码从此不再用百度下载了
- 死生之地不可不察:论API标准化对Dapr的重要性