次の手順に従って、WebStorm で Vue プロジェクトを作成します。 WebStorm と Vue CLI をインストールします。 WebStorm で Vue プロジェクト テンプレートを作成します。 Vue CLI コマンドを使用してプロジェクトを作成します。既存のプロジェクトを WebStorm にインポートします。 「npm runserve」コマンドを使用して、Vue プロジェクトを実行します。
WebStorm で Vue プロジェクトを作成する方法
ステップ 1: WebStorm と Vue CLI をインストールする
- WebStorm IDE をインストールします。
- Vue.js プロジェクトのコマンド ライン インターフェイスである Vue CLI をインストールします。ターミナルまたはコマンド プロンプトで次のコマンドを実行します。
<code>npm install -g @vue/cli</code>
ステップ 2: Vue プロジェクトを作成する
- WebStorm を開きます。
- [WebStorm へようこそ] 画面をクリックするか、[ファイル] > [新しいプロジェクト...] に移動します。
- [新しいプロジェクト] ダイアログ ボックスで、[Vue.js] テンプレートを選択します。
- [プロジェクトの場所]フィールドにプロジェクトへのパスを指定します。
- 「プロジェクト名」フィールドにプロジェクト名を入力します。
- 「Vue CLI を使用する」チェックボックスをオンにします。
- 「作成」ボタンをクリックします。
ステップ 3: Vue CLI を使用してプロジェクトを作成する
- WebStorm で [ターミナル] タブを開きます。
- プロジェクトのルート ディレクトリに移動します。
- 次の Vue CLI コマンドを実行します:
<code>vue create <project-name></code>
- Basic オプションを選択し、「Enter」を押します。
ステップ 4: 既存のプロジェクトを WebStorm にインポートする
- Vue CLI を使用してプロジェクトをすでに作成している場合は、それを WebStorm にインポートできます。
- 「ファイル > 開く...」をクリックします。
- プロジェクトのルート ディレクトリに移動します。
- 「package.json」ファイルを選択し、「開く」ボタンをクリックします。
ステップ 5: Vue プロジェクトを実行する
<code>npm run serve</code>
- これにより、Vue プロジェクトが開発モードで開始されます。
ヒント:
- 「npm run 」コマンドを使用して、WebStorm で他の npm スクリプトを実行できます。
- 「Ctrl Alt L」(Windows) または「Cmd Option L」(Mac) を押してコードをフォーマットします。
- 「Cmd B」 (Mac) または「Ctrl B」 (Windows) を使用して、ブラウザーでプロジェクトを表示します。
以上がWebstorm で Vue プロジェクトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
