vue.js プロジェクトを開始する方法

方法: 1. node.js をインストールします; 2. vue-cli スキャフォールディング構築ツールをインストールします; 3. 「vue init webpack project name」コマンドを使用してプロジェクトを構築します; 4. 「cnpm install」を使用します" コマンドを使用して依存関係をプロジェクトにします。 5. "npm run dev" コマンドを使用してプロジェクトを実行します。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、Dell G3 コンピューター。

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

まず、必要なものをリストします:

• #node .js 環境 (npm パッケージ マネージャー)
• vue-cli スキャフォールディング構築ツール
• cnpm npm Taobao ミラー

インストールノード.js

node.js 公式 Web サイトからノードをダウンロードしてインストールします。インストールプロセスは非常に簡単で、「次のステップ」を最後まで実行するだけです (愚かなインストール)。

インストールが完了したら、コマンド ライン ツールを開き、以下に示すように「node -v」と入力します。対応するバージョン番号が表示されれば、インストールは成功です。

npm パッケージマネージャーはノードに統合されているため、直接 npm -v を入力すると以下のように npm のバージョン情報が表示されます。 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃わかりました！ノード環境がインストールされており、npm パッケージ マネージャーも利用可能です。一部の npm リソースがブロックされているか、外部リソースであるため、npm を使用して依存関係パッケージをインストールすると失敗することがよくあるため、npm の国内ミラーである cnpm も必要です。

cnpmのインストール

コマンドラインに「npm install -g cnpm --registry=http://registry.npm.taabao.org」と入力して待つと、以下のようにインストールが完了します。

完了後、npm の代わりに cnpm を使用して依存パッケージをインストールできます。

vue-cli スキャフォールディング構築ツールをインストールする

コマンド ラインでコマンド cnpm install -g vue-cli を実行し、インストールが完了するまで待ちます。

(ここでは npm の代わりに cnpm が使用されていることに注意してください。そうしないと、速度が非常に遅くなり、スタックしてしまいます。)

上記の 3 つのステップを通じて、必要な環境とツールが整います。次に、vue-cli を使用してプロジェクトのビルドを開始します。

vue-cli でプロジェクトをビルドする

プロジェクトを作成するには、まずディレクトリを選択し、次にコマンド ラインでそのディレクトリを選択したディレクトリに変更する必要があります。ここでは、新しいプロジェクトを保存するデスクトップを選択し、次に示すように、最初にディレクトリをデスクトップに移動する必要があります。

デスクトップ ディレクトリで、コマンド ラインでコマンド vue init webpack firstVue を実行します。このコマンドの説明: このコマンドは、webpack がビルド ツールであるプロジェクトを初期化することを意味します。つまり、プロジェクト全体が webpack に基づいています。このうち、firstVueはプロジェクトフォルダ全体の名前で、以下のように指定したディレクトリ（今回の例ではデスクトップ上にフォルダが生成されます）に自動生成されます。

初期化コマンドを実行するとき、ユーザーはプロジェクト名、説明、作成者、その他の情報などのいくつかの基本オプションを入力するように求められます。フィールドに入力したら、Enter キーを押してデフォルトに戻します。

#firstVue フォルダーを開くと、プロジェクト ファイルは次のとおりです。

プロジェクト全体のディレクトリ構成ですが、このうち主に src ディレクトリを変更します。このプロジェクトはまだ単なる構造フレームワークであり、以下に示すように、プロジェクト全体に必要な依存リソースはまだインストールされていません。

プロジェクトに必要な依存関係をインストールします

依存関係パッケージをインストールするには、まずプロジェクト フォルダー (firstVue フォルダー) に移動し、コマンドを実行します。 cnpm install、インストールを待機しています。

インストールが完了すると、プロジェクト ディレクトリの firstVue フォルダーに追加の node_modules フォルダーが作成されます。このフォルダーには、プロジェクトに必要な依存関係パッケージ リソースが含まれています。

#依存関係パッケージをインストールした後、プロジェクト全体を実行できます。

プロジェクトを実行します

プロジェクト ディレクトリで、コマンド npm run dev を実行します。これにより、ホット ロードを使用してアプリケーションが実行されます。ホット ロードを使用すると、ブラウザを手動で更新せずにコードを変更できます。効果を確認してください。リアルタイムでの変更。

ここでは、npm run dev コマンドについて簡単に説明します。「run」は、package.json ファイルの scripts フィールドの dev に対応します。 is ノード: build/dev-server.js コマンドのショートカット。

プロジェクトが正常に実行されると、ブラウザーは自動的に localhost:8080 を開きます (ブラウザーが自動的に開かない場合は、手動で入力できます)。正常に実行されると、以下に示すインターフェイスが表示されます。

このページが表示された場合は、プロジェクトが正常に実行されていることを意味します。

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

以上がvue.js プロジェクトを開始する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。