vue2.0で複数ページを開発する方法

今回は、vue2.0で複数ページを開発する方法と、vue2.0で複数ページを開発する際の注意点を紹介します。実際の事例を見てみましょう。

普段 Vue を使って開発をしていると、Vue はシングルページ アプリケーション専用に生まれたように感じますが、そうではありません。 Vue はエンジニアリング開発中に webpack に大きく依存しており、webpack はすべてのリソースを 1 つのページに統合しているためです。ただし、vue は単一のページを作成するだけでなく、複数のページを作成することもできます。複数のページを作成したい場合は、vue に依存する必要があります。つまり、webpack を再構成する必要があります。この記事では、Webpack の構成について詳しく説明します。

vueの開発には2つの方法がありますが、1つはvue.jsファイルをscriptタグ内に直接導入する方法で、一度導入してしまうと小規模なマルチページを作るのが楽になると感じています。より大きなプロジェクトでも、Webpack なしでは実行できません。そこで、もう 1 つの方法は、webpack と vue-cli に基づいたエンジニアリング開発です。手順については以下で詳しく説明します。
まず最初に、エンジニアリング開発に vue を使用する場合は、まず node.js を入手してから、npm をダウンロードする必要があることを述べておきます。ただし、通常、node の新しいバージョンには npm が含まれているため、その必要はありません。やれ。指示はコマンドラインに入力します。最初のステップは、コマンド

vue init webpack test

を使用して vue プロジェクトを生成することです。 ダウンロード後、ブロガー自身が宣言したファイル名を「test.」と最後まで入力すると、vue プロジェクトが生成されますが、この時点では、フォルダーと関連するものを入力する必要があります。コマンドを入力します:

npm install

ネットワーク速度が良くない場合は、cnpm install を使用しても効果は同じです。数分後、依存関係全体がダウンロードされます。次に、コマンド

npm run dev

を入力します。 インターフェイスが自動的に開かれ、エラーが報告されて Web ページを開けない場合、その原因は 1 つだけです。つまり、この時点でポートを変更する必要があります。 jsディレクトリ。

vue プロジェクトがすべての構成を完了したら、次のステップに移ります。まず、ブロガーとして、新しい one.html と two.html、およびそれらに対応する vue ファイルを作成します。ファイルの場合、ファイルディレクトリは次のとおりです:

それを実行した後、buildwebpack.base.conf.js ディレクトリに入り、module.exports ドメイン内のエントリを見つけて、そこに複数のエントリを設定して追加します。

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

紫色の部分の変数名は、忘れないように後で使用するため、慎重に選択する必要があることに注意してください。

次のステップは、開発環境を変更して dev を実行し、buildwebpack.dev.conf.js ファイルを開き、module.exports でプラグインを見つけます。次のように記述されています。 チャンク内のアプリは、webpack.base.conf.js のエントリ内の対応する変数名を参照します。チャンクの機能は、各エントリがコンパイルおよび実行されるたびにエントリに対応することです。これを記述しないと、すべてのページのリソースが導入されます。

次に、コンパイル環境である実行ビルドを構成します。まず configindex.js ファイルを開いて、これをビルドに追加します:

plugins: [
 new webpack.DefinePlugin({
  'process.env': config.dev.env
 }),
 // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NoEmitOnErrorsPlugin(),
 // https://github.com/ampedandwired/html-webpack-plugin
 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']
 }),
 new FriendlyErrorsPlugin()
]

次に、/build/webpack.prod/conf.js ファイルを開き、プラグインで HTMLWebpackPlugin を見つけて、次のコードを追加します:

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

ファイル名は configindex.js のビルドを参照します。各ページは 1 つのチャンクで構成されている必要があります。そうしないと、すべてのページのリソースがロードされます。

次に、one.js ファイルは次のように記述できます:

new HtmlWebpackPlugin({
 filename: process.env.NODE_ENV === 'testing'
  ? 'index.html'
  : config.build.index,
 template: 'index.html',
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
  // more options:
  // https://github.com/kangax/html-minifier#options-quick-reference
 },
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 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']
 }),

二人の書き方が似ているので書きません

次に、App.vue で次のように記述します:

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)
})
one.vue写法如下：
<template>
 <p id="one">
  {{msg}}
 </p>
</template>
<script>
export default {
 name: 'one',
 data () {
  return {
   msg: 'I am one'
  }
 }
}
</script>

このように、ページを開いたときに、上の 1 つのリンクをクリックすると one.html にジャンプし、2 つをクリックすると two.html にジャンプします。これで完了です。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS プロンプト テキスト ボックスのメール アドレスの入力

$.ajax() メソッド サーバーから JSON データを取得する方法

以上がvue2.0で複数ページを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。