新しい Vue プロジェクトを詳細に作成するには、次の手順を実行します。
1. まず、Node.js をインストールします。
コマンド ラインに と入力してnode -vNode.js がインストールされていることを確認し、を
使用してnpm -vnpm がインストールされていることを確認します。
Node.js をインストールしていない場合は、Node.js の公式 Web サイト (https://nodejs.org/) にアクセスしてダウンロードしてインストールします。
2. Vue CLIをインストールします。
Vue CLI は、Vue プロジェクトを迅速に構築するための Node.js ベースのコマンドライン ツールです。
次のコマンドを実行します检查 Vue CLI 的版本。 Vue CLI が正常にインストールされている場合、コマンド ラインに Vue CLI のバージョン番号が表示されます。
vue --version
Vue CLI がない場合は、次のコマンドを実行します全局安装最新版本的 Vue CLI。
npm install -g @vue/cli
3. 新しいプロジェクトを作成します。
コマンド ラインから、プロジェクトを作成するディレクトリに移動し、次のコマンドを実行して新しい Vue プロジェクトを作成します。
vue create vue my-project
これはmy-project自分で定義したプロジェクト名です。必要に応じて変更できます。
上記のコマンドを実行すると、Vue CLI はプリセット構成を選択するように求めます。
- 初心者の場合は、デフォルトの構成 (デフォルト) を選択できます。Vue CLI は、一般的な構成やプラグインを含む基本的な Vue プロジェクトを作成します。
- 機能を手動で選択する場合は、手動で構成することを選択できます (機能を手動で選択します)。Vue CLI には一連のオプション機能とプラグインがリストされ、ニーズに応じて選択できます。スペースバーは選択とキャンセル、A キーはすべてを選択します。
4. プロジェクトの作成が完了するまで待ちます。
Vue CLI は、プロジェクトに必要な依存関係を自動的にダウンロードしてインストールしますが、これには時間がかかる場合があります。プロジェクトが作成されると、次のようなプロンプトが表示されます。
Project creation complete. To get started:
cd my-project // 进入到项目根目录
npm run serve // 启动项目
5. プロジェクト ディレクトリを入力します。
コマンド ラインで、作成したばかりのプロジェクト ディレクトリに移動します。
cd my-project
6. 開発サーバーを起動します。
次のコマンドを実行して開発サーバーを起動します。
npm run serve
これにより、ローカル開発サーバーが起動し、ブラウザで Vue アプリケーションが開きます。開発サーバーの実行中に開発を行うことができ、変更の結果をリアルタイムで確認できます。
これで、新しい Vue プロジェクトが正常に作成され、開発サーバーが起動されました。必要に応じて、Vue アプリケーションを変更および開発できます。