Vue.js で複数ページのプロジェクトを構成する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue.js で複数ページのプロジェクトを構成する方法

小云云

Mar 10, 2018 pm 03:33 PM

javascript vue.js 構成

まず次のコマンドを使用して新しい Vue.js プロジェクトを作成します

vue init webpack vue-3

ログイン後にコピー

VsCode を使用してプロジェクトを開いた後、コマンドラインでプロジェクトを入力し、関連する依存ライブラリをインストールしてから、プロジェクトを実行して次のコマンドを実行します

cd vue-3npm installnpm run dev

ログイン後にコピー

通常の状況では、ブラウザに http://localhost:8080 と入力すると、大きな V アイコンが付いたページがポップアップ表示されます。

上記の準備が完了したら、次にマルチページプロジェクトの構成を実装します。達成される効果は次のとおりです。

ブラウザに http://localhost:8080/admin と入力します。ディスプレイ管理者ログインページにジャンプします。

プロジェクトの src ディレクトリに page/login ディレクトリを作成します
次に、ログインディレクトリの下に 3 つの新しいフォルダーを作成します: admin.html admin.js Admin.vueadmin.html admin.js Admin.vue

然后编写相应的页面显示代码，其中
admin.html 中的代码如下

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员登录页面</title></head><body>
    <p id="admin"></p></body></html>

ログイン後にコピー

Admin.vue 中的代码如下

<template>
  <p id="admin">
      <p>这里是管理员登录页面</p>
  </p></template><script>export default {
  name: &#39;Admin&#39;}</script>

ログイン後にコピー

admin.js 中的代码如下

import Vue from &#39;vue&#39;import Admin from &#39;./Admin.vue&#39;Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: &#39;#admin&#39;,
  components: { Admin },
  template: &#39;<Admin/>&#39;})

ログイン後にコピー

上面显示页面的代码完成之后，开始进行配置工作

首先打开 build目录
在 webpack.base.conf.js文件的 entry 配置属性加上新的入口文件：

module.exports = {  context: path.resolve(__dirname, &#39;../&#39;),  entry: {    app: &#39;./src/main.js&#39;,    admin: &#39;./src/page/login/admin.js&#39;
  },

ログイン後にコピー

在文件的devServer下的 rewrites添加重定向：

  devServer: {    clientLogLevel: &#39;warning&#39;,
    historyApiFallback: {
      rewrites: [
        { from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, &#39;src/indexlogin/admin.html&#39;) },        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, &#39;index.html&#39;) },
      ],
    },

ログイン後にコピー

同样要在该文件中的plugins配置项内多配置一个HtmlWebpackPlugin插件，用于生成 admin.html 的入口页
同时添加 chunks ，用于指定在前面 entry对应的入口文件的别名。

  plugins: [    new webpack.DefinePlugin({      &#39;process.env&#39;: require(&#39;../config/dev.env&#39;)
    }),    new webpack.HotModuleReplacementPlugin(),    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.    new webpack.NoEmitOnErrorsPlugin(),    // https://github.com/ampedandwired/html-webpack-plugin    new HtmlWebpackPlugin({      filename: &#39;index.html&#39;,      template: &#39;index.html&#39;,      chunks:[&#39;app&#39;],      inject: true
    }),    new HtmlWebpackPlugin({      filename: &#39;src/page/login/admin.html&#39;,      template: &#39;src/page/login/admin.html&#39;,      chunks:[&#39;admin&#39;],      inject: true
    }),

ログイン後にコピー

然后我们找到 config 目录，打开里面的 index.js 文件，在build属性下添加如下代码

  build: {    // Template for index.html    index: path.resolve(__dirname, &#39;../dist/index.html&#39;),
    admin: path.resolve(__dirname, &#39;../dist/src/page/login/admin.html&#39;),

ログイン後にコピー

以上完成所有的配置工作，在命令行重新执行npm run dev ，项目启动后，在浏览器键入 http://localhost:8080/admin ，就成功的跳转到刚刚我们写的页面中去了。

首先使用如下的命令创建一个新的 Vue.js 项目

vue init webpack vue-3

ログイン後にコピー

使用 VsCode 打开项目之后，在命令行进入到项目中去，安装相关的依赖库，然后运行项目，执行下面的命令

cd vue-3npm installnpm run dev

ログイン後にコピー

在一切正常的情况下，在浏览器输入 http://localhost:8080 应该会弹出一个含有大大的 V 字图标的页面。

完成上面的准备工作之后，接下来我们就来实现多页面项目的配置，我们预期希望实现的效果如下：

在浏览器输入 http://localhost:8080/admin 就会跳转到显示 这里是管理员登录 的页面。

我们在项目的 src 目录下建立 page/login 目录
然后在 login 目录下新建三个文件夹： admin.html admin.js Admin.vue

然后编写相应的页面显示代码，其中
admin.html 中的代码如下

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员登录页面</title></head><body>
    <p id="admin"></p></body></html>

ログイン後にコピー

Admin.vue 中的代码如下

<template>
  <p id="admin">
      <p>这里是管理员登录页面</p>
  </p></template><script>export default {
  name: &#39;Admin&#39;}</script>

ログイン後にコピー

admin.js 中的代码如下

import Vue from &#39;vue&#39;import Admin from &#39;./Admin.vue&#39;Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: &#39;#admin&#39;,
  components: { Admin },
  template: &#39;<Admin/>&#39;})

ログイン後にコピー

上面显示页面的代码完成之后，开始进行配置工作

首先打开 build目录
在 webpack.base.conf.js文件的 entry 配置属性加上新的入口文件：

module.exports = {  context: path.resolve(__dirname, &#39;../&#39;),  entry: {    app: &#39;./src/main.js&#39;,    admin: &#39;./src/page/login/admin.js&#39;
  },

ログイン後にコピー

在文件的devServer下的 rewrites添加重定向：

  devServer: {    clientLogLevel: &#39;warning&#39;,
    historyApiFallback: {
      rewrites: [
        { from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, &#39;src/indexlogin/admin.html&#39;) },        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, &#39;index.html&#39;) },
      ],
    },

ログイン後にコピー

  plugins: [    new webpack.DefinePlugin({      &#39;process.env&#39;: require(&#39;../config/dev.env&#39;)
    }),    new webpack.HotModuleReplacementPlugin(),    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.    new webpack.NoEmitOnErrorsPlugin(),    // https://github.com/ampedandwired/html-webpack-plugin    new HtmlWebpackPlugin({      filename: &#39;index.html&#39;,      template: &#39;index.html&#39;,      chunks:[&#39;app&#39;],      inject: true
    }),    new HtmlWebpackPlugin({      filename: &#39;src/page/login/admin.html&#39;,      template: &#39;src/page/login/admin.html&#39;,      chunks:[&#39;admin&#39;],      inject: true
    }),

ログイン後にコピー

然后我们找到 config 目录，打开里面的 index.js 文件，在build属性下添加如下代码

  build: {    // Template for index.html    index: path.resolve(__dirname, &#39;../dist/index.html&#39;),
    admin: path.resolve(__dirname, &#39;../dist/src/page/login/admin.html&#39;),

ログイン後にコピー

以上完成所有的配置工作，在命令行重新执行npm run dev

次に、対応するページを作成します表示コードのうち、

admin.html内のコードは次のとおりです

rrreee

Admin.vue内のコードは次のとおりです rrreeeadmin.jsのコードは次のとおりです

rrreee

上で表示されたページのコードを完了したら、設定作業を開始しますまず build ディレクトリを開きます

webpack.base.conf.jsentry 設定プロパティに新しいエントリファイルを追加します/code> ファイル:

rrreee >webpack.dev.conf.js の devServer の下にある rewrites にリダイレクトを追加しますファイル: rrreee

また、このファイルの plugins で、設定項目にもう 1 つ HtmlWebpackPlugin プラグインを設定します。これは、admin.html のエントリページを生成するために使用されます🎜同時に、chunks を追加して、前の entry 対応するエントリファイルのエイリアスを指定します。 🎜rrreee🎜次に、config ディレクトリを見つけて、その中にある index.js ファイルを開き、build 属性の下に次のコードを追加します 🎜rrreee 🎜🎜上記すべての構成作業を完了し、プロジェクトが開始された後、コマンドラインで npm run dev を再実行し、ブラウザに http://localhost:8080/admin と入力します。先ほど書いたページにジャンプします。 🎜🎜まず、次のコマンドを使用して新しい Vue.js プロジェクトを作成します🎜rrreee🎜VsCode を使用してプロジェクトを開いた後、コマンドラインでプロジェクトを入力し、関連する依存ライブラリをインストールしてから、プロジェクトを実行して次のコマンドを実行します🎜rrreee 🎜 通常の状況では、ブラウザに http://localhost:8080 と入力すると、大きな V アイコンが付いたページがポップアップ表示されます。 🎜🎜🎜上記の準備が完了したら、次にマルチページプロジェクトの構成を実装します。達成される効果は次のとおりです。 🎜🎜 ブラウザに http://localhost:8080/admin と入力します。ディスプレイ🎜管理者ログイン🎜ページにジャンプします。 🎜🎜プロジェクトの src ディレクトリに page/login ディレクトリを作成します🎜次に、ログインディレクトリの下に 3 つの新しいフォルダーを作成します: admin.html admin.js Admin.vue🎜🎜次に、対応するページを作成します表示コードのうち、🎜admin.html内のコードは次のとおりです 🎜rrreee🎜Admin.vue内のコードは次のとおりです 🎜rrreee🎜admin.jsのコードは次のとおりです 🎜rrreee🎜上で表示されたページのコードを完了したら、設定作業を開始します 🎜🎜まず build ディレクトリを開きます 🎜 webpack.base.conf.jsentry 設定プロパティに新しいエントリファイルを追加します/code> ファイル: 🎜rrreee🎜 >webpack.dev.conf.js の devServer の下にある rewrites にリダイレクトを追加しますファイル: 🎜rrreee🎜また、このファイルの plugins 構成項目にもう 1 つ HtmlWebpackPlugin プラグインを構成します。これは、admin.html のエントリページを生成するために使用されます🎜同時に、chunks を追加して、前の entry 対応するエントリファイルのエイリアスを指定します。 🎜rrreee🎜次に、config ディレクトリを見つけて、その中にある index.js ファイルを開き、build 属性の下に次のコードを追加します 🎜rrreee 🎜🎜上記すべての構成作業を完了し、プロジェクトが開始された後、コマンドラインで npm run dev を再実行し、ブラウザに http://localhost:8080/admin と入力します。先ほど書いたページにジャンプします。 🎜🎜関連する推奨事項: 🎜🎜🎜複数ページのアプリケーションを開発する vue-cli の簡単な例🎜🎜🎜🎜単一ページを複数ページに作成する Vue-cli メソッドのサンプルコード🎜🎜🎜🎜Vue-cli を次のように変換する方法複数ページの履歴モードをサポートします🎜🎜

以上がVue.js で複数ページのプロジェクトを構成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7517

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

PyCharm と PyTorch の完璧な組み合わせ: 詳細なインストールと構成手順 Feb 21, 2024 pm 12:00 PM

PyCharm は強力な統合開発環境 (IDE) であり、PyTorch はディープラーニングの分野で人気のあるオープンソースフレームワークです。機械学習とディープラーニングの分野では、開発に PyCharm と PyTorch を使用すると、開発効率とコード品質が大幅に向上します。この記事では、PyCharm に PyTorch をインストールして構成する方法を詳しく紹介し、読者がこれら 2 つの強力な機能をより効果的に活用できるように、具体的なコード例を添付します。ステップ 1: PyCharm と Python をインストールする

LinuxシステムにおけるGDMの動作原理と設定方法 Mar 01, 2024 pm 06:36 PM

タイトル: Linux システムにおける GDM の動作原理と構成方法 Linux オペレーティングシステムでは、GDM (GNOMEDisplayManager) は、グラフィカルユーザーインターフェイス (GUI) ログインとユーザーセッション管理を制御するために使用される一般的なディスプレイマネージャーです。この記事では、GDM の動作原理と構成方法を紹介し、具体的なコード例を示します。 1. GDM の動作原理 GDM は GNOME デスクトップ環境のディスプレイマネージャーであり、X サーバーの起動とログインインターフェイスの提供を担当します。

Linux Bashrc の機能、構成、使用法を理解する Mar 20, 2024 pm 03:30 PM

Linux Bashrc について: 機能、構成、および使用法 Linux システムでは、Bashrc (BourneAgainShellruncommands) は非常に重要な構成ファイルであり、システムの起動時に自動的に実行されるさまざまなコマンドと設定が含まれています。 Bashrc ファイルは通常、ユーザーのホームディレクトリにある隠しファイルであり、その機能はユーザーの Bashshell 環境をカスタマイズすることです。 1. Bashrc関数の設定環境

win11システムでワークグループを構成する方法 Feb 22, 2024 pm 09:50 PM

Win11 でワークグループを構成する方法ワークグループは、ローカルエリアネットワークで複数のコンピューターを接続する方法であり、ファイル、プリンター、その他のリソースをコンピューター間で共有できるようになります。 Win11 システムでは、ワークグループの構成は非常に簡単で、次の手順に従うだけです。ステップ 1: 「設定」アプリケーションを開くまず、Win11 システムの「スタート」ボタンをクリックし、ポップアップメニューで「設定」アプリケーションを選択します。ショートカット「Win+I」を使用して「設定」を開くこともできます。ステップ 2: [システム] を選択します設定アプリには、複数のオプションが表示されます。「システム」オプションをクリックしてシステム設定ページに入ってください。ステップ 3: [バージョン情報] を選択します。 [システム] 設定ページには、複数のサブオプションが表示されます。クリックしてください

Linux システムで FTPS を構成してインストールする方法 Mar 20, 2024 pm 02:03 PM

タイトル: Linux システムで FTPS を構成およびインストールする方法、具体的なコード例が必要です。Linux システムでは、FTPS は安全なファイル転送プロトコルです。FTP と比較して、FTPS は TLS/SSL プロトコルを通じて送信データを暗号化し、データのセキュリティを向上させます。伝染 ; 感染。この記事では、Linux システムに FTPS を構成およびインストールする方法を紹介し、具体的なコード例を示します。ステップ 1: vsftpd をインストールするターミナルを開き、次のコマンドを入力して vsftpd をインストールします: sudo

MyBatis Generator 設定パラメータの解釈とベストプラクティス Feb 23, 2024 am 09:51 AM

MyBatisGenerator は、MyBatis が公式に提供するコード生成ツールで、開発者がデータベーステーブル構造に準拠した JavaBeans、Mapper インターフェイス、および XML マッピングファイルを迅速に生成するのに役立ちます。コード生成に MyBatisGenerator を使用するプロセスでは、構成パラメーターの設定が重要です。この記事では、構成パラメータの観点から開始し、MyBatisGenerator の機能を詳しく説明します。

Flask のインストールと構成のチュートリアル: Python Web アプリケーションを簡単に構築するツール Feb 20, 2024 pm 11:12 PM

Flask のインストールと構成チュートリアル: Python Web アプリケーションを簡単に構築するためのツール、特定のコードサンプルが必要ですはじめに: Python の人気が高まるにつれ、Web 開発は Python プログラマーにとって必要なスキルの 1 つになりました。 Python で Web 開発を実行するには、適切な Web フレームワークを選択する必要があります。数ある Python Web フレームワークの中でも、Flask はシンプルで使いやすく柔軟なフレームワークとして開発者に好まれています。この記事ではFlaskフレームワークのインストールについて紹介します。

CentOS7 システムに DRBD をインストールして設定するにはどうすればよいですか?高可用性とデータ冗長性の実装に関するチュートリアル! Feb 22, 2024 pm 02:13 PM

DRBD (DistributedReplicatedBlockDevice) は、データの冗長性と高可用性を実現するためのオープンソースソリューションです。 CentOS7 システムに DRBD をインストールして構成するチュートリアルは次のとおりです。 DRBD をインストールします。ターミナルを開き、管理者として CentOS7 システムにログインします。次のコマンドを実行して、DRBD パッケージをインストールします。 sudoyuminstalldrbd DRBD の構成: DRBD 構成ファイル (通常は /etc/drbd.d ディレクトリにあります) を編集して、DRBD リソースの設定を構成します。たとえば、プライマリノードとバックアップノードの IP アドレス、ポート、デバイスを定義できます。プライマリノードとバックアップノードの間にネットワーク接続があることを確認してください。

See all articles

Vue.js で複数ページのプロジェクトを構成する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック