vue2.0でマルチページ開発を実装する方法-jsチュートリアル-php.cn

vue2.0でマルチページ開発を実装する方法

亚连

リリース： 2018-06-08 18:08:09

オリジナル

2425 人が閲覧しました

今回は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 プロジェクトを生成することです。

vue init webpack test

ログイン後にコピー

というコマンドを使用します。ダウンロード後、最後まで入力すると vue プロジェクトが生成されます。 vue プロジェクトには関連する依存関係がありません。この時点で、フォルダーに入って次のコマンドを入力する必要があります:

npm install

ログイン後にコピー

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

npm run dev

ログイン後にコピー

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

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

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

entry: {
 app: &#39;./src/main.js&#39;,
 one: &#39;./src/js/one.js&#39;,
 two: &#39;./src/js/two.js&#39;
},

ログイン後にコピー

Note 、紫色の部分の変数名は後で使用するため、忘れないように適切に選択する必要があります。

次のステップは、開発環境を変更して dev を実行し、buildwebpack.dev.conf.js ファイルを開き、module.exports でプラグインを見つけます。以下は次のように書かれています:

plugins: [
 new webpack.DefinePlugin({
  &#39;process.env&#39;: 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: &#39;index.html&#39;,
  template: &#39;index.html&#39;,
  inject: true,
  chunks: [&#39;app&#39;]
 }),
 new HtmlWebpackPlugin({
  filename: &#39;one.html&#39;,
  template: &#39;one.html&#39;,
  inject: true,
  chunks: [&#39;one&#39;]
 }),
 new HtmlWebpackPlugin({
  filename: &#39;two.html&#39;,
  template: &#39;two.html&#39;,
  inject: true,
  chunks: [&#39;two&#39;]
 }),
 new FriendlyErrorsPlugin()
]

ログイン後にコピー

チャンク内のアプリは以下を参照します。 webpack.base .conf.js のエントリ内の対応する変数名。チャンクの機能は、各エントリがコンパイルおよび実行されるたびにエントリに対応することです。これを記述しないと、すべてのページのリソースが導入されます。

その後、コンパイル環境であるrun buildを設定します。まず、configindex.js ファイルを開いて、これをビルドに追加します:

index: path.resolve(__dirname, &#39;../dist/index.html&#39;),
one: path.resolve(__dirname, &#39;../dist/one.html&#39;),
two: path.resolve(__dirname, &#39;../dist/two.html&#39;),

ログイン後にコピー

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

new HtmlWebpackPlugin({
 filename: process.env.NODE_ENV === &#39;testing&#39;
  ? &#39;index.html&#39;
  : config.build.index,
 template: &#39;index.html&#39;,
 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: &#39;dependency&#39;,
 chunks: [&#39;manifest&#39;, &#39;vendor&#39;, &#39;app&#39;]
}),
new HtmlWebpackPlugin({
 filename: config.build.one,
 template: &#39;one.html&#39;,
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
 },
 chunksSortMode: &#39;dependency&#39;,
 chunks: [&#39;manifest&#39;, &#39;vendor&#39;, &#39;one&#39;]
}),
 new HtmlWebpackPlugin({
   filename: config.build.two,
   template: &#39;two.html&#39;,
   inject: true,
   minify: {
     removeComments: true,
     collapseWhitespace: true,
     removeAttributeQuotes: true
   },
   chunksSortMode: &#39;dependency&#39;,
   chunks: [&#39;manifest&#39;, &#39;vendor&#39;, &#39;two&#39;]
 }),

ログイン後にコピー

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

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

import Vue from &#39;vue&#39;
import one from &#39;./one.vue&#39;

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: &#39;#one&#39;,
 render: h => h(one)
})
one.vue写法如下：
<template>
 <p id="one">
  {{msg}}
 </p>
</template>

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

ログイン後にコピー

two も同様の方法で記述できるので、ここでは書きません

App.vue では次のように記述できます:

<template>
 <p id="app">
  <a href="one.html" rel="external nofollow" >one</a><br>
  <a href="two.html" rel="external nofollow" >two</a><br>
  {{msg}}
 </p>
</template>

ログイン後にコピー

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

上記は私があなたのためにまとめたものです。

vueでインデックスファイルをコンパイル、パッケージ化、表示する方法

vueでJadeテンプレートを使用する方法

Angularのコンポーネントにテンプレートを渡す

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