ウェブストームで vue コードを実行する方法

WebStorm を通じて Vue コードを実行するには、Vue CLI のインストール、Vue プロジェクトの作成、プロジェクトを開く、WebStorm の構成、コードの実行、アプリケーションのプレビューの 6 つの手順があります。

WebStorm で Vue コードを実行する方法

WebStorm を使用して Vue コードを実行する方法は次のとおりです。

1. Vue CLI をインストールします

#ターミナルまたはコマンド プロンプトを開きます。
• 次のコマンドを実行します:

<code>npm install -g @vue/cli</code>

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

新しいプロジェクトのディレクトリに移動します。
• 次のコマンドを実行します:

<code>vue create <project-name></code>

3. WebStorm でプロジェクトを開きます

WebStorm を開きます。
• [ファイル] > [開く]をクリックし、プロジェクト ディレクトリを選択します。

4. WebStorm の設定

WebStorm で、[実行] > [設定の編集] をクリックします。
• [実行/デバッグ構成] ダイアログ ボックスで、[Node.js] を選択します。
• 「スクリプト」フィールドに次の値を入力します:

<code>node_modules/@vue/cli-service/bin/vue-cli-service.js</code>

「パラメータ」フィールドに次の値を入力します:

<code>serve</code>

5. コードを実行します

##ツールバーの「実行」(緑色の矢印アイコン) をクリックします。

6. アプリケーションのプレビュー

ブラウザが開き、実行中の Vue アプリケーションが表示されます。

ヒント:

最新の Node.js と npm がインストールされていることを確認してください。

• 問題が発生した場合は、WebStorm を再起動してください。
• Vue 開発の詳細については、WebStorm のドキュメントを参照してください: https://www.jetbrains.com/webstorm/help/vuejs.html

以上がウェブストームで vue コードを実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。