vue中引入外部js文件

最新推荐文章于 2024-05-24 09:31:07 发布
最新推荐文章于 2024-05-24 09:31:07 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： 个人总结 文章标签： vue引入js文件 vue引入外部文件 vue引入插件 vue 添加外部插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chris__wang/article/details/102814499
版权

一些小js插件可能无法通过npm安装，需要我们手动进行引入，这里以zoom.js插件为例（一个弹框插件，无需关心插件干嘛的）

下面是插件源码，里面是一个封装好的函数

 常规html页面调用

下面就是如何在vue中引入了

1. 首先改一下zoom源码   加上export 

 

2. 然后在需要用到的.vue组件中引入，我这里common路径是配好的相对路径

3. 然后就可以像上图一样使用了

注意：如果想要全局使用，那么引入方法要改变一下，在main.js中引入，然后使用的时候就不能直接zoom了   需要用this.$zoom，当然这个$zoom名字是挂载的时候我自定义的

Chris__Wang
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 组件中如何引入外部的js文件 的10种方法
一步一个脚印，踏实努力，向着目标前进
08-30 2万+
原型链扩展，将外部的JavaScript文件扩展到Vue实例的原型链上，适用于多个组件都需要使用外部JavaScript文件的情况。这种方法可以将外部JavaScript文件的方法和属性混入到所有的Vue组件中，使得所有的组件都可以使用这些方法和属性。标签中使用插件的方式异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。方法，异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。语句的路径指定具体的文件位置。
Vue项目中如何引用外部js
08-23 356
第一种方法：（感觉这个有问题） 1、把需要的js放到static文件夹下 2、在Index.html页面引入 3、在webpack.base.conf.js添加下面代码 externals: { 'WdatePicker': 'WdatePicker' }, 4、vue组件里面引入 import WdatePicke...
vue组件内引入外部js, 外部js调用组件内的方法
最新发布
springdk2009的博客
05-24 946
方式一：vue组件中的方法先调用外部js 中的方法，外部js再调用vue组件中其它方法。test.js 为主js文件，里面引入了a.js和b.js文件。外部js文件test.js: 使用 window.test2()调用。vue组件中引入外部js,并调用外部js 中的方法。方式二：外部js直接调用vue组件中的方法。外部js 中调用vue组件中的方法。5. 外部主js文件调用其它js中的方法。5.3 调用a.js和b.js文件方法。4. 外部js调用vue组件中的方法。5.1 引入a.js和b.js文件。
【vue引用外部JS,并调用JS文件中的方法】
qq_39236283的博客
12-09 6786
vue引用外部JS,并调用JS文件中的方法
Vue组件中如何引入外部的js文件
qq_44091061的博客
06-09 4626
Vue组件中如何引入外部的js文件
vue组件内部引入外部js文件的方法
11-21
在Vue.js应用中，有时我们需要在特定的组件内部引入外部JavaScript文件，而不是全局引入。这样做的好处是可以避免不必要的资源加载，提高应用性能。本篇将详细介绍三种在Vue组件内部引入外部js文件的方法。 1. 操作...
Vue如何引入远程JS文件
10-19
本篇文章主要介绍了Vue引入远程JS文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中引入样式文件的方法
08-29
在 index.html 模板文件中，我们可以使用 `<link>` 标签引入外部的样式文件。这种方式引入的样式文件将被编译到生成的 HTML 文件中。如果我们想要通过 `<link>` 标签引入外部的样式文件，这种方式是非常适合的。 ...
vue 引入外部js 方法
qq_45447091的博客
12-22 1667
外部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文件并使用方法超级无敌详细的教程
danxinlong的博客
12-16 7506
Vue引入外部Js文件 使用新的js文件里面的一个方法，提高复用性。 步骤： 1）：在新的js文件中写入新方法，如： （1）图 2）：在需要引入的xxx.vue文件中写上 import 别名 from ‘Js路径’; 这个别名是否需要加花括号，如：Import {别名} from ‘Js路径’; 需要参考新的js文件中，如(1)图的kayang-app-sdk.js中的 （2）图 （3）图 注：因为我这里是export default所以引入的
在vue组件中引入外部js
qq_42894622的博客
05-17 3481
方法1： // 先定义这么个组件 export default { components: { 'remote-js': { render(createElement) { return createElement('script', { attrs: { type: 'text/javascript', src: this.src }}); }, props: {...
Vue引入外部如何引入外部js文件
weixin_33939843的博客
12-28 2816
vue项目中直接引入在index.html引入static中的js文件往往会报错,如下图： 故解决方法如下： 1、在main.js中写入如下代码： Import Vue form 'vue' Vue.component(‘external-script’,{ Render :function(createElement){ var _this = this; ...
vue和原生组件的交互jsBridge.js
weixin_44091311的博客
09-23 1030
vue和原生组件的交互jsBridge.js jsBridge.js let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1; let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //这是必须要写的，用来创建一些设置 function setupWe
vue引用js文件的多种方式(推荐)
热门推荐
weixin_39885843的博客
02-12 2万+
1、vue-cli webpack全局引入jquery (1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。) (2)在webpack.base.conf.js里加入 var webpack = require("webpack") (3)在module.expo...
Vue项目中如何引入外部js文件，并使用其中定义的函数
eachanm的博客
04-19 1059
https://blog.csdn.net/weixin_44670973/article/details/90552796
vue 项目npm run dev如何访问static文件夹外的静态资源
天蚕土豆丝的博客
05-29 7085
npm run dev的时候会走package.json对应的命令 看dev-server.js文件，里面启动了一个服务，项目是通过localhost:8080形式访问，这时候index.html里引入的静态资源必须是在已启动服务配置的目录中，才能成功访问。 不像本地点击打开一个index.html文件可以随意引用本地的静态js,启动服务访问的项目不支持访问本地的静态资源，应该是一种安全机制。 下面图解 app.use提供了一个静态资源文件的服务，使用Express内置的中间函数express.stati
vue页面引入外部js文件
04-24
可以使用以下代码在vue页面中引入外部js文件： 1. 在vue文件中先引入该外部js文件： ```javascript import 'path/to/external/js/file.js'; ``` 2. 在`mounted()`生命周期函数中使用该js文件中的方法或变量： ``...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值