ホームページ ウェブフロントエンド uni-app uniappのmain.jsにjsをインポートする方法

uniappのmain.jsにjsをインポートする方法

Apr 27, 2023 am 09:06 AM

UNIAPP は、マルチプラットフォーム開発をサポートするフロントエンド フレームワークです。その優れたクロスプラットフォーム機能、柔軟なスケーラビリティ、強力なパフォーマンスにより、開発者はアプリケーションを複数のプラットフォームに簡単に公開できます。 UNIAPP では、main.js は重要な起動ファイルであり、その主な機能は、JS ファイルのインポートを含む、グローバルな初期化と構成を実行することです。 UNIAPPにJSファイルをインポートする方法を見てみましょう。

1. main.js に JS ファイルをインポートします。

UNIAPP では、JS ファイルを main.js の任意の場所にインポートできます。最上位または最下位のレベルに配置できます。すべて可能です。具体的な手順は次のとおりです:

1. 次のコードを main.js に追加します:

import "./util.js";
ログイン後にコピー

2. util.js ファイルにインポートする必要がある JS ファイルをプロジェクトディレクトリです。

3. util.js ファイルにカスタム関数または変数を追加します (例:

function sum(a, b) {
   return a + b;
}
export default sum;
ログイン後にコピー

2. Vue コンポーネントで JS ファイルを使用します

ファイルが main.js ファイルに正常にインポートされると、JS ファイルはすべての Vue コンポーネントで使用できるようになります。デモンストレーションの便宜上、Vue コンポーネントでの特定のプロセスを示します。

1. 次のコードを HelloWorld.vue ファイルに追加します:

<script>
import { sum } from "@/util.js";

export default {
  data() {
    return {
      num1: 1,
      num2: 2,
    };
  },
  methods: {
    handleClick() {
      const result = sum(this.num1, this.num2);
      console.log(result);
    },
  },
};
</script>
ログイン後にコピー

2. カスタム関数または変数を util.js ファイルに追加します (例:

export function sum(a, b) {
  return a + b;
}
ログイン後にコピー

) 3. まとめ

UNIAPP では、JS ファイルのインポートは非​​常に簡単で、main.js ファイルにコードを追加するだけです。 main.js ファイルはグローバル初期化のエントリ ファイルであるため、このファイルでグローバル構成とインポートを実行できます。同時に、Vue コンポーネントで JS ファイルを使用することも非常に便利で、使用するコンポーネントに JS ファイルをインポートするだけで済みます。また、Vue コンポーネントに JS ファイルをインポートする場合は、相対パスまたは @ 記号を使用する必要があることに注意してください。そうしないと、ロードできないエラーが発生します。

以上がuniappのmain.jsにjsをインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

UNI-APPでローカルストレージを処理するにはどうすればよいですか? UNI-APPでローカルストレージを処理するにはどうすればよいですか? Mar 11, 2025 pm 07:12 PM

UNI-APPでローカルストレージを処理するにはどうすればよいですか?

Uniappダウンロードファイルの名前を変更する方法 Uniappダウンロードファイルの名前を変更する方法 Mar 04, 2025 pm 03:43 PM

Uniappダウンロードファイルの名前を変更する方法

Uni-AppのジオロケーションAPIを使用するにはどうすればよいですか? Uni-AppのジオロケーションAPIを使用するにはどうすればよいですか? Mar 11, 2025 pm 07:14 PM

Uni-AppのジオロケーションAPIを使用するにはどうすればよいですか?

VuexまたはPiniaを使用してUni-Appで状態を管理するにはどうすればよいですか? VuexまたはPiniaを使用してUni-Appで状態を管理するにはどうすればよいですか? Mar 11, 2025 pm 07:08 PM

VuexまたはPiniaを使用してUni-Appで状態を管理するにはどうすればよいですか?

UNI-APPでAPIリクエストを行い、データを処理するにはどうすればよいですか? UNI-APPでAPIリクエストを行い、データを処理するにはどうすればよいですか? Mar 11, 2025 pm 07:09 PM

UNI-APPでAPIリクエストを行い、データを処理するにはどうすればよいですか?

Uni-Appのソーシャル共有APIを使用するにはどうすればよいですか? Uni-Appのソーシャル共有APIを使用するにはどうすればよいですか? Mar 13, 2025 pm 06:30 PM

Uni-Appのソーシャル共有APIを使用するにはどうすればよいですか?

Uniappダウンロードでファイルエンコードを処理する方法 Uniappダウンロードでファイルエンコードを処理する方法 Mar 04, 2025 pm 03:32 PM

Uniappダウンロードでファイルエンコードを処理する方法

自動コンポーネント登録にUni-AppのEasyCom機能を使用するにはどうすればよいですか? 自動コンポーネント登録にUni-AppのEasyCom機能を使用するにはどうすればよいですか? Mar 11, 2025 pm 07:11 PM

自動コンポーネント登録にUni-AppのEasyCom機能を使用するにはどうすればよいですか?

See all articles