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. 如何安装Oracle--新手安装Oracle教程

    1. 将win32_11gR2_database_1of2.zip与win32_11gR2_database_1of2.zip 解压到当前目录 PS:选中两个压缩包后右键解压到当前文件夹:必须同时解压 ...

  2. HTML 是什么？

    HTML 指的是超文本标记语言(英语:HyperText Markup Language),是用来描述网页的一种语言. HTML 不是一种编程语言,而是一种标记语言,它有一套标记标签 . HTML 使 ...

  3. 利用Python进行数据分析_Pandas_数据清理、转换、合并、重塑

    1 合并数据集 pandas.merge pandas.merge(left, right, how='inner', on=None, left_on=None, right_on=None, le ...

  4. c++学习---vector

    vector存放类型不同,{}有些区别-: vector的size的返回类型: push_back的使用: 要防止缓冲区溢出,使用范围for语句:

  5. asp.net core-3.应用程序部署到iis

    asp.net core在部署到iis 上的时候,iis服务器要装一个AspNetCoreModule,网站—>模块  具体下载地址可以去网上搜索https://www.nuget.org/pa ...

  6. IDEA整合Jenkins界面化管理项目构建

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/WALK_MAN_wubiao/articl ...

  7. CSS3中三种清除浮动（float）影响的方式

    float是HTML中布局的一大关键,很多难题一旦用上float都能很愉快地解决.但是凡是好用的,也容易出错.比如当子元素都为float时,其父元素会受影响,或者偶尔会发现自己某个div的高度变成了0 ...

  8. （五）Activiti之获取流程定义图片和流程定义删除

    一.获取流程定义图片 /** * 通过流程部署ID获取流程图图片 */ @Test public void getImageById()throws Exception{ InputStream in ...

  9. .NET Core api部署到IIS上405的问题

    今天部署到iis 服务器上,api的put请求一直报405.其他像get post都没问题. google了半天,找到两种解决方案,亲测都可以.但我个人认为不是最理想的解决方案. 1.IIS拒绝PUT ...

  10. web服务器端挖矿代码攻击的错误检测及排除

    a)挖矿代码简要阐述: 网页中嵌入Javascript, 一旦用户打开该网站,浏览器便会按照脚本的指令变成一个门罗币挖矿机.这一段附加的挖矿代码通常因为大量占用CPU,使用户的计算机变得异常卡顿甚至无 ...