Vue引入非npm的js库

最新推荐文章于 2023-09-08 22:31:29 发布
最新推荐文章于 2023-09-08 22:31:29 发布
阅读量2k 收藏 1
点赞数
文章标签： javascript webpack ViewUI
原文链接：http://www.cnblogs.com/jyughynj/p/11225398.html
版权

Vue引入非npm的js库

Vue项目有时候需要一些没有export的js库，不能通过import引入，那么使用方法如下

1.可以在index.html页面使用script标签引入，当然也可以使用cdn的地址。

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

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

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

1 var THREE = window.THREE
2 var GLTFLoader = THREE.GLTFLoader
3 Vue.prototype.THREE = THREE

 

转载于:https://www.cnblogs.com/jyughynj/p/11225398.html

weixin_30686845
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue wps插件引入到前端项目js
06-30
将WPS插件引入Vue.js项目，首先需要确保项目环境已经准备就绪，包括Node.js、Vue CLI（Vue命令行工具）以及相关依赖库。步骤如下： 1. **安装Vue CLI**：如果尚未安装，可以通过命令行运行`npm install -g @vue/cli...
vue3-npm最基础的vue3文件
03-21
npm（Node Package Manager）是JavaScript的包管理器，它允许开发者轻松安装、管理和分享依赖库，包括Vue3在内的前端框架。在这个“vue3-npm最基础的vue3文件”压缩包中，我们很可能会找到Vue3项目的基本构成和配置...
vue引入JS的问题
tdjqqq的博客
04-05 1233
问题：今天在做项目（vue）时，碰到一个老旧的问题，引入JS让我一头雾水。 vue项目中，引入自定义JS，无非有两种，全局引入、单vue文件引入。无论哪种引入，首先你要了解一下import和require import:引入的js，必须是export出来的对象，或者常量等。 require：commonJS类型对象。 具体方案： 一、全局式引入JS a.先准备自定义JS /...
【Vue2】引入本地原生JS文件
joanmelon的博客
02-25 4038
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
Vue组件中引入非模块规范js文件
qq_41204268的博客
07-11 972
将方式三包装成一个js插件，使用 Promise，js加载成功，调用resolve，js加载失败，调用reject。方法5: 更高阶方式。可以动态替换要加载的js文件。包装一个importRemoteJs.js 插件。方式1：直接在Vue项目的index.html 中使用全局的方式引入。方法2：在Vue组件加载完后，手动操作DOM插入js插件。方法3：使用render方法。
vue 使用没有第三方库js方式
转身那一瞬
08-04 1033
1、vue引入没有 npm资源的 js 方式 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewp
vue项目里不用npm怎么引入使用外部包
weixin_42634040的博客
03-11 2910
在index.html头部用script引入包，包最好放在static里 在main.js里引入和定义，在页面即可直接使用$echart
vue 不用npm下载安装包 该如何引用js
weixin_30437481的博客
03-26 1062
公司电脑不让用npm ，vue的项目要使用moment.js， 用了各种script 引用，总是报错 正确的方式应该为： import {moment} from ‘moment.js ’ 不可以全局使用，需要去相应要使用的页面去单独引用 至于在index.html 用script不能正常使用，我也不知道为什么，会报一个unexpected 错误，等以后在说这个问题吧 ...
Vue组件库发布到npm详解
08-28
Vue 组件库发布到 npm 详解 Vue 组件库发布到 npm 是指将 Vue 组件库发布到 npm（Node Package Manager）平台上，以便其他开发者可以轻松地安装和使用该组件库。本文将详细介绍如何将 Vue 组件库发布到 npm，包括...
webpack+vue-cli项目中引入外部非模块格式js的方法
12-07
在Vue.js项目开发中，尤其是基于`vue-cli`构建的项目，我们经常需要引入外部JavaScript库，这些库可能并未以模块化方式导出，而是直接通过`<script>`标签在HTML中引用。当遇到这样的情况时，我们可以借助Webpack来...
vue.js 下载，引入vue.js 本地开发
05-18
以上就是Vue.js的基本介绍和引入方式，结合标签中的"javascript"和"ecmascript"，Vue.js是基于ECMAScript（特别是ES5和部分ES6特性）构建的，因此理解JavaScript基础和现代JavaScript特性对于深入学习Vue.js至关重要...
vue引入没有使用export导出的js文件
aituo1908的博客
09-16 4063
<template> <div class="about"> <h1 class="title">This is an about page</h1> </div> </template> <script> import '../assets/jquery-1.8.3.mi...
vue的templete中不能使用import导入的js方法解决办法
wxyBlog
03-16 3222
在methods中在定义一次
Vue第三方库集成
m0_60820509的博客
09-08 84
在开发中，可以通过进行修改vue中webpack配置。
.vue文件引入js问题 详解VUE中常用的几种import（模块、文件）引入方式
lzylzy0的博客
07-24 7276
.vue文件 中不解析 script标签引入js文件. import引入是必须的. 有两种用法: 1.import a from ‘…/a’ 2.import ‘…/a’ 区别在于第一个你要用到export导出之后 才能用import导入. 第二个是直接引入 和script标签是一样的. 但是它作用在自己的js文件中, 你要是不把它挂载在window中 你是获取不到的. 详解VUE中常用的几种im...
vue.js如何单独封装组件并引用
weixin_35755562的博客
02-16 254
Vue.js允许您封装可重用的组件并在应用程序中多次使用它们。以下是单独封装和引用Vue组件的基本步骤： 创建组件 使用Vue.js创建一个组件。您可以将其放在一个单独的文件中，并通过导出来暴露组件。例如，假设您正在创建一个名为"MyComponent"的组件。可以创建一个名为"MyComponent.vue"的文件，并使用以下代码： <template> <div&gt...
Vue 组件中如何引入外部的js文件 的10种方法
热门推荐
一步一个脚印，踏实努力，向着目标前进
08-30 2万+
原型链扩展，将外部的JavaScript文件扩展到Vue实例的原型链上，适用于多个组件都需要使用外部JavaScript文件的情况。这种方法可以将外部JavaScript文件的方法和属性混入到所有的Vue组件中，使得所有的组件都可以使用这些方法和属性。标签中使用插件的方式异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。方法，异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。语句的路径指定具体的文件位置。
在vue中如何使用他人封装好的方法- - >
404路西法的博客
06-26 737
1.在自己编写的子组件Script当中导入.. 记得一定要在components里面去注册 2.然后再 看图 效果：
除了npm还有哪些组件共用方式
weixin_39975379的博客
02-14 505
问题： 除了npm 你还知道哪些多项目组件共用的方式 解决方案： 1.cdn 将组件打包发布到服务器上 优点：缩小项目打包体积 缺点：维护成本高，更新组件时需要更新服务器上的文件 推荐指数：※ 2.npm包 现在最常用的手段 缺点：国内镜像资源同步时间慢 npm 可以直接install Git仓库地址 ，这种方式常用来做测试npm 包的手段 3.git submodule git可以使用git submodule直接将一个git仓库当做子模块放在项目中，只需要 git submo
three.js控制glb模型旋转
最新发布
06-04
使用Three.js控制glb模型旋转可以通过以下步骤来实现： 1. 首先需要引入Three.js库和GLTFLoader.js库，可以在html中添加以下代码： ``` <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/loaders/GLTFLoader.js"></script> ``` 2. 加载glb模型并创建场景和相机： ``` const loader = new THREE.GLTFLoader(); let scene, camera; loader.load('path/to/model.glb', function(gltf) { scene = gltf.scene; camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; scene.add(camera); scene.rotation.x = Math.PI / 2; // 旋转场景以便更好地查看模型 animate(); }); ``` 3. 创建一个渲染器并将其添加到DOM中： ``` const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 4. 创建一个函数来更新场景： ``` function animate() { requestAnimationFrame(animate); scene.rotation.y += 0.01; // 控制模型的旋转速度 renderer.render(scene, camera); } ``` 5. 最后在HTML中添加一个canvas元素，将渲染器的dom元素赋值给canvas元素的context属性： ``` <canvas id="canvas"></canvas> <script> const canvas = document.getElementById('canvas'); canvas.getContext('2d').drawImage(renderer.domElement, 0, 0); </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值