vue は複数ページのアプリケーションに適していますか?

vue は複数ページのアプリケーションに適しています。 Vue はエンジニアリング開発中に webpack に依存し、webpack はすべてのリソースを統合して html ファイルと一連の js ファイルを形成します; vue を使用してマルチページ アプリケーションを実装したい場合は、その依存関係を再構成する必要があります。 Webpack 構成を変更すると、スキャフォールディングは複数ページのアプリケーションを構築する機能を持ちます。

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

vue が Web シングルページ アプリケーションを迅速に開発できることはわかっており、公式は独自のアプリケーション スキャフォールディング vue-cli を提供しています。スキャフォールディングをダウンロードして依存関係をインストールするだけで、プロトタイプのプロトタイプを開始できます。 vueアプリケーション。

これには、Webpack の依存関係追跡、さまざまなリソース サフィックスのローダー、および関連する Webpack プラグインの強力な機能が役立ちます。

ただし、場合によっては、複数のページの開発が必要になることがあります。この場合、vue-cli を通じて複数のアプリケーション ディレクトリを生成するなど、複数のページに複数のアプリケーションを構築できます。重複した構築コードや定型コードが多数存在し、アプリケーションの統一性が損なわれ、保守が困難になります。 vue-cli に基づいて Webpack 構成を変更して、スキャフォールディングが複数ページのアプリケーションを構築できるようにすることができます。

Vue はエンジニアリング開発中に webpack に依存しており、webpack はすべてのリソースを統合して html ファイルと一連の js ファイルを形成します。vue がマルチページ アプリケーションとして実装されている場合は、依存関係の再構成が必要です。

以下では主に Vue のマルチページ アプリケーション開発 (MPA) について詳しく説明します

具体的な実装手順

#1.1. 変更が必要な設定ファイル ##1. \build\webpack.base と入力します。 conf.js ディレクトリで、module.exports ドメインのエントリを見つけ、そこに複数のエントリを設定して追加します:

緑色の箱。

  entry: {
    app: './src/main.js',
    one: './src/pages/one.js',
    two: './src/pages/two.js'
  }

2. 開発環境を変更します。dev を実行し、\build\webpack.dev.conf.js ファイルを開き、module.exports 内のプラグインを見つけます。以下は次のように記述されています:

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks: ['app']
    }),
    new HtmlWebpackPlugin({
      filename: 'one.html',
      template: 'one.html',
      inject: true,
      chunks: ['one']
    }),
    new HtmlWebpackPlugin({
      filename: 'two.html',
      template: 'two.html',
      inject: true,
      chunks: ['two']
    }),

注: ここの設定の方が重要です。うまく書かれていないと、パッケージ化中にエラーが報告されます。チャンク内のアプリは、webpack.base のエントリを参照します。 .conf.js。これは、対応する変数名と同じです。チャンクの機能は、コンパイルおよび実行されるたびに各エントリがエントリに対応することです。書かれていない場合は、すべてのページのリソースが導入されます。つまり、プロジェクト構成が変更される前にシングルページ アプリケーションが作成されました。

3. 次に、コンパイル環境である実行ビルドを構成します。まず、\config\index.js ファイルを開き、この

    index: path.resolve(__dirname, '../dist/index.html'),
    one: path.resolve(__dirname, '../dist/one.html'),
    two: path.resolve(__dirname, '../dist/two.html'),

をビルドに追加します。 注: これは、パッケージ化後に dist フォルダーに形成される HTML です。

4. 次に、/build/webpack.prod.conf.js ファイルを開き、プラグインで HTMLWebpackPlugin を見つけて、

 new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'app']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.one,
      template: 'one.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'one']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.two,
      template: 'two.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'two']
    }),

の説明を追加します。 : ファイル名は、\config\index.js のビルドを参照します。各ページは 1 つのチャンクで構成する必要があります。そうしないと、すべてのページのリソースが読み込まれます。

#1.2. 私のディレクトリ

##2.3. 作成する必要があるいくつかのファイルのコード

1. One.js ファイル コード: (ここでは例を示しています)、two.js は次のようになります。このコードの「1」を「2」に置き換えてください。

import Vue from 'vue'
import one from './one.vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
    el: '#one',
    render: h => h(one)
})

2. One.vue ファイル コード: (ここでは例を示します)、two.vue はこのコードに似ていますが、「one」を「two」に置き換えるだけです。

<template>
    <div>
        <p>{{msg}}</p>
    </div>
</template>

<script>
    export default {
        name: &#39;one&#39;,
        data() {
            return {
                msg: &#39;I am one&#39;
            }
        }
    }
</script>

3. One.html ファイル コード: (ここでは例を示します)、two.vue はこのコードに似ていますが、「one」を「two」に置き換えるだけです。

rreeee

注意!

前に ID を変更するのを忘れていました。ページは空白でコンテンツがありません。コンソールを開くと、 divタグに内容が無く、id それを気づかせてくれたのがアプリだったんですが、修正したら大丈夫になりました。

[関連する推奨事項:

vuejs ビデオ チュートリアル 、Web フロントエンド開発

]

以上がvue は複数ページのアプリケーションに適していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。