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

最新推荐文章于 2024-07-18 18:06:55 发布
最新推荐文章于 2024-07-18 18:06:55 发布
阅读量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
关注
  • 12
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue父子组件数据、方法
qq_43531886的博客
09-24 193
父组件 <template> <div> <navigationBar :listdata="list" :toIndex="Index"></navigationBar> </div> </template> 父组件要传递的 data() { return { list: [ { name: "导航一", url: "/login" }, { name: "
webpack+vue-cli项目中引入外部非模块格式js的方法
10-17
在这种情况下，我们有一种替代方案，那就是直接在webpack项目中引入外部的JavaScript文件。直接引入的方法一般分为几个步骤： 1. 首先，我们需要将外部的JavaScript文件引入到我们的项目中。这通常意味着需要将相应...
Vue 中如何引入第三方 JS 库(1)，干货满满
m0_59117112的博客
03-18 1285
其他知识点面试webpack的原理webpack的loader和plugin的区别？怎么使用webpack对项目进行优化?防抖、节流浏览器的缓存机制描述一下二叉树, 并说明二叉树的几种遍历方式?项目类问题技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
在Vue中全局引入JS文件的方法
最新发布
qq_45687669的博客
07-18 528
被引入的js文件位置需要放在public/路径下面。
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 4185
新建一个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 方法
qq_45447091的博客
12-22 1684
外部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的方法
09-12 1066
在实际开发中会遇到需要引入外部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 1445
之所以要做这个是因为，在一个组件内部需要引入一个js文件来定位。如果放在index.html，这样每个组件都会有这个js。所以需要在组件内单独引入。第一种操作 Dom引入js：export default {mounted() {const s = document.createElement('script');s.type = 'text/javascript';s.src = '你的需要的j...
vue引用外部JS的两种种方法
10-15
Vue.js作为一种流行的前端框架，允许开发者通过多种方式在项目中引用外部JavaScript库或者自定义脚本。在本文中，将介绍在Vue项目中引用外部JavaScript文件的两种常见方法，并解释它们各自的使用场景和优势。 方法...
Vue如何引入远程JS文件
10-19
Vue项目中引入远程JS文件的方法主要有以下几种： 1. 在Vue加载完DOM之后动态插入`<script>`标签。这是最直接的方法，可以在Vue的生命周期钩子函数`mounted`中执行JavaScript代码来动态创建并插入`<script>`标签。...
vue动态加载外部依赖js代码实现
11-19
本文档把js加载做成vue组件，便于在其他模块引用，符合vue整体思路，供大家参考借鉴
如何在vue项目中嵌入jsp页面的方法(2种)
10-15
无论是采用哪种方式，在将JSP页面嵌入Vue项目中时，需要注意以下几点： - 确保JSP页面能够被Vue项目访问，可能是通过配置跨域资源共享（CORS）。 - 如果JSP页面依赖特定的后端服务或数据库，请确保在Vue项目中能够...
vue.js 下载，引入vue.js 本地开发
05-18
引入Vue.js到本地项目中，有以下几种常见方法： 1. **HTML 文件内直接引用**：在HTML文件的`<head>`标签内添加如下代码，替换`version`为实际下载的Vue.js版本号： ```html <script src="path/to/vue.js"> ``` ...
Vue 组件中如何引入外部的js文件 的10种方法
热门推荐
一步一个脚印，踏实努力，向着目标前进
08-30 2万+
原型链扩展，将外部的JavaScript文件扩展到Vue实例的原型链上，适用于多个组件都需要使用外部JavaScript文件的情况。这种方法可以将外部JavaScript文件的方法和属性混入到所有的Vue组件中，使得所有的组件都可以使用这些方法和属性。标签中使用插件的方式异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。方法，异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。语句的路径指定具体的文件位置。
vue 引入js_Vue.js 引入外部js方法
weixin_39613208的博客
11-25 648
切图网专注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 1911
我们在做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 7560
第一种方式：利用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
前端js文件怎么引入vue脚手架
08-19
你可以通过两种方式引入Vue脚手架。一种是将Vue作为一个模块进行引入，这需要使用构建工具（如webpack）来加载模块，并在源码中使用require('vue')来引入Vue模块。另一种方式是直接在HTML文件中使用<script>标签引入vue.js文件，这样就可以直接使用全局的Vue变量，而不需要构建工具。 在前端JS文件中引入Vue脚手架可以通过以下两种方式实现： 1. 使用模块化的方式引入Vue：通过安装Vue的包管理器，如npm，在你的前端JS文件中使用require或import语句来引入Vue模块。例如： ``` const Vue = require('vue'); // 或者 import Vue from 'vue'; ``` 2. 直接在HTML文件中引入Vue：在你的HTML文件中使用<script>标签来引入vue.js文件。例如： ``` <script src="path/to/vue.js"></script> ``` 以上两种方式都可以让你在前端JS文件中使用Vue脚手架来编写代码。选择哪种方式取决于你的项目需求和个人偏好。如果你需要更复杂的工程化管理和依赖管理，建议使用模块化的方式引入Vue脚手架。如果你只是需要快速搭建一个简单的页面或应用，可以直接在HTML文件中引入Vue脚手架。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [前端引入vue.js和使用vue脚手架的区别？](https://blog.csdn.net/weixin_44226391/article/details/125742696)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值