Vue项目有时候需要一些没有使用export的js库,不能通过import * from ./***"引入,那么可以有如下方法如下

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 使用

4. 直接使用import 'url' 方式,把需要的js库中的方法挂载到全局,如下:

 import '@static/libs/GLTFLoader'
// 可以从全局获取导入的方法
let GLTFLoader = THREE.GLTFLoader

Vue引入非npm的js库的更多相关文章

  1. vue引入自己写的js文件

    话不多说,直接上代码呀~ 先来个结构图: 中规中矩的vue-cli就写了一个自己的js文件 那么我想要引入到vue组件里. 1.首先写我的js文件 2.引入到vue组件!!!一定要用{}把方法名拿过来 ...

  2. vue引入iconfont阿里字体图标库以及报错解决

    下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save ...

  3. babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效

    我遇到了一个问题,我在已经配置babel的项目中通过require引入了一个项目目录外层的另一个js文件,前期是可以成功转换并打包的,但是到了后期就不行了,报错: 这个报错的意思是,引入的js文件中有 ...

  4. vue引入外部css和js

    <template> <div id="app" > </div> </template> <script src=" ...

  5. 前端之Vue.js库的使用

    vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...

  6. 16、vue引入echarts,划中国地图

    vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...

  7. 必备技能六、Vue框架引入JS库的正确姿势

    在Vue.js应用中,可能需要引入Lodash,Moment,Axios,Async等非常好用的JavaScript库.当项目变得复杂庞大,通常会将代码进行模块化拆分.可能还需要跑在不同的环境下,比如 ...

  8. Vue引入第三方JavaScript库和如何创建自己的Vue插件

    一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...

  9. 在Vue将第三方JS库封装为组件使用

    第三方JS库地址:https://github.com/inorganik/CountUp.js 使用NPM进行安装: npm install --save countup 根据官方回答,CountU ...

随机推荐

  1. [转帖]新手必读,16个概念入门 Kubernetes

    新手必读,16个概念入门 Kubernetes https://www.kubernetes.org.cn/5906.html 2019-09-29 22:13 中文社区 分类:Kubernetes教 ...

  2. 【CodeForces】868F. Yet Another Minimization Problem

    原题链接 题目大意是有N个数,分成K段,每一段的花费是这个数里相同的数的数对个数,要求花费最小 如果只是区间里相同数对个数的话,莫队就够了 而这里是!边单调性优化边莫队(只是类似莫队)!而移动的次数和 ...

  3. (十)EL表达式和JSTL标签快速入门

    目录 什么是 el 表达式 示例:使用EL表达式获取pageContext .request.session.application域中的数据: 示例:使用EL表达式获取Bean属性 获取当前WEB应 ...

  4. ubuntu 上不了网,解决方案之一

    每个人的情况可能不同,我的情况是由于强制关机网卡坏了,网络没有自动分配ip,ens33网卡没有ip,这时得手动启动命令 sudo dhclient 来自动获取ip地址.这里要感谢这篇博客,让我意识到自 ...

  5. PHP的 parse_ini_file 解析配置文件

    解析配置文件: parse_ini_file 类似解析php.ini文件样 配置文件内容如下: Example #1 sample.ini 的内容 ; This is a sample configu ...

  6. 少儿编程 | 02.Scratch编程环境

    上次课程介绍了Scratch的基本概念和一些特点,最后还给出了一些有趣的例子.本次课程介绍Scratch的两种编程环境以及在Scratch官网注册个人账号的步骤. Scratch 3.0的两种编程环境 ...

  7. node 和 postgres

    安装 npm i pg ,如果慢的话,记得爬梯子 连接池的方式: var pg = require('pg'); // 数据库配置 var config = { user:"postgres ...

  8. JS 长按 移动端

    实质上,长按的时间不应该过长,因为这有可能与手机系统的部分长按手势产生冲突,但也不宜过短,因为长按时间过短与点击没有任何区别, 理论上,判断长按结束,在手机端上仅设置mouseup动作就可以, < ...

  9. 媲美pandas的数据分析工具包Datatable

    1 前言 data.table 是 R 中一个非常通用和高性能的包,使用简单.方便而且速度快,在 R 语言社区非常受欢迎,每个月的下载量超过 40 万,有近 650 个 CRAN 和 Biocondu ...

  10. insert buffer/change buffer double write buffer,双写 adaptive hash index(AHI) innodb的crash recovery innodb重要参数 innodb监控

    https://yq.aliyun.com/articles/41000 http://blog.itpub.net/22664653/viewspace-1163838/ http://www.cn ...