vue の複数ページのフロントエンド プロジェクトのコマンドはどこにありますか?

Vue は、フロントエンド Web アプリケーションの開発に広く使用されている人気のある JavaScript フレームワークです。 Vue はプログラム可能で拡張可能なアーキテクチャを備えているため、開発者の間で最も有力な選択肢の 1 つとなっています。 Vue は、開発者がプロ​​ジェクトの開発をスピードアップするのに役立つ多くの機能と API も提供します。

Vue では、シングル ページ アプリケーション (SPA) またはマルチページ アプリケーション (MPA) の開発方法を選択できます。 SPA の場合、アプリケーションを実装するために必要なエントリ ファイルとルート ファイルは 1 つだけですが、MPA の場合は、アプリケーション全体を構築するために複数のエントリ ファイルと複数のルート ファイルが必要です。この記事では、Vue の複数ページのフロントエンド プロジェクトのコマンドがどこにあるのかについて説明します。

まず、基本的な Vue 複数ページ プロジェクトを作成しましょう。 「my-multiple-page-app」というプロジェクトを作成するとします。次のコマンドを実行してください:

vue create my-multiple-page-app

このコマンドは、Vue のデフォルトのオプションと構成を使用してプロジェクトを作成します。この方法は、単一ページのアプリケーションではうまく機能しますが、複数ページのアプリケーションの場合は、デフォルトの構成を変更する必要があります。ページごとに個別のページを生成するには、いくつかの構成を変更する必要があります。

まず、「vue-cli-plugin-multi-page」というプラグインをインストールする必要があります。このプラグインは、複数ページのアプリケーションの作成に役立ちます。コマンドラインで次のコマンドを実行してください:

vue add multi-page

このコマンドは、プロジェクトの「vue-cli-plugin-multi-page」をインストールします。このプロセス中に、プラグインはプロジェクトのルート ディレクトリに「pages」という名前のフォルダーを作成します。このフォルダー内にページごとにフォルダーが作成され、各ページのフォルダー内に「main.js」という名前の JavaScript ファイルと「App.vue」という名前の Vue ファイルが作成されます。

「main.js」ファイルは各ページのエントリーファイルです。このファイルでは、各ページのルーティング エントリとレンダリング エントリを定義します。 「App.vue」ファイルでは、ページの構造とスタイルを整理します。

次に、複数ページのアプリケーションを作成していることを Vue ビルド ツールに認識させるために、いくつかの構成を変更する必要があります。ルート ディレクトリで「vue.config.js」ファイルを開き、次のコードを追加します。

module.exports = {
  pages: {
    index: {
      entry: 'src/pages/index/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    login: {
      entry: 'src/pages/login/main.js',
      template: 'public/login.html',
      filename: 'login.html'
    },
    signup: {
      entry: 'src/pages/signup/main.js',
      template: 'public/signup.html',
      filename: 'signup.html'
    }
  }
}

このコードは、ホームページ、ログイン ページ、登録ページの 3 つのページを作成することを Vue ビルド ツールに指示します。 。各ページにはエントリ ファイルと HTML テンプレート ファイルがあります。各ページのファイル名も定義します。

最後に、次のコマンドを実行してマルチページ アプリケーションをコンパイルします。

npm run build

このコマンドは、コンパイルされたファイルを「dist」フォルダーに生成します。 「dist」フォルダー内に、「index.html」、「login.html」、「signup.html」という名前の 3 つの HTML ファイルを含むフォルダーが表示されます。各 HTML ファイルは、「chunk-vendors.js」および「chunk-common.js」という名前の JavaScript ファイルと、「app.js」という名前の JavaScript ファイルにリンクされています。

これは、Vue マルチページ フロントエンド プロジェクトのコマンドがどこにあるかについてのすべてです。 Vue は、開発者がプロ​​ジェクト開発をスピードアップするのに役立つ多くの機能と API を提供します。これらのコマンドを使用すると、複数ページのアプリケーションをすばやく作成し、必要に応じて変更を加えて保守することができます。

以上がvue の複数ページのフロントエンド プロジェクトのコマンドはどこにありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。