VUE項目中引入JS文件的方法總結(jié)
更新時間：2022年06月01日 10:34:42 作者：Carol小朋友
在vue中如果把所有的代碼都寫到一個頁面中,有時比較難找,顯得比較復(fù)雜,下面這篇文章主要給大家介紹了關(guān)于VUE項目中引入JS文件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
在開發(fā)Vue項目的時候，有時需要使用一些非ES6格式的沒有export的js庫，可以有如下方法實(shí)現(xiàn):
1.在index.html頁面使用script標(biāo)簽引入
當(dāng)然也可以使用cdn的地址。這樣引入后的內(nèi)容是全局的，可以在所有地方使用。
<!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" rel="external nofollow" />
<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中，這樣組件內(nèi)都可以使用。
var THREE = window.THREE var GLTFLoader = THREE.GLTFLoader Vue.prototype.THREE = THREE
3.手動添加export
為js庫中需要使用的方法放入export default { /**要導(dǎo)出的方法**/}，然后通過import {*} from 使用
在JS庫中：
function realconsole(){
alert("hello world!");
}
export {
realconsole
}
在需要使用JS庫的組件中：
import realconsole from './xxx'
4. 使用import方式，把需要的js庫中的方法掛載到全局
如下：
import '@static/libs/GLTFLoader' // 可以從全局獲取導(dǎo)入的方法 let GLTFLoader = THREE.GLTFLoader
補(bǔ)充：Vue3如何引用全局JS文件
一、如何引用全局JS文件
1、先創(chuàng)建一個JS文件放在Common 目錄下,隨意寫一些內(nèi)容,文件命名為util.js(命名隨意)
//方法體
function show(){
console.log("我是測試js");
}
//導(dǎo)出
export default{
show:show
}
2、在main.js中引用，這里Vue3和之前的版本就有所不同
之前Vue版本的引用：
//引入js文件 import util from 'Common/Js/util.js' Vue.prototype.$util = util;
而Vue3的引用方式為：
//引用js文件 import util from '@/Common/Js/util.js' app.config.globalProperties.$util = util;
調(diào)用方式則沒發(fā)生變化，仍然是：
this.$util.show();
總結(jié)
到此這篇關(guān)于VUE項目中引入JS文件的文章就介紹到這了,更多相關(guān)VUE引入JS文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了如何讓vue長列表快速加載，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要為大家介紹了圖解Vue的響應(yīng)式原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue+tsc+noEmit導(dǎo)致打包報TS類型錯誤問題及解決方法
當(dāng)我們新建vue3項目,package.json文件會自動給我添加一些配置選項,這寫選項基本沒有問題,但是在實(shí)際操作過程中,當(dāng)項目越來越復(fù)雜就會出現(xiàn)問題,本文給大家分享vue+tsc+noEmit導(dǎo)致打包報TS類型錯誤問題及解決方法,感興趣的朋友一起看看吧2023-10-10
VueJS實(shí)現(xiàn)用戶管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了VueJS實(shí)現(xiàn)用戶管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
Vue + AnimeJS實(shí)現(xiàn)3d輪播圖的詳細(xì)代碼
輪播圖在開發(fā)中是經(jīng)常用到的,3D輪播圖是其中最常用的一種,所以在這篇文章中將給大家介紹Vue + AnimeJS實(shí)現(xiàn)3d輪播圖,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-01-01
本篇文章主要介紹了深入理解vue-router之keep-alive。keep-alive使被包含的組件保留狀態(tài)，或避免重新渲染，有興趣的可以了解一下2017-08-08
這篇文章主要為大家介紹了Vue中內(nèi)置指令與自定義指令語法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue cli4中mockjs在dev環(huán)境和build環(huán)境的配置詳情
這篇文章主要介紹了vue cli4中mockjs在dev環(huán)境和build環(huán)境的配置詳情，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue 表情包輸入組件的實(shí)現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了Vue.js搭建移動端購物車界面，重點(diǎn)介紹基本結(jié)構(gòu)和數(shù)據(jù)渲染，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11