vue项目中引入外部js的几种方式

最新推荐文章于 2024-09-18 21:51:14 发布
最新推荐文章于 2024-09-18 21:51:14 发布
阅读量5.7w 收藏 29
点赞数 12
分类专栏： 笔记 vue 总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linggty/article/details/90037743
版权
笔记 同时被 3 个专栏收录
18 篇文章 0 订阅
订阅专栏
总结
11 篇文章 0 订阅
订阅专栏
vue
2 篇文章 0 订阅
订阅专栏

全局使用

我在src目录下新建了api文件夹，里面有封装ajax请求的index.js文件
在这里插入图片描述
idnex.js的内容

在这里插入图片描述
将该模块export出去，然后在main..js文件中用import api from './api/index'导入该模块
最后使用Vue.prototype.$api = api;将其配置到全局即可
在组件中用this.$api.test()即可访问到test方法

组件中使用

在组件中用import api from './api/index'导入该模块
然后用api.test()就能访问到了

还有一种方式就是直接在index.html文件中直接使用<script></script>标签引入
例如

<script src="static/config.js"></script>

文件中的内容是
在这里插入图片描述
这时候就可以在任意地方使用window.config.apiUrl来访问需要访问的值了

CinseYoung
关注
专栏目录
vue引用外部JS的两种种方法
10-15
主要介绍了vue引用外部JS的两种种方案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
webpack+vue-cli项目中引入外部非模块格式js的方法
10-17
在这种情况下，我们有一种替代方案，那就是直接在webpack项目中引入外部的JavaScript文件。直接引入的方法一般分为几个步骤： 1. 首先，我们需要将外部的JavaScript文件引入到我们的项目中。这通常意味着需要将相应...
vue项目中引入外部css以及js文件的方法
热门推荐
若晨工作室
09-21 4万+
在使用vue做项目的时候，我们一般不将css样式写到各自的组件里，这样不仅会让代码冗余，而且不美观整洁。如果你定义了一些外部css文件，如何引入到vue组件中去呢？我们这里使用ES6的引入方式：  @import "../assets/common/common.css"; 那么JS文件如何引入呢？如果需要全局使用，则可以在main.js中引用并实例化对象： 部分js代码
Vue实战指南：Vue组件如何引用外部js
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-18 2047
在Vue.js应用开发中，有时候我们需要在组件内部引入外部JavaScript库或脚本文件来增强组件的功能。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。这里需要注意的是，由于ES模块（如上所示）和CommonJS规范（如Node.js中require()）的区别，确保你在正确的环境中正确地导入库。如果某个外部JS库只在一个特定的组件中使用，那么可以仅在这个组件中局部引入。如果你使用的是Vue CLI创建的项目，可以通过npm安装库，并在。
vue 引入外部js 方法
qq_45447091的博客
12-22 1728
外部js内容： 由于使用了echarts、axios、以及字体适配的js方法，内容如下： import echarts from 'echarts' import axios from 'axios' import nowSize from './nowSize' function makeGY_MapNew(){ // Code ... } export default makeGY_MapNew /*这步很重要，导出方法，在界面才能使用此方法*/ 在需要引入的vue界面中进行引入
Vue项目开发踩坑系列-引用js文件的方法
晴天小风的博客
08-06 677
Vue项目开发踩坑系列-引用js文件的方法 问题解析： 1.导入文件注意路径 2.js文件暴露接口必须卸载想要暴露的方法下面，不然会找不到对应的方法
vue组件内部引入外部js文件的方法
11-21
之所以要做这个是因为，在一个组件内部需要引入一个js文件来定位。如果放在index.html，这样每个组件都会有这个js。所以需要在组件内单独引入。 第一种操作 Dom引入js： export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '你的需要的js文件地址'; document.body.appendChild(s); }, } 第二种使用 createElement 方法： export default
vue引用外部js
w_t_y_y的博客
12-08 4209
新建一个js文件，如我的 export const list1 = [ { code: 'abc', id: 1 }, { code: 'def', id: 2 }, ]; export const list2 = []; export const list3 = []; 引用： import { list1 , list2,list3 } from '../common/module.js'; 注意imoprtt引进的内容不可以用this去指向，可以在data中定义一个变量，在钩子函数
VUE引入外部JS的方法
09-12 1087
在实际开发中会遇到需要引入外部JS的情况，使用在index.html里直接引入是可以的，但是无疑不是最好的选择，经过查阅各种资料，最后经过实际实验采用以下办法解决： 1、在vue文件里引入 <template> <div id="indentify-code"> <remote-js cdn="https://g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></remote-js> &lt
vue引入外部组件_vue组件内部引入外部js文件的方法
weixin_39739170的博客
12-19 1488
之所以要做这个是因为，在一个组件内部需要引入一个js文件来定位。如果放在index.html，这样每个组件都会有这个js。所以需要在组件内单独引入。第一种操作 Dom引入js：export default {mounted() {const s = document.createElement('script');s.type = 'text/javascript';s.src = '你的需要的j...
Vue 组件中如何引入外部的js文件 的10种方法
一步一个脚印，踏实努力，向着目标前进
08-30 2万+
原型链扩展，将外部的JavaScript文件扩展到Vue实例的原型链上，适用于多个组件都需要使用外部JavaScript文件的情况。这种方法可以将外部JavaScript文件的方法和属性混入到所有的Vue组件中，使得所有的组件都可以使用这些方法和属性。标签中使用插件的方式异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。方法，异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。语句的路径指定具体的文件位置。
Vue如何引入远程JS文件
10-19
Vue项目中引入远程JS文件的方法主要有以下几种： 1. 在Vue加载完DOM之后动态插入`<script>`标签。这是最直接的方法，可以在Vue的生命周期钩子函数`mounted`中执行JavaScript代码来动态创建并插入`<script>`标签。...
如何在vue项目中嵌入jsp页面的方法(2种)
10-15
无论是采用哪种方式，在将JSP页面嵌入Vue项目中时，需要注意以下几点： - 确保JSP页面能够被Vue项目访问，可能是通过配置跨域资源共享（CORS）。 - 如果JSP页面依赖特定的后端服务或数据库，请确保在Vue项目中能够...
vue中如何引入外部js
最新发布
10-01
在Vue.js中，你可以通过几种方式引入外部JavaScript文件： 1. **脚本标签**（推荐用于小量的、非库文件）： 在`<template>`或`<script>`标签外部直接使用`<script src="your-file.js"></script>`，将外部JS文件...
Vue组件中如何引入外部的js文件
前端队长Daotin
03-29 2万+
背景在Vue中，通常我们引入一个js插件都是使用npm方式下载然后import使用的。但是我现在本地有了js文件或者是一个远程js文件链接，我不想使用npm install xxx的方...
vue 引入js_Vue.js 引入外部js方法
weixin_39613208的博客
11-25 663
切图网专注web前端开发，在做vue开发的时候，难免有时候需要引用外部的JS文件，比如一个3级的地区数据，或者一个方法，或者一个JS类文件等等，下面介绍Vue.js 引入外部js方法，亲测有用。1、外部文件config.js第一种写法//常量的定义const config = {baseurl:’http://172.16.114.5:8088/MGT2′}//函数的定义function form...
vue实例中调用外部js_vue中引入外部js方法实例
weixin_39913105的博客
12-22 1930
我们在做vue项目时，经常会需要引入js,常用的有以下几种。本文主要和大家分享vue中引入外部js方法实例，希望能帮助到大家。第一种import XX from “路径”Vue.use(XX);这里的js文件要导出用export default {Vue.proprtypes.aa=function(){}}第二种js文件没有用export default{}直接就是纯方法解决：可以在main.j...
关于Vue下组件引入第三方外部Js几种方式
lixiaoyan93的博客
08-01 7590
第一种方式：利用Vue的mounted生命周期 const oScript = document.createElement('script'); oScript.type = 'text/javascript'; oScript.src = '//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js'; document.body.appendChild(o...
vue组件内引入外部js, 外部js调用组件内的方法
二十一克阳光！的博客
10-19 1万+
test.js 为主js文件，里面引入了a.js和b.js文件 2.2 module.exports 导出方法 3. vue 组件中使用 3.1 引入test.js文件 3.2 在methods中定义方法调用 4. 外部js调用vue组件中的方法 此处分为两种可能： 4.1.2 外部js方法中接受参数 test.js 组件中定义test1()方法 4.2 方式二 4.2.1 方法赋值给window vue中组件： 4.2.2 window调用 外部js文件test.js: 使用 window.te
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值