npm インストールの詳細なチュートリアル

npmのインストールチュートリアル

第 1 章 Vu​​e 学習の開始 - Node.js の使用方法


序文

時代の発展に伴い、フロントエンド学習の技術はますます重要になってきており、多くの人がフロントエンド学習を始めていますが、この記事ではフロントエンド学習-npmのインストールの基本的な内容を紹介します。


1.npmとは何ですか?

npmは NodeJS のパッケージ マネージャーであり、vue-cli スキャフォールディング テンプレートは npm に基づいてノードにインストールされます。

関連紹介 ~
webpack: その主な目的は、リソースのマージやパッケージ化など、CommonJS 構文を通じてブラウザー側で公開する必要があるすべての静的リソースを準備することです。
vue-cli: Vue プロジェクト テンプレートを迅速に生成するために公式に提供されるスキャフォールディング。

2. 環境変数をインストールして構成する

1.NodeJSをダウンロードしてインストールします

Windows での NodeJS のインストールは比較的便利です (バージョン v0.6.0 以降、Windows ネイティブがサポートされています)。公式 Web サイト ( https://nodejs.cn/download/ ) に直接アクセスするだけです。ここで Windows インストール パッケージを選択できます。 (.msi) - 64 ビットをインストールします。
通常は Windows×64 ビット インストール パッケージを選択します。
または、公式 Web サイトhttp://nodejs.org/に直接ログインします。
ここに画像の説明を挿入

  • インストールプロセスは基本的に「完了」まで「 NEXT 」だけです。
    ここに画像の説明を挿入
    ここに画像の説明を挿入
    ここに画像の説明を挿入
    Windows では、パス システム変数は、msi ファイルのインストール中に直接追加されます。変数値は、「D:\RunSoftware\nodejs」などのインストール パスです。

ここに画像の説明を挿入
ここに画像の説明を挿入

  • Nodejs のインストールが成功したことを確認します:
    ショートカット キー win+R —> cmd コマンド ラインを入力し、DOS ウィンドウに入ります: Enter を押してnode -v、バージョン番号が正しく出力されるかどうかを確認します。
    ここに画像の説明を挿入
    ノードには npm が付属しています。それを入力してnpm -v、バージョン番号が正しく出力されるかどうかを確認してください。
    ここに画像の説明を挿入

2.npm設定

npm は NodeJS モジュール管理であり、まずnpm のグローバル モジュールのストレージ パスキャッシュ パスを設定します。
(1) 2 つのディレクトリnode_cachenode_globalを作成します。
これら 2 つのフォルダーを NodeJS のメイン ディレクトリに配置する場合は、NodeJs の下に「node_global」と「node_cache」の 2 つのフォルダーを作成します。
ここに画像の説明を挿入
(2)設定を行う

npm config set prefix "D:\RunSoftware\nodejs\node_global"
npm config set cache "D:\RunSoftware\nodejs\node_cache"

このステップを設定しない場合、npm のグローバル インストール パッケージはノードのインストール フォルダーに存在しません。
この手順でエラーが発生した場合 (操作は許可されていません、mkdir 'D:\RunSoftware\nodejs')、管理者として cmd コマンド ラインを開いてください。(3)環境変数
の設定. 環境変数ダイアログ ボックスに入り、システム変数の下に新しい「NODE_PATH 」を作成し、「D:\RunSoftware\nodejs\node_global\node_modules」と入力します。
ここに画像の説明を挿入


ここに画像の説明を挿入
ここに画像の説明を挿入

モジュールのデフォルトのアドレスが変更されているため、上記のユーザー変数もそれに応じて変更する必要があります (ユーザー変数「PATH」は「D:\RunSoftware\nodejs\node_global\」に変更されます)。そうしないと、モジュールを使用するときに入力コマンドを実行すると、「xxx は内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されません」エラーが発生します。
ここに画像の説明を挿入

(4) Node.js 淘宝画像アクセラレータ (cnpm) をインストールします。この場合、ダウンロードははるかに速くなります~

  • ミラーサイトを設定します。npm config set registry=https://registry.npm.taobao.org
    ここに画像の説明を挿入
    ここに画像の説明を挿入

  • ミラー サイトが利用可能かどうかを確認します。npm config get registry
    ここに画像の説明を挿入

  • 次に、次のコマンドを入力します。npm install -g cnpm --registry=https://registry.npm.taobao.org
    ここに画像の説明を挿入
    または、次のコマンドを入力します。

# -g 就是全局安装
npm install cnpm -g
# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org
  • システム変数 pathの内容を追加します
      cnpm は D:\RunSoftware\nodejs\node_global にインストールされ、システム変数 path にはこのパスが含まれないためです。したがって、システム変数pathの下にパスを追加すると、通常どおり cnpm を使用できるようになります。
      ここに画像の説明を挿入
  • 次に、コマンドを入力してcnpm -v、結果を表示します。
    ここに画像の説明を挿入
    インストールプロセスは少し時間がかかる場合がありますので、しばらくお待ちください。cnpm はインストールされていますが、できるだけ使用しないでください
    インストール場所は次のとおりです。
    ここに画像の説明を挿入
    この時点で、npmのインストールは正常に終了しました。以上が今日の内容です。この記事では npm のインストールについて簡単に紹介するだけです。さらに多くの知識が私たちを待っています。これで、vue-cli の学習の旅を始めることができます~ 皆さん、私の他の記事vue-cli の詳細なチュートリアル を
    読んでください。皆さんのお役に立てば幸いです~

おすすめ

転載: blog.csdn.net/panpan_Yang/article/details/130284726