VUE項目中引入JS文件的方法總結
更新時間：2022年06月01日 10:34:42 作者：Carol小朋友
在vue中如果把所有的代碼都寫到一個頁面中,有時比較難找,顯得比較復雜,下面這篇文章主要給大家介紹了關于VUE項目中引入JS文件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
在開發(fā)Vue項目的時候，有時需要使用一些非ES6格式的沒有export的js庫，可以有如下方法實現(xiàn):
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" 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中，這樣組件內都可以使用。
var THREE = window.THREE var GLTFLoader = THREE.GLTFLoader Vue.prototype.THREE = THREE
3.手動添加export
為js庫中需要使用的方法放入export default { /**要導出的方法**/}，然后通過import {*} from 使用
在JS庫中：
function realconsole(){
alert("hello world!");
}
export {
realconsole
}
在需要使用JS庫的組件中：
import realconsole from './xxx'
4. 使用import方式，把需要的js庫中的方法掛載到全局
如下：
import '@static/libs/GLTFLoader' // 可以從全局獲取導入的方法 let GLTFLoader = THREE.GLTFLoader
補充：Vue3如何引用全局JS文件
一、如何引用全局JS文件
1、先創(chuàng)建一個JS文件放在Common 目錄下,隨意寫一些內容,文件命名為util.js(命名隨意)
//方法體
function show(){
console.log("我是測試js");
}
//導出
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;
調用方式則沒發(fā)生變化，仍然是：
this.$util.show();
總結
到此這篇關于VUE項目中引入JS文件的文章就介紹到這了,更多相關VUE引入JS文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
詳解Vue中l(wèi)ocalstorage和sessionstorage的使用
這篇文章主要介紹了詳解Vue中l(wèi)ocalstorage和sessionstorage的使用方法和經(jīng)驗心得，有需要的朋友跟著小編參考學習下吧。2017-12-12
這篇文章主要介紹了vue props 一次傳多個值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章中主要介紹了Vue.js 中的 $watch使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了VUE項目去除input 框值所有空格的操作方法，主要包括去除空格的方法、正則和element ui寫法，本文給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了 Vue press 支持圖片放大功能,本文通過代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
vue2 el-checkbox-group復選框無法選中問題及解決
這篇文章主要介紹了vue2 el-checkbox-group復選框無法選中問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
今天小編就為大家分享一篇vue-form表單驗證是否為空值的實例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
在Vue3項目中使用VueCropper裁剪組件實現(xiàn)裁剪及預覽效果
這篇文章主要介紹了在Vue3項目中使用VueCropper裁剪組件（裁剪及預覽效果）,本文分步驟結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了Vue生命周期和數(shù)據(jù)共享，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue2使用cube-ui?實現(xiàn)搜索過濾、高亮功能
cube-ui?是基于?Vue.js?實現(xiàn)的精致移動端組件庫，由于很長一段時間沒有學習cube-ui?的功能實現(xiàn)示例代碼了，今天通過本文給大家介紹下Vue2使用cube-ui?實現(xiàn)搜索過濾、高亮功能，感興趣的朋友跟隨小編一起看看吧2023-01-01