第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何在 vue.js 中包含 3rd 方 JavaScript 文件?

如何在 vue.js 中包含 3rd 方 JavaScript 文件?

我已經(jīng)花了一天多的時(shí)間尋找解決方案。我是 JavaScript 新手,所以也許我錯(cuò)過(guò)了針對(duì)有經(jīng)驗(yàn)的 JS 開(kāi)發(fā)人員的解決方案。我需要在單個(gè)文件 vue 組件中使用的第 3 方腳本(如果這是唯一的方法,則在我的應(yīng)用程序中全局使用)具有以下模式:(function (win) {  win.MyUtil = {    "func1": function func1() { ... },    "func2": function func1() { ... }  }}(window));這擴(kuò)展了瀏覽器的 Window 對(duì)象,因此 MyUtil 是全局可見(jiàn)的,對(duì)嗎?然后我在 index.html 文件的頭部添加了一個(gè)腳本標(biāo)簽:腳本文件位于 /my_project_folder/src/assets 中。我還在 src 屬性中嘗試了許多不同的路徑(例如“./assets/my_util.js”或“<%= BASE_URL %>/assets/my_util.js”并將文件移動(dòng)到不同的實(shí)際文件夾。我應(yīng)該在某個(gè)地方讀到是一個(gè)文件夾“/my_project/static”。我試過(guò)了。結(jié)果總是一樣的。瀏覽器顯示此警告(我自己翻譯成英文):“腳本' http://localhost:8080/@/assets/my_util.js '已加載,盡管它的 MIME 類型 (text/html) 不是有效的 MIME 類型用于 JavaScript?!?我認(rèn)為這表明腳本實(shí)際上已加載。當(dāng)然,我也嘗試過(guò)指定正確的 MIME 類型,但沒(méi)有成功。但是,當(dāng)我將 alert("my_util") 添加到腳本時(shí),沒(méi)有顯示任何消息。然后我的 vue 組件中的代碼會(huì)引發(fā)錯(cuò)誤“ ReferenceError: MyUtil is not defined ”。這發(fā)生在“已安裝”鉤子中,但稍后在按鈕單擊中也會(huì)發(fā)生,因此這不是加載順序的問(wèn)題。這里出了什么問(wèn)題?我該如何解決?順便說(shuō)一句,它在純 html 中運(yùn)行良好。
查看完整描述

2 回答

?
叮當(dāng)貓咪

TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個(gè)贊

我認(rèn)為您正在嘗試以最天真的方式使用 VueJS,您可以在 html 的腳本標(biāo)記中導(dǎo)入 vuejs。

并不是說(shuō)它有什么問(wèn)題。但是,這種方式限制了您利用 Vue 提供的靈活性。最好的方法是使用 NPM 或 vue-cli ( https://vuejs.org/v2/guide/installation.html ) 安裝 vue。

一旦您使用 vue-cli 或 NPM(或帶有 babel 或 webpack 的 vuejs)設(shè)置項(xiàng)目,它允許您使用 es6 導(dǎo)入語(yǔ)法,尤其是在使用單文件組件時(shí)(https://vuejs.org/v2/guide/single -file-components.html)。在這種風(fēng)格中,您的組件存在于它們自己的文件中,并且每個(gè)組件都有一個(gè)<script>可以導(dǎo)入內(nèi)容的塊。

但是,您需要學(xué)習(xí)如何創(chuàng)建您的第一個(gè) Vue 組件,然后才能像在行業(yè)中一樣使用 VueJS。你可以按照 VueJS 文檔(https://vuejs.org/v2/guide/)來(lái)做同樣的事情。

創(chuàng)建組件后,您需要了解有關(guān)計(jì)算道具 () https://vuejs.org/v2/guide/computed.html以及如何使用計(jì)算道具在模板中使用導(dǎo)入的文件/類。有很多東西要學(xué):)

我希望這有幫助。


查看完整回答
反對(duì) 回復(fù) 2022-06-16
?
守著一只汪

TA貢獻(xiàn)1872條經(jīng)驗(yàn) 獲得超4個(gè)贊

似乎沒(méi)有真正的解決方案,這意味著不修改原始 3rd 方腳本就沒(méi)有解決方案。原因是第 3 方腳本包含“立即調(diào)用函數(shù)表達(dá)式”(IIFE):


(function (win) {

  win.MyUtil = {

    "func1": function func1() { ... },

    "func2": function func1() { ... }

  }

}(window));

所以我不得不修改第三方腳本,這是我想要避免的。感謝 Rishinder (VPaul) 指出了正確的方向。現(xiàn)在它是一個(gè)導(dǎo)出對(duì)象的“模塊”:


var MyUtil

export default MyUtil = {

  func1: function() { ... },

  func2: function() { ... }

}

在 Vue.js 單文件組件文件 (*.vue) 中可以這樣導(dǎo)入(如果它與 *.vue 文件位于同一文件夾中):


<script>

    import MyUtil from "./my_util.js"

    // code using MyUtil goes here

</script>


查看完整回答
反對(duì) 回復(fù) 2022-06-16
  • 2 回答
  • 0 關(guān)注
  • 182 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)