Vue引入非npm的js库
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库的更多相关文章
- vue引入自己写的js文件
		
话不多说,直接上代码呀~ 先来个结构图: 中规中矩的vue-cli就写了一个自己的js文件 那么我想要引入到vue组件里. 1.首先写我的js文件 2.引入到vue组件!!!一定要用{}把方法名拿过来 ...
 - vue引入iconfont阿里字体图标库以及报错解决
		
下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader) ,记得--save ...
 - babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
		
我遇到了一个问题,我在已经配置babel的项目中通过require引入了一个项目目录外层的另一个js文件,前期是可以成功转换并打包的,但是到了后期就不行了,报错: 这个报错的意思是,引入的js文件中有 ...
 - vue引入外部css和js
		
<template> <div id="app" > </div> </template> <script src=" ...
 - 前端之Vue.js库的使用
		
vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...
 - 16、vue引入echarts,划中国地图
		
vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...
 - 必备技能六、Vue框架引入JS库的正确姿势
		
在Vue.js应用中,可能需要引入Lodash,Moment,Axios,Async等非常好用的JavaScript库.当项目变得复杂庞大,通常会将代码进行模块化拆分.可能还需要跑在不同的环境下,比如 ...
 - Vue引入第三方JavaScript库和如何创建自己的Vue插件
		
一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件,只能用 import 引入 有两种用法: 1.import a from '../a' 2.import ...
 - 在Vue将第三方JS库封装为组件使用
		
第三方JS库地址:https://github.com/inorganik/CountUp.js 使用NPM进行安装: npm install --save countup 根据官方回答,CountU ...
 
随机推荐
- 给出一个javascript的Helloworld例子
			
1.基础知识:Helloworld:例 1.1<html><head> <!-- 如果你用notepad建立一个txt之后你再改为html,一定在存时,要存成ut ...
 - Word 双栏排版最后多一页空白页删不掉、左栏文字没写完就到右栏了
			
1. 问题 问题:Word双栏排版,最后多一页空白页,删不掉.如图: 原因分析:删不掉是因为末尾文字处其实有个下一页分节符,只不过可能看不到. 如何清晰的看到? 视图 > 大纲,就可以看到了.如 ...
 - k8s集群监控 cadvisor/exporter+prometheus+grafana
			
### k8s监控处理 ### 1.cadvisor/exporter+prometheus+grafana 安装#### 1.1 配置nfs安装```shellubuntu: nfs 服务器 apt ...
 - StarUML3.1.0版(2019.3.6)生成Java代码
			
下载官网 StarUML3.1.0(2019.3.6) 步骤 打开StarUML: 点击菜单栏的Tools: 列表中如果有Java,说明已经有这个生成Java代码的扩展了: 列表里如果没有Java: ...
 - Python开发【第五章】:常用模块
			
一.模块介绍: 1.模块定义 用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质上就是.py结尾python文件 分类:内置模块.开源模块.自定义模块 2.导入模块 本质:导 ...
 - B-JUI文档、下载
			
概述 特别说明 本文档仅适用于最新版的B-JUI,网站首页或下载页可以查看B-JUI的最后更新时间. B-JUI前端管理框架适用于快速开发各类WEB管理系统,可与任意后端程序(java.php..ne ...
 - BOM与DOM的区别与联系
			
一.BOM与DOM的区别 1.BOM(Browser Object Model) BOM 即浏览器对象模型,BOM没有相关标准,BOM的最核心对象是window对象.window对象既为javascr ...
 - 利用jwt生成token,用于http请求身份验证
			
前段时间在做移动端接口过程中,考虑到安全性,所有移动端发送请求(除了登录请求)过程中进行token有效验证. 1.利用jwt生成token a.导入jwt相关包 <!-- jwt --> ...
 - javadoc 自动生成java帮助文档
			
用法: javadoc [options] [packagenames] [sourcefiles] 选项: -public 仅显示 public 类和成员 -protected 显示 protect ...
 - Ubuntu 14.04 64位机上不带CUDA支持的Caffe
			
Caffe是一个高效的深度学习框架.它既可以在CPU上执行也可以在GPU上执行. 下面介绍在Ubuntu上不带CUDA的Caffe配置编译过程: 1. 安装BLAS:$ sudo apt-g ...