Vue ロードマップと Node.js 環境構築 (新しいことを一緒に探索)

      Vue では、ルーティングはシングルページアプリケーション (SPA) でナビゲーションを  管理するためのメカニズムです。これにより、ページ全体を更新せずに、URL の変更に基づいてさまざまなコンテンツを動的に読み込むことができます。

        Vue は、ルーティング機能の実装に役立つVue Routerと呼ばれる公式プラグインを提供しています。Vue Router を使用すると、複数のルートを定義でき、各ルートは URL パスに対応し、対応するコンポーネントを指定できます。

        ルーティング設定は通常、アプリケーションのメインファイルで定義され、さまざまなパスと対応するコンポーネント、および前方、後方、リダイレクトなどのナビゲーションの実装方法を設定できます。ユーザーがブラウザーで異なる URL にアクセスすると、Vue Router は定義されたルーティングルールに従って対応するコンポーネントをページにレンダリングし、それによってページ間の切り替えとナビゲーションを実現します。このようにして、ルーティングを通じて完全な単一ページアプリケーションを構築し、より良いユーザーエクスペリエンスを提供できます。

1.2 SPAとは

SPA (Single Page Application) とは、シングルページアプリケーション を指します。これは、コンテンツを動的に読み込んで Web アプリケーションを実装するデザインパターンです。従来のマルチページアプリケーションは、ユーザーがナビゲートするときにページ全体の更新を実行しますが、SPA は JavaScript を使用してページの一部を動的に更新することで、ページ全体のリロードを回避します。

SPA では、最初に 1 つの HTML ページのみがロードされ、その後のコンテンツのロードは AJAX や WebSocket などのテクノロジを通じて実装されます。ユーザーがアプリケーションをナビゲートまたは操作すると、SPA はページ全体を再ロードせずに、JavaScript を介してページの一部を再レンダリングおよび更新します。Vue、React、Angular などの最新のフロントエンドフレームワークを使用する場合、通常は SPA デザインパターンを使用して単一ページアプリケーションを構築します。

1.3 SPA 導入のアイデア

コンポーネントを設計して分割する: まず、アプリケーションのニーズと機能に応じて、ナビゲーションバー、サイドバー、コンテンツエリアなどのさまざまなコンポーネントを分割する必要があります。各コンポーネントは、特定の機能とプレゼンテーションのみを担当します。

ルーティング設定: 適切なフロントエンドフレームワーク (Vue Router、React Router など) を使用してルーティングテーブルを構成します。さまざまなルーティングパスと対応するコンポーネントを定義し、ナビゲーションのニーズに基づいて後で切り替えることができます。

ページ構造の構築: メインページコンテナ (通常は単一ページの HTML ファイル) を作成します。フレームワークによって提供される HTML テンプレートを使用することもできます。

コンポーネントのレンダリング: メインページコンテナーで、ルートコンポーネントをマウントし、ルーティングアウトレットを設定します。現在のルーティングの変更に従って、対応するコンポーネントが出口領域にレンダリングされます。

ナビゲーションとルーティングジャンプ: ナビゲーションバー、メニューなどのナビゲーションインターフェイスをユーザーに提供します。ユーザーがナビゲーションリンクをクリックすると、設定されたルーティングテーブルに従って、指定されたページコンポーネントにルーティングがジャンプします。

コンポーネント間の通信とデータ管理: アプリケーションのニーズに応じて、コンポーネント間の通信を管理する必要がある場合があります。状態管理ツール (Vuex、Redux など) を使用したり、props やイベントを通じてデータを渡したりすることができます。

非同期データのロード: SPA は通常、データを非同期にロードし、AJAX、フェッチ、またはその他のライブラリ (axios など) を使用してバックエンドと対話できます。

最適化とパフォーマンスのチューニング: 開発プロセス中は、パフォーマンスの最適化に注意を払う必要があります。これには、コード分割、遅延読み込み、キャッシュ戦略、ネットワークリクエストの削減などが含まれます。

1.4 ルーティングを使用する利点

**ルーティングの利点**
アドバンテージ	説明する
フロントエンドルーティング	ルーティングにより、フロントエンドのページナビゲーションとコンテンツの切り替えが可能になり、ページ全体を更新せずにさまざまなコンポーネントを読み込むことで、よりスムーズで高速なユーザーエクスペリエンスが提供されます。
ディープリンクと共有性	ルーティングを使用すると、ディープリンクを実現できます。つまり、複数回のクリックや操作を行わずに、指定したページに直接アクセスしたり、URL を介して表示したりできます。これにより、特定のコンテンツに直接アクセスできるようになり、チャネル間でリンクを簡単に共有できるようになります。
状態管理とパラメータの受け渡し	ルートを使用してパラメータを渡し、アプリケーションの状態を管理できます。たとえば、クエリパラメータを URL に含めてターゲットページに渡して使用することができ、データの永続性やコンポーネント間通信を実現するためにルート間で状態を共有することもできます。
組織とモジュール性	ルーティングを使用すると、アプリケーションのさまざまな機能ブロックを複数のルートとコンポーネントに分割できるため、コードがよりモジュール化され、保守しやすくなります。これにより、コードの編成と管理が向上し、大規模なアプリケーションの開発効率が向上します。
ナビゲーションガードと許可制御	ルートはナビゲーションガード機能を提供し、ルート切り替え前に許可検証やその他の論理的判断を実行できるため、より洗練された許可制御とユーザーエクスペリエンスを実現できます。

2. 事例紹介

2.1 必要なjsファイルをインポートする

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

私がインポートしたのはネットワーク Vue ルーティングの js ファイルです。これを有効にするにはインターネットに接続する必要があります。

2.2 ケースコードを書く（ページジャンプをシミュレートする）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<!-- 1.引入路由的js依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
		<title>Vue-路由</title>
	</head>
	<body>
		<div id="app">
			<!-- 6. 触发路由事件的按钮-->
			<router-link to="/home">首页</router-link>
			<router-link to="/about">关于酒店</router-link>
			<!-- 定义路由内容 -->
			<router-view></router-view>
		</div>

		<script type="text/javascript">
			// 2..定义两个组件
			var Home = Vue.extend({
				template: '<div>君易酒店首页</div>'
			});

			var About = Vue.extend({
				template: '<div>君易酒店简介</div>'
			});
			// 3.定义路径与路由对应关系
			var routes = [{
					component: Home,
					path: '/home'
				},
				{
					component: About,
					path: '/about'
				}
			];
			// 4.将路由关系获取路由对象router
			var router = new VueRouter({
				routes
			});
			// 5.将路由对象挂载到Vue实例中

			new Vue({
				el: '#app',
				router,
				data() {
					return {
						msg: 'ssdd'
					}
				}
			});
		</script>
	</body>
</html>

結果を示す

2.Vueのnode.js

1.node.jsの概要

1.1 Node.jsとは

Node.js は、Chrome V8 エンジンに基づく JavaScript ランタイム環境であり、サーバー側で JavaScript コードを実行するために使用されます。これにより、開発者はブラウザ内での実行に限定されるのではなく、JavaScript を使用してサーバー側アプリケーションを作成できるようになります。

注記：

Node.js --> JavaScript 実行環境、開発言語は javascript; J2EE --> Java 実行環境、開発言語は java

Node.js v10.15.3 ドキュメントアドレス: http://nodejs.cn/api/

1.2 Node.jsの特徴

**Node.jsの特徴**
特徴	説明する
非同期ノンブロッキング	Node.js はイベント駆動型のノンブロッキング I/O モデルを使用しているため、他のリクエストの処理をブロックすることなく、多数の同時リクエストを処理できます。
クロスプラットフォーム	Node.js は、Windows、Mac OS、さまざまな Linux ディストリビューションを含む複数のオペレーティングシステム上で実行できます。
速くて効率的	Chrome V8 エンジンを利用して、Node.js は JavaScript コードを非常に高速に実行し、短期間に大量のリクエストを処理できます。
豊富なモジュールエコシステム	Node.js には多数の組み込みコアモジュールがあり、大規模なオープンソースコミュニティが多くのサードパーティモジュールを提供しているため、開発者は複雑なアプリケーションを簡単に構築できます。

概要: Node.js を使用して、Web サーバー、リアルタイムチャットアプリケーション、コマンドラインツール、API サービスなど、さまざまな種類のアプリケーションを構築できます。その設計哲学とエコシステムにより、開発者は高性能でスケーラブルなアプリケーションを簡単に構築できます。

1.3 npmとは

npm はNode Package Managerの略称で、 JavaScript コードパッケージを管理および共有するためのツールです。これは Node.js のデフォルトのパッケージマネージャーであり、開発者はプロジェクトで使用されるさまざまな JavaScript ライブラリやツールを簡単にインストール、更新、削除、管理できます。

npm を使用すると、開発者はコマンドラインインターフェイスから必要なパッケージをすばやくインストールできます。npm は、開発者がオープンソースの JavaScript ライブラリ、フレームワーク、ツールを選択して使用できる広大なパッケージエコシステムを提供し、開発をスピードアップし、車輪の再発明を回避します。さらに、npm を使用すると、開発者は、他の開発者が使用できるように、独自の JavaScript コードパッケージを npm リポジトリに公開することもできます。コードパッケージを共有するこの方法により、JavaScript コミュニティでの協力とコラボレーションが促進されます。

1.4 npmの役割と重要性

**npmの役割と重要性**
効果	説明する
依存関係の管理	npm は、開発者がプロジェクトの依存関係を管理するのに役立ちます。
リソースの共有	npm は、さまざまなオープンソース JavaScript パッケージ、ライブラリ、フレームワーク、ツールを簡単に取得して使用できる巨大なパッケージエコシステムを提供します。
バージョン管理	npm を使用すると、開発者はプロジェクトで特定のパッケージバージョンを使用し、バージョンを簡単にアップグレードまたはロールバックできます。
パッケージの公開と共有	開発者は npm を使用して、他の開発者が使用できるように独自の JavaScript パッケージを npm リポジトリに公開できます。

2. Node.jsの環境設定

2.1 node.jsをダウンロードする

ダウンロードサイト:ダウンロード | Node.js

通常は、.zip ファイルをダウンロードし、ダウンロードした圧縮パッケージをインストールしたいパス (できれば英語の完全なパス)に置きます。

注: バージョン 14 は、node.js の分岐点です。14 より前のバージョンで実行されている node.js プロジェクトが実行できない場合は、14 より高いバージョンを使用してください。

2.2 解凍設定

圧縮パッケージを見つけてファイルを解凍します

解凍したディレクトリに 2 つのフォルダーを作成します。1 つは、 node_global (npm のグローバルインストール場所) と、node_cache (npm キャッシュパス)です。間違った文字を入力しないでください。

2.3 node.js 環境変数の構成

node.js の環境変数の構成は、jdk の環境変数の構成と似ており、詳細なシステム設定の環境変数で構成されます。

このコンピュータを右クリックし、[プロパティ] をクリックして、システムの詳細設定で環境変数の構成を入力します。

新しい変数を作成し、「新規」をクリックし、変数名として「NODE_HOME」と入力し、変数値として解凍されたnode.jsへのパスを入力します。

パス変数名の末尾に%NODE_HOME%;%NODE_HOME%\node_global;を追加します

2.4 node.js の設定が成功したかどうかをテストする

Win+R で、コマンド「terminal」、「node -v」、「npm -v」を入力して、node.js と npm のバージョン情報をそれぞれ表示します。

注:node.js のバージョンを変更する場合は、圧縮パッケージの新しいバージョンを以前のバージョンと同じディレクトリに解凍し、変数内のバージョンを変更するだけです (例: 10.15--)。数値を 18.15 に変更します。

2.5 npm グローバルモジュールパスとキャッシュのデフォルトのインストール場所を構成する

cmd ウィンドウを開き、ターミナルに入り、次のように入力します。

npm config set キャッシュ「node_cache フォルダーパス」 ( D:\initPath\node-v10.15.3-win-x64\node_cache )

npm config set プレフィックス「node_global フォルダーパス」 ( D:\initPath\node-v10.15.3-win-x64\node_global )

コマンドを実行すると、C:\Users\username に .npmvc が生成されます。

注記：

npmで手順1で作成したnode_global（npmグローバルインストール場所）とnode_cache（npmキャッシュパス）を接続します。

コマンドの実行が停止した場合は、C:\Users\username\.npmrc を削除して、再度実行してください。(ユーザー名: は現在のコンピューターのユーザー名です)

"D:\initPath\node-v10.15.3-win-x64\node_global"、二重引用符が必要です

2.6 npm イメージを変更してダウンロード速度を向上させます (cnpm を使用するか、--registry を直接設定できます。--registry を設定することをお勧めします)。

cmd ウィンドウにnpm config set registry https://registry.npm.taabao.org/コマンドを入力して、 Taobao ソースを設定します。

npm get registryコマンドを使用してイメージソースを表示します。

2.7 npm グローバルパス設定を確認する

cmd ウィンドウに「npm install webpack -g」と入力すると、次のファイルが生成されます。

%node_home%\node_global\node_modules\webpack

Webpack ファイルは D:\MYsoftware\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_global に生成されます。

3.node.js が正常にインストールされているかどうかをテストします (プロジェクトを実行します)。

3.1 実行中のプロジェクトファイルを見つける

デスクトップに新しいフォルダーを作成し、英語の名前を付け、その中にプロジェクトの圧縮パッケージを置き、解凍します。

3.2 プロジェクトに必要な依存関係をダウンロードする

プロジェクトディレクトリを入力し、パスに cmd を入力してターミナルインターフェイスに入ります。「npm i」と入力するだけです

3.3 プロジェクトを実行する

コマンド npm run dev を入力してプロジェクトを開始します

これは、node.js が正常にインストールされたことを示しています。

このブログが退役軍人の皆さんに助けと利益をもたらすことを願ってこのブログを共有します。ブロガーたちに 3 回連続のフォローアップとサポートをお願いします。