VUE项目中引入JS文件的几种方法

最新推荐文章于 2024-08-09 16:29:17 发布
最新推荐文章于 2024-08-09 16:29:17 发布
阅读量6.8w 收藏 79
点赞数 12
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixinyi0622/article/details/107361493
版权

在开发Vue项目的时候，有时需要使用一些非ES6格式的没有export的js库，可以有如下方法实现:

1.在index.html页面使用script标签引入

当然也可以使用cdn的地址。这样引入后的内容是全局的，可以在所有地方使用。

<!DOCTYPE html>
 <html>
	<head>
      	<title>Map</title>
      	<meta charset="utf-8">
      	<meta name="viewport" content="width=device-width,initial-scale=1.0">
      	<link rel="shortcut icon" type="image/x-icon" href="./static/img/favicon.ico"/>
      	<script src='./static/libs/three/three.min.js'></script>
      	<script src="./static/libs/three/GLTFLoader.js"></script>
   	</head>
   <body>
     	<div id="app"></div>
     	<!-- built files will be auto injected -->
   </body>
</html>

2.在main.js中使用window.moduleName 使用

也可以放入Vue.prototype中，这样组件内都可以使用。

var THREE = window.THREE
var GLTFLoader = THREE.GLTFLoader
Vue.prototype.THREE = THREE

3.手动添加export

为js库中需要使用的方法放入export default { /**要导出的方法**/}，然后通过import {*} from 使用

在JS库中：

function realconsole(){  
    alert("hello world!");  
}  
 export {  
     realconsole
 }

在需要使用JS库的组件中：

import realconsole from './xxx'

4. 使用import方式，把需要的js库中的方法挂载到全局

如下：

 import '@static/libs/GLTFLoader' 
 // 可以从全局获取导入的方法 
 let GLTFLoader = THREE.GLTFLoader
Carol小朋友
关注
专栏目录
vue引入静态js文件的方法
10-15
主要介绍了vue引入静态js文件的方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue引入js
qq_33304139的博客
08-27 563
1.引入自己定义的 js 如下存在这样一个两个方法的js文件 下面这个js文件分为两部分，主要为方法部分，和导出部分即export部分，只有这样才能被其他vue组件所调用 1.1 js代码如下 //定义的常量 const config = { baseurl:'http://172.16.114.5:8088/MGT2' } //定义的方法 function getTest2() { var elm=document.getElementById("text"); elm.innerHTML="
vue3+vite+ts 引入静态js，避免使用全局变量报错
最新发布
sinat_37746420的博客
08-09 578
在你的 Vue3+Vite 项目中，通过 HTML 引入一个本地第三方 JS 文件，该文件暴露了一个rap全局变量。
Vue引入项目的五种方式
weixin_46826601的博客
03-16 1636
Vue引入项目的五种方式 参考文档 Vue 安装 Vue.js 添加到项目中有三种主要方式： CDN package的形式导入 插件形式引入 npm 安装 CLI构建 1. CDN package的形式导入 Vue 2.6.12版本安装 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> Vue 3.0.4版本安装 <script src="https://unpkg.com/v
Vue 中如何引入第三方 JS 库
热门推荐
热爱思考、活力满满、开朗爱笑的年轻人
12-13 9万+
一绝对路径直接引入全局可用 二绝对路径直接引入配置后import 引入后再使用 三webpack中配置 aliasimport 引入后再使用 四webpack 中配置 plugins无需 import 全局可用 结论 我们以 jQuery 为例，来讲解 一、绝对路径直接引入，全局可用 主入口页面 index.html 中用 script 标签引入： script src
vue中引入js脚本块或者js文件 js函数 js方法
global_coding的博客
05-23 1462
vue中引入js脚本块或者js文件 js函数 js方法
vue引用js文件的多种方式
weixin_42582611的博客
02-23 1万+
(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的语法。
vue 导入js中的方法
tenc1239的博客
07-11 8912
vue 导入自定义js文件中的变量方法
Vue 组件中如何引入外部的js文件 的10种方法
一步一个脚印，踏实努力，向着目标前进
08-30 2万+
原型链扩展，将外部的JavaScript文件扩展到Vue实例的原型链上，适用于多个组件都需要使用外部JavaScript文件的情况。这种方法可以将外部JavaScript文件的方法和属性混入到所有的Vue组件中，使得所有的组件都可以使用这些方法和属性。标签中使用插件的方式异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。方法，异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。语句的路径指定具体的文件位置。
Vue.js快速入门 (cdn引入)
qq15035899256的博客
05-14 1万+
本文是对Vue的学习，重点帮助大伙完成从早期基于Dom开发，到Vue中基于数据开发的编程思路转换，除了Vue的基础语法之外，还包含了网络请求库axios的基本使用，中间穿插着5个精心设计的案例。之后的学习内容将持续更新！！！
Vue如何引入远程JS文件
10-19
Vue项目中引入远程JS文件的方法主要有以下几种： 1. 在Vue加载完DOM之后动态插入`<script>`标签。这是最直接的方法，可以在Vue的生命周期钩子函数`mounted`中执行JavaScript代码来动态创建并插入`<script>`标签。...
详解Vue.js中引入图片路径的几种方式
10-16
以下是几种常见的Vue.js中引入图片路径的方法： 1. 相对路径引用：这是最直接和简单的方法。通过使用以点（.）开始的相对路径，如 "./" 或 "../"，在JavaScript中导入资源或者在template/CSS中引用资源。这种引用...
详解VUE中常用的几种import（模块、文件）引入方式
08-27
下面是详解Vue中常用的几种import引入方式。 1. 引入第三方插件 在Vue项目中，我们经常需要引入第三方插件，例如 echarts、lodash 等。引入第三方插件可以使用以下方式： ```javascript import echarts from '...
如何在vue项目中嵌入jsp页面的方法(2种)
10-15
在介绍如何在Vue项目中嵌入JSP页面的方法之前，首先要了解Vue.js和JSP各自的基本概念和它们之间的关系。 Vue.js是一个渐进式JavaScript框架，用于构建用户界面。它允许开发者通过组件化的方式开发复杂的单页应用...
webpack+vue-cli项目中引入外部非模块格式js的方法
10-17
在使用webpack+vue-cli构建的项目中，有时候我们需要引入的JavaScript资源并不是标准的模块格式，可能是某个特定场景下产生的脚本文件，比如老版本的插件或者库文件。这类资源在现代JavaScript模块化开发中可能会...
在vue2中引入一个js文件, 在模版中不能使用js中的变量解决
fxshy的博客
07-19 499
在vue2中引入一个js文件, 在模版中不能使用js中的变量解决
vue 如何引入静态js资源，例如jquery之类的
PrimaryColor
07-19 7686
步骤一、存放js文件。 静态js文件一般是存放在public目录下，为了结构明确，可以新建一个js文件夹，专门存放js文件，然后把需要引入的js文件放在该目录下，如图。 步骤二、引入js。 引入js文件必须在public下的index.html文件引入。示范： <script type="text/javascript" src="<%= BASE_URL %>js/jquery.3.2.1.min.js"></script> 其中“<%= BAS.
vue index.html 引入js,vue引入js文件有哪几种方法
05-20
Vue 引入 JS 文件的方式有以下几种： 1. 在 index.html 中使用 script 标签引入外部 JS 文件： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue App</title> </head> <body> <div id="app"></div> <script src="/path/to/vue.js"></script> <script src="/path/to/app.js"></script> </body> </html> ``` 2. 使用 Webpack 等构建工具打包 JS 文件，并在 Vue 组件中使用 import 引入： ```javascript import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', render: h => h(App) }); ``` 3. 在 Vue 组件中使用 require 引入外部 JS 文件： ```javascript export default { mounted() { require('/path/to/plugin.js'); // 或者 require(['/path/to/plugin1.js', '/path/to/plugin2.js'], function() { // 回调函数 }); } }; ``` 以上三种方式均可在 Vue 项目中引入外部 JS 文件。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值