vue封装js和引入外部js文件

最新推荐文章于 2024-05-05 21:19:02 发布
最新推荐文章于 2024-05-05 21:19:02 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/skr_Rany/article/details/105945031
版权
本文介绍了如何在Vue项目中进行JS文件的封装和外部JS库的引入。通过在src目录创建AA.js并从main.js导入，实现JS功能的封装。同时，展示了如何引入公共目录下如BB.js的JS文件到组件中使用。对于外部库如Mapboxgl或Cesium，将其放入public目录，并在index.html及vue.config.js中配置路径，以便在应用中按需引入。
摘要由CSDN通过智能技术生成

vue封装js和引入外部js文件

封装js

先在src目录下新建AA.js文件

export default {
   
    AA: function (maps) {
   
        return maps + 1
    }
}

在main.js文件里引入

import AA from '@/AA.js'
Vue.prototype.AA = AA

这样就可以在想用的组件里就行了
test.vue

console.log(this.AA.AA
最低0.47元/天 解锁文章
tyy_Rany
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue引用外部JS的两种种方法
10-15
主要介绍了vue引用外部JS的两种种方案,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
JavaScript封装方法并使用
simple5960的博客
10-11 685
1.新建一个JS文件，里面写要封装的方法 记得，如果要使用此方法，一定要把它暴露处去，然后在另外一个JS文件接收此暴露的方法就可以使用了 2.使用此封装的方法
vue 导入js中的方法
tenc1239的博客
07-11 8645
vue 导入自定义js文件中的变量方法
vue引用js文件的多种方式
最新发布
忧郁的蛋的专栏
05-05 969
(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。(4) 在main.js 引入就ok了 (测试这一步不用也可以)(2)在webpack.base.conf.js里加入。用到了es6的语法。
1.vue基础（一）引入vue.js
qq_41634943的博客
04-14 1万+
文章目录1.直接引入vue.js文件2.CDN3.注意事项（其中的小问题） 个人是跟着尚硅谷的课程做的笔记**** -----个人第一篇博客，纯是记录自己学习的过程，有哪些错误请各位大神指点---- 1.直接引入vue.js文件 <script type="text/javascript" src="../js/vue.js"></script> 文件在vue官网可以直接下载。 2.CDN <script src="https://cdn.jsdelivr.net/npm/v
vue中导入自己写的js
Wangxiaoming118的博客
06-09 4898
vue中导入自己写的js 第一步首先在公关的js文件下，建立自己的文件 把自己的js写在 export default { } 第二步在vue文件中导入 import drag from “…/assets/js/drag.js”; 第三步：在页面渲染后挂载 mounted(){ this.drag.drag1(); } ...
vue组件内部引入外部js文件的方法
11-21
本篇将详细介绍三种在Vue组件内部引入外部js文件的方法。 1. 操作DOM引入JS： 这是最简单直接的方式，通过在`mounted`生命周期钩子中动态创建`<script>`标签并将其插入到DOM中。这种方法的代码如下： ```...
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件，并通过JavaScript进行调用。 首先，我们需要了解Vue3中的Composition API。Vue3引入了Composition API，它允许我们在组件...
超级详细教程vue如何引用外部并使用Js文件的方法.docx
12-30
// 引入外部JS文件，由于使用了default导出，所以不需要{} export default { name: 'App', methods: { sayHello() { SDK.sayHello(); // 在methods中调用外部JS文件中的方法 } } }; ``` 在`<script>`部分...
vue如何导入外部js文件（es6）
热门推荐
胡世林的博客
07-29 7万+
vue 怎么倒入外部js文件
VUE项目中引入JS文件的几种方法
Carol的小星球
07-15 6万+
在开发Vue项目的时候，有时需要使用一些非ES6格式的没有export的js库，可以有如下方法实现: 1.在index.html页面使用script标签引入 当然也可以使用cdn的地址。这样引入后的内容是全局的，可以在所有地方使用。 <!DOCTYPE html> <html> <head> <title>Map</title> <meta charset="utf-8"> <meta
Vue组件中如何引入外部的js文件
qq_35271388的博客
06-16 2万+
Vue组件中如何引入外部的js文件
Vue 新手：在vue中引入外部的js文件
java新手的博客
01-09 1万+
在vue中如果把所有的代码都写到一个页面中，有时比较难找，显得比较复杂，所以一些js代码会写在外面的js文件中，然后引入到使用的页面中。 可以在src下新建一个文件夹去存这个js文件，例如：DateToString.js,一定要写export ，需要把模块抛出，让其他组件可以获取到。 export let DateToString = function (time) { var year = ...
ES6三种暴露方法详解
goutinga的博客
10-23 9840
多行暴露 导出 //a.js export function aa1(){ console.log('分别导出1'); } export function aa2(){ console.log('分别导出2'); } 导入 //index.js //解构赋值 import { aa1 , aa2 } from 'a.js' 统一暴露 导出 //b.js function bb1(){ console.log('综合导出1'); } function bb2(){ c
Vue 中如何引入第三方 JS 库，2024年最新从理论到实践
ZZdjajf13131的博客
04-10 907
主入口页面 index.html 中用script标签引入：这样，其实就已经可以在项目中使用 jQuery 了。我们来看一下 调试器 截图：可以看到，我们是可以正常打印出 jQuery 的。由于我的项目开启了 ESLint 检测，所以也会报一个。我们可以让 ESLint 不检查这一行：加了以后，就不会报那个警告了。二、绝对路径直接引入，配置后，import 引入后再使用第一种方法有一个弊端就是：我们每一个使用了的地方，都要再前面加上，这显然是不方便的。于是，我们有了第二种方法。
import 和 export
weixin_33806509的博客
10-16 480
1、export 命令 export 命令用于规定模块的对外接口。 一个模块就是一个独立的文件。该文件内部所有的变量，外部无法获取。要想外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。 语法： 1 export { name1, name2, …, nameN }; 2 export { variable1 as name1, variable2...
vue3 封装的函数怎么引入
07-28
要引入 Vue 3 封装的函数，您需要先确保已经安装了 Vue 3 的依赖，并创建了 Vue 3 的实例。然后，您可以在需要使用封装函数的组件中进行引入和调用。 以下是一个示例，演示如何引入 Vue 3 封装的函数： ```javascript // 导入 Vue 3 import { createApp } from 'vue'; // 导入封装的函数 import { myFunction } from './myFunction'; // 创建 Vue 3 实例 const app = createApp({ // 组件内容 }); // 注册全局方法 app.config.globalProperties.$myFunction = myFunction; // 挂载应用 app.mount('#app'); ``` 在上面的示例中，我们首先通过 `import` 语句导入了 Vue 3 的 `createApp` 方法和封装的函数 `myFunction`（假设 `myFunction` 是您自己定义的函数，位于 `./myFunction` 文件中）。 然后，我们使用 `createApp` 方法创建了一个 Vue 3 实例，并在实例的 `config.globalProperties` 中注册了全局方法 `$myFunction`，并将其设置为导入的 `myFunction` 函数。 最后，我们使用 `app.mount('#app')` 将应用挂载到指定的 HTML 元素上（假设该元素的 id 是 `app`）。 在组件中，您可以通过 `this.$myFunction()` 或 `this.$appContext.config.globalProperties.$myFunction()` 来调用封装的函数 `$myFunction`。 请注意，上述示例是使用 Vue 3 的 Composition API 的方式进行的，如果您使用的是 Vue 2，引入封装函数的方式可能会有所不同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值