node.jsのインストールとHbuilderXの設定の詳細な説明

node.jsのインストールとHbuilderXの設定の詳細な説明

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

1. Node.jsインストールパッケージをダウンロードする

公式サイト: https://nodejs.org/en/

2. 使用する前に、まずこれら 3 つが何に使用されるかを理解しましょう。

webpack: その主な目的は、リソースのマージやパッケージ化など、ブラウザ側でリリースする必要があるすべての静的リソースを CommonJS 構文を通じて準備することです。

vue-cli: ユーザーが生成した Vue プロジェクト テンプレート。 (Vue プロジェクトをすぐに開始できるように支援します。つまり、基本的な依存ライブラリを含む Vue 構造のセットを提供し、npm install だけでインストールできます)

ここに画像の説明を挿入

図に示すように、現在ダウンロードされているバージョンは 14.16.0 LTS (現在ユーザーに推奨) です。

ここに画像の説明を挿入

ダブルクリックしてインストール

1. まず、デフォルトのパスはCドライブであることがわかります。ここではインストールの例としてDドライブを取り上げます:d:\node.js

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

「次へ」をクリック

ここに画像の説明を挿入

完了をクリック

ここに画像の説明を挿入

次にwin + rショートカットキー

ここに画像の説明を挿入

echo %PATH%と入力します

ここに画像の説明を挿入

node -vとnpm -vを入力します

ここに画像の説明を挿入

C:\Users\Administrator\AppData\Roamingを見てみましょう

ここに画像の説明を挿入

npm のローカル リポジトリがシステム ディスク C ドライブのユーザー ディレクトリで実行されていることがわかります (npm-cache は使用されていないため表示されません。キャッシュ ディレクトリは使用されるとすぐに生成されます)。これらの 2 つのディレクトリを D:\nodejs に戻します。

まず、以下に示すように2つのディレクトリを作成します。

ここに画像の説明を挿入

次に、次の2つのコマンドを実行します。

npm config プレフィックス "D:\nodejs\node_global" を設定します
npm config でキャッシュを "D:\nodejs\node_cache" に設定します

以下に示すように、npmのローカルリポジトリを見て、npm list -globalコマンドを入力してみましょう。

ここに画像の説明を挿入

ミラーサイトを設定するには、npm config set registry=http://registry.npm.taobao.org コマンドを入力します。

ここに画像の説明を挿入

すべての設定情報を表示するには、npm config list コマンドを入力します。 1 つの設定ファイルに注目してみましょう。

ここに画像の説明を挿入

C:\Users\Administrator.npmrc

ここに画像の説明を挿入

txt テキストまたはテキスト エディターを使用すると、現在の構成情報を確認できます。

ここに画像の説明を挿入

ミラーステーションが動作するか確認します。コマンド1

npm config レジストリを取得する

ここに画像の説明を挿入

ミラーステーションが正常かどうかを確認するコマンド2
npm info vueでvueに関する情報を取得できるかどうかを確認します

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

このとき、デフォルトのモジュール D:\nodejs\node_modules ディレクトリが D:\nodejs\node_global\node_modules ディレクトリに変更されることに注意してください。
npm install などのコマンドを直接実行すると、エラーが報告されます。
私たちがやるべきことは1つです:

1. 環境変数 NODE_PATH を追加します。内容は次のとおりです: D:\nodejs\node_global\node_modules

ここに画像の説明を挿入

(以下の操作では、上記の環境変数を有効にするために CMD を再度開く必要があることに注意してください)

1. vue.jsのNPMインストールをテストする

コマンド: npm install vue -g
ここでの-gはグローバルディレクトリにインストールすることを意味します

ここに画像の説明を挿入

見てみましょう: D:\nodejs\node_global\node_modules\vue

ここに画像の説明を挿入

2. vue-routerのNPMインストールをテストする

コマンド: npm install vue-router -g

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

npm install vue-cli -g を実行してVue scaffoldingをインストールします。

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

パス環境変数にD:\nodejs\node_globalを追加します。
Windows 10 未満のバージョンでは、PATH は横に表示されます。末尾にセミコロン [;] を追加してはいけないことに注意してください。

ここに画像の説明を挿入

CMDを再度開き、Vueが正常に動作しているかどうかをテストします。

ここに画像の説明を挿入

vue-cli ツールには、webpack や webpack-simple などのテンプレートが組み込まれていることに注意してください。前者は、より複雑で専門的なプロジェクト向けです。
彼の設定はすべてルートディレクトリの webpack.config.js に配置されていません。

初期化、インストールの依存関係:
インストール時に、vue-routerのインストールを選択しますか?はい、その他はすべていいえです

ここに画像の説明を挿入

npm installを実行して依存関係をインストールします

ここに画像の説明を挿入

npm run devを実行します。
dosコマンドでnpm run devと入力します

ここに画像の説明を挿入

指示に従ってブラウザで http://localhost:8080 を開きます。

ここに画像の説明を挿入

ブラウザを自動的に開く http://localhost:8080/#/

DOSコマンドを入力します: npm run build

静的ファイルを生成し、distフォルダに新しく生成されたindex.htmlファイルを開きます。

ここに画像の説明を挿入

次に、Hbuilderxツールを使用してNode.jsとnpmを設定します。

公式サイト: https://www.dcloud.io/hbuilderx.htmlHubilderX リンク

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

プロジェクトを実行するには、ターミナルでnpm run devと入力します。

これで、node.js のインストールと HbuilderX の設定に関するこの記事は終了です。より関連性の高い node.js HbuilderX の設定コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Node.js シングルスレッド モデルの詳細な分析
  • Node.jsを理解するのはとても簡単です
  • node.js グローバル変数の具体的な使用法
  • Expressを使用してプロジェクトを自動的にビルドするNode.jsのプロセス全体
  • Node.jsはSTMPプロトコルとEWSプロトコルに基づいてメールを送信します
  • Node.js ファイルのコピー、フォルダの作成、その他の関連操作
  • Node.js の非同期ジェネレータと非同期反復の詳細な説明
  • node.js で Web サーバーを作成する手順の詳細な説明
  • Node.js でコマンドライン引数を収集して解析する方法
  • Alibaba Node.js 技術ドキュメントプロセスモジュール学習ガイドの詳細な説明
  • node.js を使用して CLI を開発するための完全な手順
  • Sequelize 経由で MySQL を Node.js に接続する方法
  • CentOS 8.2 サーバーに最新バージョンの Node.js をインストールする方法
  • Node.js テキスト ファイルの BOM ヘッダーを削除する方法
  • Appium+python 自動構成 (adk、jdk、node.js)
  • Node.js のコールバックを Promise に変換する方法
  • Node.js パスモジュール、ファイルサフィックスを取得する操作
  • node.js クローラー フレームワーク node-crawler の初体験
  • Nodejs 探索: シングルスレッドの高並行性の原理を深く理解する

<<:  Windows10にMySQL5.6.35データベースを2つインストールする

>>:  VSCode 構成 Git メソッドの手順

推薦する

MySQL共通インデックスとユニークインデックスの詳細な説明

シナリオ1. ID番号のフィールドを備えた市民システムを維持する2. ビジネス コードでは、重複する...

Mybatisの各SQL文の実行時間の統計

背景最近、面接でデータベース トランザクションについてよく質問されます。通常は、@Transacti...

JS にこれがあるのはなぜですか?

目次1. 需要2. 解決策3. 最初の改善4.砂糖を加える5. 理解不能6. 問題点7. オブジェク...

NodeはMySQLに接続し、追加、削除、変更、チェックのための実装コードをカプセル化します。

目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...

MySQL 5.7 のユニオンオール使用法のブラックテクノロジーを 5 分で学ぶ

MySQL 5.6 での union all のパフォーマンスパート 1:MySQL 5.6.25 ...

Vue でインデックスをキー属性値として使用することが推奨されないのはなぜですか?

目次序文キーの役割差分アルゴリズムにおけるキーの役割ヘッドノードを同期するテールノードを同期する新し...

ウェブデザインにおける画像フォーマットとデザインの関係を詳しく説明

なぜこの領域のコンテンツを整理したいのでしょうか。それは、油絵の具とキャンバスを理解する必要があり、...

Nginx 7層負荷分散のいくつかのスケジューリングアルゴリズムの簡単な理解

この記事は主に、Nginx 7 層負荷分散のいくつかのスケジューリング アルゴリズムを紹介します。こ...

Windows での MySQL 8.0.18 インストール チュートリアル (図解)

ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...

MySQLでよく使われる文字列関数トップ10の詳細な説明

こんにちは、みんな!技術の話ばかりで髪は切らないトニーです。データベース関数は、何らかの機能を持ち、...

仕事でよく使うLinuxコマンドまとめ

仕事では、docker や kubernetes などのオープンソース ツールをさらに活用しましょう...

uniappのグローバル変数実装の詳細な説明

序文この記事では、uniapp グローバル変数の実装方法をいくつかまとめています。詳細な知識は、uV...

Vueでクラススタイルを使用する方法の詳細

目次1. ブール2. 表現3. マルチクラスパッケージ4. v-bind でクラス class を直...

Vue3とElectronを使ったデスクトップアプリケーションの詳しい説明

目次Vue CLIはVueプロジェクトを構築しますVue プロジェクトをマークダウン エディターに変...

MySQLのスレッド実行の急増とクエリの遅延の問題を解決する

目次背景問題の説明原因分析CPUクエリが遅い接続数分析する拡大する総括する背景新年を迎える前は、一年...