首頁 web前端 uni-app uniapp如何引入js文件

uniapp如何引入js文件

May 21, 2023 pm 09:16 PM

隨著Uniapp的不斷發展壯大,越來越多的開發者開始使用它來開發跨平台應用程式。在開發過程中,有時可能需要引入一些自己編寫的js檔案。本文將介紹使用Uniapp如何引入js檔案的方法。

一、在頁面中引入js檔案

  1. 在pages目錄下找到需要引入js檔案的頁面(例如:index.vue)
  2. #在該頁面的script標籤中,使用以下程式碼引入js檔案:
import xxx from '@/xxx.js' 
登入後複製
登入後複製

其中,'@' 符號表示專案根目錄,xxx表示自己寫的js檔案名稱。如果該檔案不在根目錄下,則需要修改引入路徑。

  1. 在程式碼中使用該js檔案中的方法或變量,例如:
xxx.doSomething();
登入後複製

二、在元件中引入js檔案

  1. 找到需要引入js檔案的元件檔案(例如:my-component.vue)
  2. 在該元件的script標籤中,使用以下程式碼引入js檔案:
import xxx from '@/xxx.js' 
登入後複製
登入後複製

同樣,'@' 符號表示專案根目錄,xxx表示自己寫的js檔案名稱。如果該檔案不在根目錄下,則需要修改引入路徑。

  1. 在元件程式碼中使用該js檔案中的方法或變量,例如:
mounted() {
  xxx.doSomething();
}
登入後複製

三、在全域中引入js檔案

  1. 在專案根目錄下,找到vue.config.js檔案
  2. 在該檔案中加入以下程式碼:
configureWebpack: {
  externals: {
    'xxx': 'xxx'
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
}
登入後複製

其中,'xxx': 'xxx' 表示需要引入的js檔名,第一個'xxx'是該檔案在專案中的名稱,第二個'xxx'是在全域中的名稱;'@' 符號也表示專案根目錄。

  1. 在需要使用該js檔案的地方,使用以下程式碼引入:
window.xxx.doSomething();
登入後複製

四、總結

透過以上三種方法,我們可以在Uniapp中引入自己編寫的js文件,並在頁面、元件或全域中使用。在編寫js檔案時,需要注意命名和路徑的規範,以免造成引入失敗或程式碼混淆的情況。

以上是uniapp如何引入js文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)