はじめに
Mac版の開発環境手順を「IntelliJ IDEAでVue.jsを動かす」というタイトルでmiyamotok0105さんが公開されていました。
本記事を参考に、こちらではWindows10版の手順をまとめてみました。
なお、IntelliJのVue.jsプラグインですが、 単一ファイルコンポーネントによる開発 を前提にしたテンプレートが生成されます。
そのため本手順で構築される環境も、単一ファイルコンポーネントによる開発を行うための環境となります。
通常（？）の下記のようなhtmlファイルにscriptタグでvue.jsを指定してjsをゴリゴリ書くような開発向けではないので、ご注意ください。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
～省略～
</html>
※ 参考：「Vue.js公式：単一ファイルコンポーネント」
環境
| ソフトウェア | バージョン |
|---|---|
| Windows 10 Professional | - |
| IntelliJ Ultimate | 2020.3 |
| nodejs （※） | 14.15.1 |
※ nodejsはZIP版をC:\Programs\nodejs\node-v14.15.1-win-x64に展開。
手順
PluginsからVue.jsをインストールします。
New ProjectからJavaScriptを選択し、リストからVue.jsを選択してNextをクリック。
Project Name：適当にプロジェクト名を入力
Project location：デフォルトのまま
Node interpreter：インストールしたnodejsの絶対パスを設定する（※）
Vue CLI：デフォルトのまま
Finishをクリック。
※ なお、Node interpreterの選択肢にDownload Node（うろ覚え）という選択肢があったので、こいつを選択すれば
事前にNode.jsをインストールしなくてもIntelliJが自動的に最新のNode.jsをインストールしてくれるかもしれません。
Finishをクリックすると、IntelliJが自動的にVueプロジェクトの初期化を行います。
そこそこ重い処理なのか、僕の環境では10分くらいかかりました。（10年くらい前のノートパソコン）
Vueプロジェクトの初期化が完了すると、以下のようなテンプレートが生成されます。
動作確認
単一ファイルコンポーネントのためビルドする必要があります。
今回生成されたテンプレートには、package.jsonのなかに下記が用意されています。
- server ビルドを行い確認用のサーバーを起動する
- build ビルドを行う
- lint リント（たぶん構文チェック。。。）
動作確認のため、「server」を実行します。
IntelliJ上で、「Ctrl + tab」を押してSwitcherを立ち上げ、0:npmに選択を合わせてEnterキーを押してください。
npmのWindowが表示されるようになります。
serverを右クリックし、メニューから「Run 'server'」を選択しクリックしてください。
ビルドとサーバーの起動が実行されます。ビルドが成功し、サーバーが起動するとアクセスURLが表示されます。
ブラウザでアクセスしてみると、下図のようにテンプレートで自動生成されたサンプルのVue.jsサイトにアクセスできます。
