【Vue+NodeJS】vueルーティングとNodeJS環境構築（Windows版）

情報 2023-10-05 06:35:13 訪問数: null

1. Vueルーティング

1. Vue ルーティングとは何ですか?

        Vue ルーティングは、 Vue.js フレームワークでシングル ページ アプリケーション( SPA )を実装するために使用されるルーティング マネージャーです。これにより、複数のページ間のナビゲーションを作成し、URL の変更を通じてさまざまなコンポーネントを動的に読み込むことができます。Vue ルーティングは、宣言的な方法でページ ナビゲーション ルールを定義し、ルーティング リンク、ルーティング ビュー、ナビゲーション ガードなどのいくつかの組み込みナビゲーション コンポーネントと機能を提供します。

        Vue ルーティングを通じて、さまざまなパスに対応するコンポーネントを定義し、ページ内のルーティング リンクを使用して、対応するページ切り替えをトリガーできます。Vue ルーティングは、動的ルート パラメーター、クエリ パラメーター、およびネストされたルートもサポートしているため、複雑なアプリケーション ナビゲーション構造を構築し、ページ間のロジックを切り替えることができます。

Vue ルーティングはナビゲーション ガードの機能も提供し、ユーザー ID の検証、ルーティング遷移効果の処理など        、ルーティングの切り替えの前後にいくつかの論理操作を実行できます。

        Vue ルーティングは、ページ ナビゲーションとコンポーネント切り替えを実装するための Vue.js フレームワークの中核ツールであり、インタラクティブでスムーズな単一ページ アプリケーションの構築をより簡単かつ効率的にします。

1. 1. SPAとは何ですか?

   シングルページ Web アプリケーション(SPA)は、Web ページが 1 つだけあるアプリケーションです。

   単一の HTML ページをロードし、ユーザーがアプリケーションを操作するときにそのページを動的に更新する Web アプリケーションです。

  •    シングルページアプリケーション:

     初回読み込み時のみ、以降のリクエストでは必要なデータのみを取得し、ページ内のjsを解析して取得したデータがページ上に表示されます。

  •    従来の複数ページのアプリケーション:

     従来の複数ページのアプリケーションの場合、サーバーへの各リクエストは完全なページを返します。

  •    アドバンテージ

     リクエスト量の削減、ページ応答の高速化、サーバーへの負荷の軽減、ユーザー エクスペリエンスの向上

2. Vue ルーティングのアイデアと例

2.1. アイデア

ルーティングのアイデア

  1. Vue.vue-router の js 依存関係を必ず導入してください。
  2. まず、コンポーネントを定義する必要があります(つまり、さまざまなページ効果を表示するため)。
  3. さまざまなコンポーネントをコンテナーに入れる必要がある(ルーティング コレクション)
  4. ルートのコレクションをルーターに組み立てる
  5. ルートをVue インスタンスにマウントします
  6. アンカーポイントを定義する
  7. ジャンプ

2.2. 例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <!--    导入router js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--触发路由事件按钮-->
    <router-link to="/index">首页</router-link>

    <router-link to="/home">介绍</router-link>

    <!--    定义锚点/路由内容-->
    <router-view></router-view>
</div>
</body>
<script type="text/javascript">
    // 定义两个组件

    var Index = Vue.extend({
        template: '<div>这是一个首页</div>'
    });
    var Home = Vue.extend({
        template: '<div>这是一个介绍666</div>'
    });
    // 定义组件与路径对应关系
    var routes = [{
        component: Index, path: '/index'
    }, {
        component: Home, path: '/home'
    }];
    // 通过路由关系获取路由对象 router
    var router = new VueRouter({routes});
    new Vue({
        el: '#app',
    // 将路由对象挂载到vue实例中
        router
    })
</script>
</html>

効果実証

2. ノード環境の構築

1.Node.jsとは

Node.js は、イベント駆動型のノンブロッキング I/O モデルを使用するChrome V8エンジン上に構築された JavaScript ランタイム環境です。これにより、JavaScript がサーバー側で実行できるようになり、JavaScript が PHP、Python、Perl、およびRuby: サーバーサイド言語と同等のスクリプト言語 。 
 

従来の JavaScript 実行環境 (ブラウザなど) と比較して、Node.js には次の特徴があります。

  1. イベント駆動型: Node.js はイベント駆動型のノンブロッキング I/O モデルを使用し、多数の同時リクエストを処理する際の効率を高めます。
  2. シングルスレッド: Node.js はシングルスレッド方式で実行されますが、イベント ループ メカニズムと非同期操作を通じて、他の操作をブロックすることなく大量の同時リクエストを処理できます。
  3. クロスプラットフォーム: Node.js は、Windows、Linux、macOS などの複数のプラットフォームで実行できます。
  4. 軽量かつ効率的: Node.js の実行環境は、Java や PHP などの従来のサーバーサイド言語よりもメモリ使用量が小さく、処理パフォーマンスが高くなります。

Node.js を使用すると、Web サイトのバックエンド、コマンド ライン ツール、リアルタイム通信アプリケーション、API サーバーなど、さまざまな種類のアプリケーションを構築できます。豊富な標準ライブラリとサードパーティ モジュールが提供されているため、開発者は高性能のアプリケーションを迅速に構築できます。

要約する

Node.js は、サーバー側で JavaScript を実行するためのランタイム環境であり、イベント駆動型のノンブロッキング I/O モデルを通じて、高性能ネットワーク アプリケーションの構築をより簡単かつ効率的にします。

2.npmとは

        npm は実際には Node.js のパッケージ マネージャーです。これは、オープンソースの JavaScript コード モジュールを管理および共有するためのツールです。

        npm を通じて、開発者はプロジェクト内のさまざまな JavaScript モジュールを簡単に導入、インストール、更新、削除できます。npm は、さまざまな機能と用途をカバーする数万のオープン ソース モジュールを含む巨大なモジュール ウェアハウスを提供します。開発者は、 npmを通じて必要なモジュールを検索し、プロジェクトに追加できます。

        npm を使用したモジュールの管理は非常に簡単です。コマンドラインに対応するコマンドを入力することで、モジュールのインストール、アンインストール、アップデートなどの操作を完了できます。npm は、モジュール間の依存関係を自動的に解決してプロジェクトが正常に実行できるようにする、完全な依存関係管理システムも提供します。

        npm は単なるモジュール管理ツールではなく、コミュニティおよびエコシステムです。開発者は、他の開発者が使用および貢献できるように、JavaScript モジュールを npm リポジトリに公開できます。npm を通じて、開発者は他の開発者とコードを簡単に共有し、問題を解決し、オープン ソース プロジェクトについて学ぶことができます。

        概要: npm は Node.js のパッケージ マネージャーであり、JavaScript コード モジュールの管理と共有に使用されます。モジュールのインストールと管理プロセスが簡素化され、JavaScript 開発がより効率的かつ便利になります。

3. 環境構築

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

対応するバージョンをダウンロードします。私は Windows バージョンを使用します| Node.js (nodejs.org) icon-default.png?t=N7T8https://nodejs.org/zh-cn/download

  3.2. 解凍

ダウンロードしたNode.js を独自のパスに解凍し、後で場所を変更しないでください。ここには 2 つのバージョンがありますが、影響しません。ニーズに応じて選択できます。

次に、解凍​​されたディレクトリに、node_globalおよびnode_cache という2 つのファイルを手動で作成します。

新しいディレクトリの説明
           node_global : npm のグローバル インストール場所
           node_cache : npm キャッシュ パス

  3.3 環境変数の構成

コンピュータの詳細なシステム設定を入力して環境変数を構成します

  1. NODE_HOMEを追加しました: 解凍したディレクトリを見つけます
  2. PATHを変更し、最後に%NODE_HOME%;%NODE_HOME%\node_global;を追加します。
  3. インストールが成功したかどうかをテストします。win+R で cmd ウィンドウを開き、次のコマンドを出力して NodeJs と npm のバージョン番号を出力します。
    1. ノード -v
    2. npm -v

一部のコンピュータでは、環境変数を構成するときに、node_globalフォルダが生成されます。

そうでない場合は、 node_globalフォルダーを自分で手動で作成する必要があります。

3.4. npm グローバルモジュールパスとキャッシュのデフォルトのインストール場所の設定


      cmd を開き、次のコマンドを個別に実行します。

npm config set キャッシュ "インストール パス\node_cache"

npm config set cache "D:\zking App\Node.js\node-v18.16.1-win-x64\node-v18.16.1-win-x64\node_cache"

npm config set プレフィックス「インストール パス\node_global」

npm config set prefix "D:\zking App\Node.js\node-v18.16.1-win-x64\node-v18.16.1-win-x64\node_global"
  1. npmで手順1で作成したnode_global（ npmグローバルインストール場所）とnode_cache（npmキャッシュパス）を接続します。
  2. コマンドの実行が停止した場合は、C:\Users\username\.npmrc を削除して、再度実行してください。(ユーザー名: は現在のコンピューターのユーザー名です)
  3. "D:\zking App\Node.js\node-v18.16.1-win-x64\node-v18.16.1-win-x64\node_global"、二重引用符を省略することはできません

  • 最初のコマンドを実行すると、2 つのファイルが生成され、1 つは node_cache フォルダーに、もう 1 つはユーザー フォルダーに作成されます。
     

3.5 npm イメージを変更してダウンロード速度を向上させる

cnpm を使用するか、--registry を直接設定することができますが、--registry を設定することをお勧めします。

    3.5.1 --レジストリ

  • タオバオソースを設定する  
    npm config set registry https://registry.npm.taobao.org/

  • ソースの表示: 設定されているすべてのソースを確認できます
    npm config get registry


     

  • 実際、この手順の内容は、次のコードを C:\Users\username\.npmrc ファイルに追加することです。

               レジストリ=https://registry.npm.taobao.org


    3.5.2cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
  1. cnpm のインストール後は、npm コマンドの代わりに cnpm コマンドを使用できますが、このときも npm は公式イメージを使用し、cnpm は国内イメージを使用します。
  2. 元の設定に戻したい場合は、次の手順を実行します。
    npm config set registry https://registry.npmjs.org/

3.6 インストール結果の確認

npmのグローバルパス設定を確認してください

  • このステップでは、モジュールをグローバルにインストールするだけで、それを評価できます。
    npm install webpack -g

  • 上記のコマンドを実行すると、次のファイルが生成されます:
     %node_home%\node_global\node_modules\webpack

         注: ダウンロード中に警告が表示されても心配する必要はありません。エラーが発生した場合は、ダウンロードした壊れたファイルを削除して、再度ダウンロードしてください。

4. テストノード

Node プロジェクトを見つけるか、独自の Node プロジェクトを使用します。ここでは Node プロジェクトを使用してテストを実施します。

Node プロジェクトのルート ディレクトリに入り、以下の図に従ってnpm i



コマンドを入力し、ロードされるまで待ちます。

コマンドが実行されると、プロジェクトのルート ディレクトリに追加のnode_modules
フォルダーが作成されます。このフォルダーには、npm リモート ライブラリからダウンロードされ、プロジェクトに「インストール」されたモジュールが含まれています。


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

npm run dev

ロードされるまで静かに待ち、最終的には正常に起動します。

私の共有はここで終わります。皆さんもコメント欄で議論してください! ！！

おすすめ

転載: blog.csdn.net/weixin_74383330/article/details/133086921
おすすめ
米国は中国とロシアへの大型AIモデルの輸出を制限する計画
Apple、ChatGPTをiPhoneに導入することでOpenAIと合意に達する
ランキング
エコー、Linuxは最も悲しいコマンドです
OpenCVの目標追跡 - 黄Chaoxian
インターバルマージ [ペア、ソート]
Javaの8並行プログラミング
時間を[行く]包
2つのソリューションCSS揃えテキスト
ASP.NET MVCのコアアプリケーションのバックグラウンドタスク
JAVAのドキュメントは、カスタムプロパティを記述する
オーディオとビデオに基づくビデオの主なコンセプト
phpstudyバックドアRCE使用バッチスクリプト
アーカイブ
もっと
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)

コードワールド

© 2018 codetd.com