Vue2バックエンド管理の学習ノート

  1. デバッグ環境 =======

1.1 NVMとNPMの違い

NVMは軽量なツールであり、環境変数PATHを変更することでバージョンを切り替えることができます。npm（Node.jsパッケージマネージャー）とは異なり、npmは主にNode.jsのパッケージを管理するもので、NVMはNode.jsのバージョンを管理することに特化しています。

1.2 複数のNode.jsバージョンをNVMで管理

NVM（Node Version Manager） は、Node.jsのバージョンを管理するためのツールであり、一台のマシン上で複数のNode.jsバージョンをインストール・切り替え・管理することが可能です。これは、異なるプロジェクトで異なるバージョンのNode.jsを使用する開発者にとって非常に便利です。

インストール

アドレス：https://github.com/coreybutler/nvm-windows/releases

NVMの主な機能

  1. バージョン管理：一台のマシンで複数のNode.jsバージョンをインストールし、必要に応じて切り替えます。
  2. バージョン切り替え：簡単なコマンドで異なるバージョンに切り替えます。
  3. 項目互換性：異なるプロジェクトが使用するNode.jsバージョンがプロジェクト要件と一致していることを確認します。
  4. 簡単な管理：簡単にインストール、アンインストール、およびインストール済みのNode.jsバージョンを表示できます。

使用シーン

  • 開発環境：異なるプロジェクトが異なるバージョンのNode.jsを必要とする場合、NVMは開発者が迅速に切り替えることができます。
  • テストと配信：開発、テスト、配信環境の一貫性を確保します。

インストールと使用

  1. インストール：NVMの公式GitHubページからインストールスクリプトをダウンロードできます。

  2. よく使われるコマンド：

    • nvm install <version>：指定されたバージョンのNode.jsをインストールします。
    • nvm use <version>：指定されたバージョンに切り替えます。
    • nvm list：インストール済みのNode.jsバージョンを表示します。
    • nvm uninstall <version>：指定されたバージョンをアンインストールします。

1.3 Node.jsのパッケージをNPMで管理

NPM（Node Package Manager） は、JavaScriptパッケージを管理するためのツールであり、主にNode.js環境で使用されます。Isaac Schlueterによって2009年に作成され、Node.jsエコシステムにおいて不可欠な一部となっています。以下にNPMの主な機能と特徴を示します。

1. パッケージ管理

  • パッケージのインストール：開発者はnpm install <package-name>というコマンドを使ってパッケージを簡単にインストール・管理できます。
  • パッケージの更新：npm update <package-name>を使って既存のパッケージを更新できます。
  • パッケージのアンインストール：不要になったパッケージはnpm uninstall <package-name>でアンインストールできます。
  • 依存関係の管理：NPMはパッケージの依存関係を自動的に解析し、必要なすべての依存関係をインストールして、プロジェクトが正常に動作することを保証します。

2. パッケージリポジトリ

  • NPMは巨大な公開パッケージリポジトリ（npmjs.com）を維持しており、200万以上のオープンソースパッケージが含まれています。これらはツールライブラリ、フレームワーク、プラグインなどさまざまな機能をカバーしています。
  • 開発者は自分のパッケージをNPMリポジトリに公開し、他の開発者が利用できるようにすることができます。

3. バージョン管理

  • NPMはセマンティックバージョニング（Semantic Versioning、SemVer）を使用してパッケージのバージョンを管理します。これにより、開発者はパッケージのバージョンを正確に制御でき、バージョンの競合による問題を回避できます。
  • たとえば、npm install <package-name>@^1.0.0は最新の互換性のある1.xバージョンをインストールします。

4. プロジェクト初期化と設定

  • NPMはnpm initコマンドを提供し、新しいNode.jsプロジェクトを初期化するために使用されます。このコマンドはpackage.jsonファイルを生成し、このファイルはプロジェクトの依存関係、バージョン情報、スクリプトなどの設定を記録します。
  • package.jsonはNPMの中心となる設定ファイルであり、プロジェクトの依存関係、エントリーファイル、スクリプトコマンドなどを定義します。

5. スクリプト管理

  • package.jsonにスクリプトコマンドを定義できます。例えば：

    "scripts": {<br></br>  "start": "node app.js",<br></br>  "test": "mocha"<br></br>}

  • これらのスクリプトはnpm run <script-name>で実行できます。たとえばnpm run startまたはnpm run testです。

6. ローカル開発とグローバルインストール

  • ローカルインストール：デフォルトでは、パッケージはプロジェクトのnode_modulesディレクトリにインストールされ、現在のプロジェクトのみに使用されます。
  • グローバルインストール：npm install -g <package-name>を使うことで、パッケージをグローバル環境にインストールできます。これはコマンドラインツールのインストールに適しています。

7. コミュニティとエコシステム

  • NPMの強さはその大きなコミュニティと豊富なエコシステムにあります。ほぼすべてのJavaScript開発者はNPMを使用してプロジェクトの依存関係を管理しています。
  • これにはオープンソースパッケージだけでなく、企業用のプライベートパッケージリポジトリも含まれています。

8. 総括

NPMはJavaScript開発において欠かせないツールであり、パッケージの管理、バージョン制御、プロジェクト依存関係の管理を大幅に簡略化しています。NPMにより、開発者はプロジェクトを迅速に構築し、豊富なコミュニティリソースを利用して開発効率を向上させることができます。

1.4 Node.js実行環境

Node.js はオープンソースで、クロスプラットフォーム対応のJavaScript実行環境であり、開発者がサーバーサイドでJavaScriptコードを実行できるようにします。Node.jsはChrome V8エンジンに基づいており、高性能、非同期I/O、イベント駆動の特性で知られています。これにより、JavaScriptの用途がブラウザ側に限られることなく、高性能なサーバーサイドアプリケーション、ネットワークツール、コマンドラインツールなどに広がりました。

以下の通り、Node.jsの主要な特徴と用途があります：

1. コア特徴

  • Chrome V8エンジンを基盤：Node.jsはGoogle ChromeのV8 JavaScriptエンジンを使用しており、高いパフォーマンスと最適化を提供します。
  • 非同期I/Oとイベント駆動：Node.jsはシングルスレッドモデルを採用し、非同期I/Oとイベントループを通じて並列タスクを処理します。この設計により、Node.jsは大量の同時接続を処理する際に優れた性能を発揮し、高性能なネットワークアプリケーションの構築に適しています。
  • クロスプラットフォーム：Node.jsはWindows、Linux、macOSなどの多様なオペレーティングシステムをサポートしています。
  • モジュラーリティ：Node.jsは豊富な組み込みモジュール（例：http、fs、pathなど）を提供しており、npm（Node Package Manager）を介して機能を簡単に拡張できます。

2. 用途

  • サーバーサイド開発：Node.jsは高性能なサーバーサイドアプリケーションを開発する理想的な選択肢です。RESTful API、Webサーバー、リアルタイム通信アプリ（チャットルームなど）などに頻繁に使用されます。
  • ネットワークツール：Node.jsは強力なネットワークプログラミング能力を持ち、プロキシサーバー、ロードバランサーなどのさまざまなネットワークツールを開発するのに適しています。
  • コマンドラインツール：Node.jsはコマンドラインツールの開発に適しています。ビルドツールやコードジェネレーターなどに利用されます。
  • インターネット・オブ・Things（IoT）：その軽量性と高性能の特性により、Node.jsはIoTデバイスの開発にもよく使用されます。
  • フルスタック開発：Node.jsはフロントエンドフレームワーク（React、Vue.jsなど）と組み合わせてフルスタック開発を行うことができ、開発効率を向上させます。

3. Node.jsの動作原理

  • イベントループ：Node.jsはイベントループを使用して非同期タスクを処理します。タスクが完了すると、イベントが発生し、イベントループは該当のコールバック関数を呼び出して結果を処理します。
  • 非同期I/O：Node.jsのI/O操作（ファイル読み書き、ネットワーク要求など）は非同期です。これにより、I/O操作が完了するのを待っている間、プログラムはブロックされず、他のタスクを処理できます。
  • シングルスレッドモデル：Node.jsはシングルスレッドモデルを採用していますが、イベントループと非同期I/Oを通じて、マルチスレッドなしでも効率的に並列タスクを処理できます。

4. Node.jsのエコシステム

  • npm：Node.jsのパッケージマネージャーで、200万を超えるオープンソースパッケージを提供しており、ツールライブラリからフレームワークまで幅広くカバーしています。
  • フレームワークとライブラリ：Node.jsコミュニティには豊富なフレームワークとライブラリがあり、Express.js（Webフレームワーク）、Koa.js、Socket.io（リアルタイム通信）、Mongoose（MongoDB ORM）などがあります。
  • コミュニティサポート：Node.jsには大規模な開発者コミュニティがあり、豊富な学習リソース、ドキュメント、オープンソースプロジェクトを提供しています。

5. Node.jsの利点

  • 高パフォーマンス：非同期I/Oとイベント駆動の設計により、高トラフィックでの処理が得意です。
  • 学習が容易：JavaScriptを理解している開発者にとっては、学習曲線が比較的低いです。
  • フルスタック開発：Node.jsは同じ言語（JavaScript）を使用してフロントエンドとバックエンドを開発できるため、効率が向上します。
  • コミュニティサポート：Node.jsには大規模なコミュニティと豊富なエコシステムがあり、強力なサポートを提供しています。

6. Node.jsの適用場面

  • Webアプリケーション：高性能なWebサーバーとRESTful APIの構築。
  • リアルタイムアプリケーション：チャットルームやオンラインゲームなど、Node.jsのイベント駆動特性がリアルタイム通信に適しています。
  • マイクロサービスアーキテクチャ：Node.jsの軽量性により、マイクロサービスアーキテクチャの構築に適しています。
  • データストリームアプリケーション：ファイルアップロード、ダウンロード、ストリーミングなど、データストリーム処理に優れています。

総括

Node.jsは高性能、非同期I/O、イベント駆動の特性を持つ強力なJavaScript実行環境であり、サーバーサイド開発だけでなく、ネットワークツール、コマンドラインツール、IoTなどにも広く利用されています。Node.jsのエコシステムは豊かで、コミュニティサポートも強く、現代的なWeb開発とフルスタック開発において欠かせないツールです。

  1. Vue CLIのインストールとプロジェクト設定 ================

アドレス：https://blog.csdn.net/ZHOUPUYU/article/details/144107049

  • インストールが遅い場合は、淘宝鏡像を使用してインストールを行います。

インストールミラーのアドレス情報を変更するには：

npm config set registry https://registry.npmmirror.com/

アドレスが変更されているか確認するには：

npm config get registry
  • Vue CLIのインストール
npm install -g @vue/cli
  • Vueのバージョン情報を確認する：
vue -V
  • フォルダのルートディレクトリでcmdを起動し、コマンドを使用してVue2プロジェクトを作成します（VSCodeを使用しないでください。VSCodeを使用するとVue3のバージョンになります）。

vue create my-app

新しいVSCodeウィンドウを開き、my-appフォルダを開きます。ターミナル→コマンド：npm run serve を実行すると、リンクが生成され、ブラウザでVueページを見ることができます。

  1. Element-uiフレームワーク ==============

インストール

コマンド：

npm i element-ui -S

完全なインポート

アドレス：https://element.eleme.cn/#/zh-CN/component/quickstart 官方ドキュメントの「クイックスタート」セクション

main.jsに以下の内容を記述してください：<br></br>​<br></br>

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
​
Vue.use(ElementUI);
​
new Vue({
  el: '#app',
  render: h => h(App)
});

 

Element-uiをインポートした後、コンポーネントを使用できます。

  1. Vueプロジェクトの起動コマンド ===========
npm run serve
  1. Vue-Routerルーティング ==============

インストールと設定

公式ドキュメント：v3.xはVue2に対応し、v4.xはVue3に対応しています。

公式アドレス：https://v3.router.vuejs.org/zh/installation.html

指定バージョンのVue-routerをダウンロードするコマンド：

npm i vue-router@3.6.5     ( @3はデフォルトで最新バージョン )

次のコマンドはデフォルトで最新のrouterをダウンロードします。

npm install vue-router

index.jsファイルで、コンポーネント（components）をルート（routes）にマッピングし、Vue Routerにどこにレンダリングするかを伝えます。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//1.ルーティングコンポーネント（例：Home.vueなど）を生成した後、以下を開始します
import Home from '../views/Home.vue'
import User from '../views/User.vue'
//2.ルーティングとコンポーネントをマッピング
const routes = [
    { path: '/home', component: Home },
    { path: '/user', component: User }
  ]
//3.ルーターインスタンスを作成
const router = new VueRouter({
    routes // (省略) routes: routesと同じ意味
  })
export default router
// 4.ルーターインスタンスを作成し、ルートに接続します。main.jsで行います

JSファイルのパス参照

JavaScriptでは、パスの使用は一般的な問題であり、特に相対パスの理解が必要です。パスは相対パスと絶対パスに分けられ、それぞれ異なる状況で使用されます。

相対パス

相対パスは現在のファイルからの位置に依存します。例えば：

./ は現在のディレクトリを表します。../ は上位ディレクトリを表します。

絶対パス

絶対パスは、ハードディスク上のファイルの実際の存在するパスを指します。例えば：

eslintチェックエラー

vue.config.jsファイルでeslintチェックを無効化します。

lintOnSave:false//eslintチェックを無効化

ターミナルまたはコマンドプロンプトで実行中のバッチ操作を終了するためのショートカットキー

Ctrl + C

ネストされたルーティング

現実生活におけるアプリケーションインターフェースは、多くの階層のコンポーネントで構成されることが一般的です。同様に、URLの各部分の動的パスも、ある構造に従って階層のコンポーネントに対応しています。

//2.ルーティングとコンポーネントをマッピング
const routes = [
    //メインルーティング
    {
        path:'/',
        component:Main,
        children:[
            //サブルーティング
            {path:'home',component:Home},
            {path:'user',component:User}
        ]
    }
  ]

コンポーネント化

999、VSCodeのショートカットキー

迅速なフォーマット：Shift + Alt + F

前の行をコピー：Shift + Alt + 上矢印

5月11日 17:54 投稿

ホットタグ

©2026 異端開発室