Vue開発環境のインストール

目次

Vue概述:

Vue の機能:

Vue公式サイト:

1. Node.jsのインストールと構成 

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

ステップ1: インストールパッケージをダウンロードする

ステップ2: プログラムをインストールする

ステップ 3: 表示する

問題が解決しました:

npm warn config global `--global`、`--local` は非推奨になりました。代わりに「--location=global」を使用してください。

1. 問題の原因

2. 試してみましょう

3. 試行 2 を解く

Step4: 環境設定

ステップ5: Node.jsテスト

vueフロントエンドフレームワークの環境構築

Vue は、ユーザー インターフェイスを動的に構築するための進歩的な JavaScript フレームワークです。

  • ユーザー インターフェイスを構築する: 何らかの方法でデータをユーザー インターフェイスに変換します。
  • プログレッシブ: Vue を下から上にレイヤーごとに適用できます。単純なアプリケーションには軽量でコンパクトなコア ライブラリのみが必要で、複雑なアプリケーションにはさまざまな Vue プラグインを導入できます。

Vue概述:

Vue とは: Vue.js は、中国系アメリカ人 (You Yuxi) によって開発された、対応するシステムおよびフロントエンド開発ライブラリです。
2014 年 2 月、You Yuxi はフロントエンド開発ライブラリ Vue.js をオープンソース化しました。
2016 年 9 月 3 日、You Yuxi は Alibaba Weex チームに技術コンサルタントとして加わりました。
彼は、Vue.js の開発にフルタイムで取り組み、Vue を Angular/React と同じレベルの世界トップのフレームワークに構築することを決意しました。Vue のコア ライブラリは、統合が非常に簡単なビュー層のみに焦点を当てています。他のライブラリと一緒に。

Vue は、複雑な単一ページ アプリケーションの開発に非常に適しています。

Vue はデータとビューの双方向バインディングを実現できます

Vue の機能:

① 軽量フレームワーク、vue は、テンプレート式と計算されたプロパティに依存したMVVM双方向データ バインディングを提供します。シンプルで高速な vue を使用すると、Web 開発 Vue を分割して、命令を通じてデータとページを操作できます。 ③ で設計されたさまざまなモジュールを別のコンポーネントに統合します。 、データ バインディングを通じて、対応するテンプレート コンポーネントを呼び出し、同時にパラメーターを渡してプロジェクト全体の開発を完了します。④ リンクを通じてページを切り替える (ページを更新する) 従来の Web ページとは異なり、Vue はEnd-to-エンドルーティングによりスムーズなページ切り替えを実現 Vueのインターフェイスは応答性が高く、さまざまなデバイスで良好な表示効果を発揮

Vue公式サイト:

Vue.js - プログレッシブ JavaScript フレームワーク | Vue.js Vue.js - プログレッシブ JavaScript フレームワークhttps://cn.vuejs.org/

1. Node.jsのインストールと構成 

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

コンピュータにノードが搭載されているか確認してください。
【コマンドライン入力 node -v】 【バージョン情報が表示されていればインストールされています】

ここではnode.jsをインストールしていませんが、段階的にインストールできます。 

公式 Web サイトから最新バージョンをダウンロードします:|ダウンロード

ステップ1: インストールパッケージをダウンロードする

ここでは、上に示したように、Windows64 ビット オペレーティング システムを選択します。

ステップ2: プログラムをインストールする

① ダウンロードが完了したら、インストールパッケージをダブルクリックしてインストールを開始します. デフォルトの設定を使用してインストールし、nextクリックするだけです. デフォルトのインストールパスC:Program Filesは以下です, カスタマイズすることもできます

ダウンロードが完了したら、インストールします(愚かな操作、次のステップ - 次のステップ)

②インストール パスはデフォルトでは C:\Program Files にありますが、カスタマイズおよび変更することもできます。[次へ] をクリックします (ここではインストール ディレクトリを D:\software\nodejs\ に設定し、必要に応じて変更します)。

 

 ③次の図は私自身のニーズに基づいており、デフォルトの Node.js ランタイムを選択し、次へ

Node.js ランタイム: 動作環境を示します。
npm package manager: npm パッケージ マネージャーを示します
。 オンライン ドキュメントのショートカット: オンライン ドキュメントのショートカット
PATH に追加: 環境変数に追加します。

 
④以下の枠のように、選択せずにそのまま次へ

⑤「インストール」をクリックしてインストールします。

⑥完了をクリックしてインストールは完了です

⑦ インストールが完了すると、.msi 形式のインストール パッケージによってノード起動プログラムがシステム環境変数のパスに追加され、システム環境変数を確認して確認できます。 [パーソナル コンピュータ] を右クリック → [プロパティ] → [高度なシステム設定]

⑧[詳細設定]→[環境変数]をクリックします。

⑨システム変数の[パス]にチェックを入れ、[編集]をクリックします。

⑩.msi形式のインストールパッケージにより、システム環境変数のパスにノード起動プログラムが追加されていることがわかります。

npm は Node.js にデフォルトでインストールされるため、追加の構成を行わずにグローバル コマンドで npm コマンドを使用できます。cmd でインストールが成功したかどうかをテストします。バージョン情報を表示するには、node -v および npm –v を入力します。

ステップ 3: 表示する

① ノード プログラムがグローバル システム変数に追加されたので、CMD ウィンドウの任意の場所でノードを直接実行し、CMD ウィンドウを開いてコマンド node -v を実行してノードのバージョンを確認できます。

[注: このとき、C:Program Files odejs ディレクトリにあるnode.exe は実行されず、CMD ウィンドウが開きます]

② インストール中に最新バージョンのノードも npm でインストールされます。実行してnpm -vnpm のバージョンを確認します

 cnpm をダウンロード:
cnpm (淘宝網ミラーイメージ) を使用: npm を使用して依存関係をダウンロードする場合、コンテンツが海外の Web サイトからダウンロードされるため、不安定が頻繁に発生する可能性があるため、npm の代わりに cnpm をダウンロードする必要があります。cnpm は国内の淘宝網によって作成されています
。国内での使用では安定しています。cnpm をインストールします。
npm install -g cnpm --registry=https://registry.npm.taabao.org
または npm install -g cnpm --registry=https://registry.npmmirror.com

問題が解決しました:

npm warn config global `--global`、`--local` は非推奨になりました。代わりに「--location=global」を使用してください。

ノード環境をインストールした後  、npm -v を実行すると次の問題が表示されます。 
npm WARN config global  は非推奨です。  代わりに使用してください。--global--local--location=global

8.11.0

1. 問題の原因

以前のバージョンの npm のコマンドは通常 XXX -g であるが、バージョンの変更により、この古いメソッドは非推奨になったという問題が発生します。

2. 試してみましょう

ノードのインストール パスで、
npm と npm.cmd の 2 つのファイルを変更する必要があります。

npm ファイルの 23 行目を以下に示すスタイルに変更します。コマンドは次のとおりです。直接貼り付けることができます。

プレフィックス --location=グローバル

npm.cmd ファイルの 12 行目を次の図のように変更します。コマンドは次のとおりです。これを直接貼り付け、変更後に保存することができます。

プレフィックス --location=グローバル

ここで、権限が不十分であるという問題が発生しました。これは次のように解決できます。

3. 試行 2 を解く

コンピューター ファイルのアクセス許可では不十分です。npmと npm.cmd の 2 つのファイルを変更し、プロパティを右クリックして、アクセス許可を安全に開く
必要があります。

これで変更は完了です。

まだ問題がある場合は、次の解決策を試してください (私は 2 番目の解決策で完了したため、3 番目の解決策は試していません)

解決策の試み 3:
npm を使用すると、次のエラーが報告されます: npm WARN config global --global, --local are deprecated. Use --location=global such as --location=global.

npm を最新バージョンにアップグレードするだけです。
アップグレード方法
1. Windows で管理者として cmd を開き、コマンド
npm install -g npm-windows-upgradeを実行します
。 2. スクリプト ポリシーを変更します。
Windows Power Shell をダウンロードし
、管理者として実行します。コマンド
set-ExecutionPolicy RemoteSignedを実行します。



スクリプト ポリシーを正常に変更するには、「Y」を入力します。 3.
Windows Power Shell でコマンド
npm-windows-upgradeを実行します。

問題が解決しました!

最終的な結果は次のとおりです。

Step4: 環境設定

① インストール ディレクトリ (デフォルトでは C:\Program Files nodejs) を開きます。ここでは、D:\software\nodejs を開きます。

② インストールディレクトリに「node_global」と「node_cache」の2つの新規フォルダを作成します

③ 再度 cmd コマンド ウィンドウを開き、npm config set prefix "your path node_cache" を入力します ("your path" のデフォルトのインストールは D:\software\nodejs です)。 ④ npm config set cache "your path node_cache" を直接指定でき
ます
新しく作成した空のフォルダー ディレクトリ をコピーする場合は、管理者権限で CMD を開くことをお勧めします。そうしないと、権限が不十分であるというメッセージが表示され、エラーが報告される場合があります。

⑤環境変数を設定し、[システムのプロパティ]-[詳細設定]-[環境変数]を開き、系统变量新規作成

変数名:NODE_PATH

変数:D:\software\nodejs\node_global\node_modules

(ダウンロードされたモジュールまたはパッケージがここにあることをシステムに伝えるために使用されます)

ステップ5: Node.jsテスト

構成が完了したら、テスト用のモジュールをインストールします。最も頻繁に使用される Express モジュールをインストールし、cmd ウィンドウを開き、次のコマンドを入力してモジュールをグローバルにインストールします。

 npm install Express -g

おすすめ

転載: blog.csdn.net/weixin_46474921/article/details/126596539