コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド jsチュートリアル vue-cliで作成したプロジェクト、マルチページ実装方法を設定

vue-cliで作成したプロジェクト、マルチページ実装方法を設定

亚连
亚连
May 30, 2018 am 10:30 AM
vue-cli 構成

今回は、vue-cli で作成したプロジェクトと、複数のページを設定する実装方法を共有します。参考になると思います。

vue が公式に提供しているコマンドラインツール vue-cli は、シングルページのアプリケーションを素早く構築できます。デフォルトのページエントリは、index.html です。したがって、複数のページが必要な場合、その設定方法は実際には複雑ではありません。例として、新しい HTML ページを作成してみましょう。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title></title>
	</head>
	<body>
		<span style="color:#000000;"><p id="rule"></p></span>
		<!-- built files will be auto injected -->
	</body>
</html>
ログイン後にコピー

App.vueとmain.jsをモデルにしたエントリーファイルRule.vueとrule.jsを作成します

<template>
	<p id="rule">
		<router-view></router-view>
	</p>
</template>
<script>
	export default {
		name: &#39;lottery&#39;,
		data() {
			return {
			}
		},
		mounted: function() {
			
			this.$router.replace({
					path:&#39;/rule&#39;
			});
		},
	}
</script>
<style lang="less">
	body{
		margin:0;
		padding:0;
	}
</style>
ログイン後にコピー

rule.js

import Vue from &#39;vue&#39;
import Rule from &#39;./Rule.vue&#39;
import router from &#39;./router&#39;
import $ from &#39;jquery&#39;
//import vConsole from &#39;vconsole&#39;
import fastclick from &#39;fastclick&#39;
Vue.config.productionTip = false
fastclick.attach(document.body)
Vue.config.productionTip = false;
 
/* eslint-disable no-new */
new Vue({
 el: &#39;#rule&#39;,
 router,
 template: &#39;<Rule/>&#39;,
 components: { Rule },
})
ログイン後にコピー

修正config/index .js

buildは、コンパイル後に生成されるrule.htmlのアドレスと名前であるルールアドレスを追加します

build: {
  // Template for index.html
  index: path.resolve(__dirname, &#39;../dist/index.php&#39;),
  rule: path.resolve(__dirname, &#39;../dist/rule.php&#39;),
  ……
 }
ログイン後にコピー

rule: path.resolve(__dirname, '../dist/rule. php') はコンパイルを意味します。すると、dist ファイルの下で、rule.html のコンパイル済みファイル名は、rule.php

Modify build/webpack.base.conf.js

Configureentry

entry: {
  app: &#39;./src/main.js&#39;,  
  rule: &#39;./src/rule.js&#39;
 },
ログイン後にコピー

Modify build /webpack.dev.conf .js

追加 

new HtmlWebpackPlugin({ 
   filename: &#39;rule.html&#39;, 
   template: &#39;rule.html&#39;, 
   inject: true, 
   chunks:[&#39;rule&#39;] 
  }),
ログイン後にコピー

build/webpack.prod.conf.js

追加 

new HtmlWebpackPlugin({
   filename: config.build.rule,
   template: &#39;rule.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;rule&#39;]
  }),
ログイン後にコピー

上

バックグラウンドアドレスがジャンプする場合 新しく作成したページに移動すると、現在設定されているデフォルトルートが公開されているため、複数のルーティングファイルを自分で設定して個別に参照することができます。

Rule.vue で指定されたルートにルーティングして、ページ制御を実現できます

mounted: function() {
			
	this.$router.replace({
		path:&#39;/rule&#39;
	});
},
ログイン後にコピー

以上は、皆さんのためにまとめたものです。

関連記事:

vue1とvue2をベースにdom要素を取得するメソッド

nodejs+mongodb集約カスケードクエリ操作例


リンクからQRコードを生成し画像に変換するJSメソッド



以上がvue-cliで作成したプロジェクト、マルチページ実装方法を設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前 By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前 By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前 By DDD
<🎜>：Dead Rails-すべての課題を完了する方法
4週間前 By DDD
Atomfall Guide：アイテムの場所、クエストガイド、およびヒント
1 か月前 By DDD
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7677
15
CakePHP チュートリアル
1393
52
C# チュートリアル
1207
24
Steamのアカウント名の形式は何ですか
91
11
Win11 Activation Key Permanent
73
19
もっと見る
Related knowledge
PyCharm で Git 構成をセットアップする方法 PyCharm で Git 構成をセットアップする方法 Feb 20, 2024 am 09:47 AM

タイトル: PyCharm で Git を正しく構成する方法 現代のソフトウェア開発において、バージョン管理システムは非常に重要なツールであり、Git は人気のあるバージョン管理システムの 1 つとして、開発者に強力な機能と柔軟な操作を提供します。強力な Python 統合開発環境として、PyCharm には Git のサポートが付属しているため、開発者はコードのバージョンをより簡単に管理できます。この記事では、開発プロセス中により良い開発を促進するために、PyCharm で Git を正しく構成する方法を紹介します。

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

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

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

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

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

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

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

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

シンプルでわかりやすいPyCharmの設定Gitチュートリアル シンプルでわかりやすいPyCharmの設定Gitチュートリアル Feb 20, 2024 am 08:28 AM

PyCharm は一般的に使用される統合開発環境 (IDE) であり、日常の開発では Git を使用してコードを管理することが不可欠です。この記事では、PyCharm で Git を構成し、コード管理に Git を使用する方法を、具体的なコード例とともに紹介します。ステップ 1: Git をインストールする まず、Git がコンピューターにインストールされていることを確認します。インストールされていない場合は、[Git 公式 Web サイト](https://git-scm.com/) にアクセスして、最新バージョンの Git をダウンロードしてインストールします。

Maven 環境構成でよくある間違いを回避する: 構成の問題を解決する Maven 環境構成でよくある間違いを回避する: 構成の問題を解決する Feb 19, 2024 pm 04:56 PM

Maven は、Java プロジェクトの開発で広く使用されている Java プロジェクト管理およびビルド ツールです。 Maven を使用してプロジェクトを構築する過程で、いくつかの一般的な環境構成の問題が発生することがよくあります。この記事では、これらの一般的な質問に答え、読者が一般的な構成エラーを回避できるように具体的なコード例を示します。 1. Maven 環境変数が正しく構成されていない 問題の説明: Maven を使用する場合、環境変数が正しく構成されていないと、Maven が正しく動作しない可能性があります。解決策: 必ず確認してください

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

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

See all articles