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 ...
随机推荐
- [转帖]新一代IBM Z14主机技术介绍
新一代IBM Z14主机技术介绍 https://cloud.tencent.com/developer/news/268909 IBM最新的已经有IBM Z15 主机了.. 文章来源:企鹅号 - 云 ...
- Jmeter做HTTP接口测试
接口测试概述:https://www.cnblogs.com/mawenqiangios/p/7886115.html Jmeter接口测试教程:https://www.cnblogs.com/hou ...
- 【Polya计数】Buildings II
Buildings II 题目描述 As a traveling salesman in a globalized world, Alan has always moved a lot. He alm ...
- s5p6818 Overview
S5P6818: 64bit Octa-Core, High Performance, Advanced 3D Graphics, Full-HD Multimedia Video, A53 Core ...
- 怎样使用wordpress模板建站
这里仅整理一个思路, 日后会详细补充. 1. 首先得下载 wordpress安装包, 上传到服务器上的 /var/www/html, 然后解压. 2. 然后安装apache 并启动, 启动一般是使用: ...
- docker系列三之docker的安装
docker的安装 读者只需按照以下的命令一步步执行即可实现安装,笔者也只是将官网的步骤复制出来(笔者的环境为Centos7),详细请参考:https://docs.docker.com/instal ...
- 二叉树BinaryTree构建测试(无序)
此测试仅用于二叉树基本的性质测试,不包含插入.删除测试(此类一般属于有序树基本操作). //二叉树树类 public class BinaryTree { public TreeNode root; ...
- The openssl extension is missing, which means that secure HTTPS transfers are impossible
执行命令:curl -sS https://getcomposer.org/installer | php报错如下Some settings on your machine make Composer ...
- trape 一种识别工具
trape是一种识别工具,可以让你跟踪任何人,你可以得到的信息非常详细.通过去识别现有的网站所登录的用户,来追踪一个人的虚拟身份 如何使用它首先卸载工具.git clone https://githu ...
- Image Processing and Analysis_8_Edge Detection:Design of steerable filters for feature detection using canny-like criteria ——2004
此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...