vue-cliのインストール方法

インストール方法: 1. ノードと npm をインストールします; 2. cnpm をインストールします; 3. ターゲット フォルダーでターミナルを開きます; 4. 「cnpm install vue-cli -g」コマンドを使用して vue-cli をインストールします世界中で可能です。

このチュートリアルの動作環境: Windows7 システム、vue2.9 バージョン。この方法はすべてのブランドのコンピューターに適しています。

関連する推奨事項: 「vue.js チュートリアル 」

vue-cli のインストールと使用

# #vue-cli スキャフォールディング テンプレートはノードの下の npm に基づいてインストールされるため、最初にノードをインストールする必要があります

1. ノードのインストール. Vue の操作には特定のバージョンの npm が必要なので、まず npm を最新バージョンにアップグレードします。インストールプロセス中、個人の好みに応じて淘宝網のミラーを使用できますが、最初に cnpm (速度と安定性に優れています) をインストールする必要があります。

npm の一部のリソースがブロックされているか、外部リソースであるため、多くの場合、次のような問題が発生します。 npm を使用して依存関係パッケージをインストールすると、失敗します。npm ---cnpm を必要とするすべての国内イメージでは、

#2. ターゲット フォルダーでターミナルを開きます

3. vue-cli をグローバルにインストールします

cnpm install vue-cli -g## を実行します

#vue を実行してインストールが成功したかどうかを確認します

4. プロジェクトを作成します

vue init webpack を実行(注: テンプレート名) sell2 (注: プロジェクト名)

5. 依存関係のインストール

プロジェクトフォルダーに入り、cnpm を実行install を使用してインストールし、テンプレートにダウンロードします。 package.json の依存関係については、インストールの完了後、インストールされた依存関係ファイルを保存するためのノード モジュール ファイルがプロジェクト フォルダーに自動的に生成されます

6. 依存関係が非常に複雑であるため、複数のエディターはモジュール ファイルを取得するときに大量のメモリを消費するため、ウェブストーム エディターでプロジェクトを開始するときは、ノード モジュール フォルダーを右クリックして、モジュール ファイルの取得を防ぐことがよくあります。ファイル

#注: Webstorm は開くとすぐにスタックし、フォルダーを操作できません。この状況の解決策は、まずノード モジュール フォルダーを開いて削除することです。フォルダー モードで、取得を禁止してから、cnpm install* を再実行します* (この方法では、依存関係をインストールした後に一度実行し、その後、node_modules サブファイルを削除する必要があります。Webstorm はプロジェクトを開いて、node_module フォルダーの取得を禁止し、その後、

7. プロジェクト

npm run dev

を実行します (注: 現時点では cnpm を使用して実行することはできません。npm である必要があります)

8.必要なリソースをプロジェクトに入れます

9. ルーティング機能を使用する必要があるため、vue-routerをインストールする必要があります

インストール方法:

vnpm install vuve-router --save

10. build/devs-erver.js

にカスタム変数とルーティング関数を書き込みます。このようにして、次のように、プロジェクトの実行時に必要な JSON データを取得できます。

このようにして、ルーティング#11. コードを記述する前に、HTML ファイルに初期化スタイルを導入します (スタイルを統一して美しく保つため)

#12. コンポーネントの呼び出し方法

13. Sass を使用する必要があるので (個人的なニーズ)、sass-loader をインストールします

インストール方法: cnpm install sass-loader --save-dev

Pakcage.jsonファイルは次回sass-loaderのバージョン情報を生成します

sass-loaderはnode-sassに依存するため、node-sassもインストールする必要があります

インストールメソッド: cnpm install node-sass --save-dev

現時点では、モジュール内で scss を定義して scss コードを記述することができます。また、新しい * を作成することもできます。 .scss ファイルを呼び出し、

@import "../path"; を使用して他の scss ファイルおよび定義された scss メソッドを呼び出すことができます。

@include メソッド名 (パラメーター); を使用して呼び出すことができます。

14. ajax リクエストを使用し、vue-resource を使用する必要があります。

インストール方法: cnpm install vue- resource--save インストールが完了します package.json にバージョン情報を生成します。

使用方法は次のとおりです。

注: Vue 公式は提供されなくなりました。 vue-resource を保守し、全員に axios を使用することを推奨します。

関連する推奨事項:

2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアル推奨事項: 2020 年最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、プログラミング教育をご覧ください。 ！

以上がvue-cliのインストール方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。