Vue.js は、開発者がインタラクティブなフロントエンド アプリケーションを迅速に構築できるようにする軽量の JavaScript フレームワークです。この記事では、Vue プロジェクトの作成方法について詳しく説明します。
ステップ 1: Node.js をインストールする
Vue.js は JavaScript ベースのフレームワークであるため、最初に Node.js をインストールする必要があります。すでに Node.js がインストールされている場合は、この手順をスキップできます。
公式 Web サイト https://nodejs.org/en/ から、オペレーティング システム用の Node.js をダウンロードできます。
インストールが完了したら、コマンド ラインに次のコマンドを入力して、Node.js が正しく動作しているかどうかを確認できます。
1 |
|
正しいバージョン番号が出力された場合、Node.js正常にインストールされました。
ステップ 2: Vue CLI をインストールする
Vue CLI は、Vue.js プロジェクトの作成時にテンプレートを迅速に生成し、開発に必要なサービスを提供するために使用されるコマンド ライン インターフェイス ツールです。コマンド ラインで次のコマンドを入力して Vue CLI をインストールできます:
1 |
|
ステップ 3: 新しいプロジェクトを作成します
Vue CLI をインストールした後、create
を使用できます。新しいプロジェクトを作成するコマンド。コマンド ラインを開き、プロジェクトを作成するディレクトリに移動します。
次のコマンドを入力します:
1 |
|
ここで、my-project
はプロジェクト名です。このコマンドを実行すると、Vue CLI により、プロジェクトに必要なコア コレクションおよびその他の特定のプラグインと機能を選択するよう求められます。
上下の矢印キーを使用して利用可能なオプション間を移動し、スペース バーを使用して選択し、Enter キーを押します。
ステップ 4: アプリケーションの開始
アプリケーションの作成が完了したら、アプリケーションのルート ディレクトリで次のコマンドを使用してアプリケーションを開始できます:
1 |
|
Thisコマンドはローカル サーバーを起動し、デフォルトのポート 8080 を使用してアプリケーションをそこにデプロイします。ブラウザで http://localhost:8080/
を開くと、Vue アプリケーションのようこそページが表示されます。
ステップ 5: Vue CLI を使用して依存関係をプロジェクトに追加する
Vue CLI は、組み込みの依存関係マネージャーを通じて開発プロセスを簡素化するのに非常に役立ちます。 Vue プロジェクトを作成した後、次のコマンドを使用してプロジェクトに新しい依存関係を追加できます:
1 |
|
ここで、<dependency>
は、インストールする依存関係の名前です。依存関係を追加した後、プロジェクト ディレクトリの package.json
ファイルですべてのプロジェクトの依存関係を表示できます。
ステップ 6: アプリケーションをビルドする
Vue CLI を使用して作成されたプロジェクトには、ワークフローで Vue アプリケーションを構築、テスト、パッケージ化するための自動ビルド ツールが含まれています。
アプリケーションをビルドするには、プロジェクトのルート ディレクトリに次のコマンドを入力します。
1 |
|
このコマンドは、完全に最適化された運用準備が整ったアプリケーションを dist/# にビルドします。 ## アプリケーションのディレクトリ レベルのバージョン。
以上がVue プロジェクトの作成プロセスについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。