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

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

PHPz
PHPzオリジナル
2023-04-27 09:06:111883ブラウズ

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 までご連絡ください。