More than 5 years have passed since last update.

IntelliJ IDEAでVue.jsを動かす

Last updated at 2018-08-06Posted at 2018-06-16

何かと便利らしいのでVue.jsもIntelliJ IDEAで動かした。
ただ動かしたかった。
基本ここに書いてるけど、僕はIntelliJ 力がないため、その部分も補完した記事になってるはずです。
https://pleiades.io/help/idea/vue-js.html

これを読めばとりま　こうなります。

前提

mac
Vue.jsの環境できてる
IntelliJ IDEA Ultimate最新版

サムライズのハンズオンに行った時には、常に最新を取得してくださいと言われました。
ここからIDE買えるみたいですが、僕は知らなくて公式から買いました。
試用期間は無料で使えるようです。
https://samuraism.com/jetbrains/intellij-idea

#とりあえず新規作成

動かす方法に２つあって「空のIntelliJ IDEAプロジェクトを作成」と「静的 WebからVue.jsを作成」するパターンとある。
今回は「静的 WebからVue.jsを作成」をやってみる。

##Vue.jsプラグイン入れる

インテリジェーマーク>>Preferences>>Plugins
or
cmd+,
Pluginsタブ選択

Install JetBrains plugi...をクリック
Vue.js検索してインストール

##vue-cli入れる

npm install --global vue-cli

##プロジェクト作る

File>>New>>Project

※IDEは全般的にインクリメント検索が効くのでStaticと入力しても移動できる。
Static WebにVue.jsが現れてるのでネクストボタン。

名前つけて場所指定してネクスト。

初めはあまり気にせず、どんどんネクストすれば作れる。
ちなみにvue-cliが入ってないと、Project Create中に動かなくなります。
なんの警告も出ず作れずキャンセルボタンしか押せないので注意。
「IntelliJ IDEAでVue.jsを動かす」とか「IntelliJ IDEAでVue.jsが動かない」とか英語で調べたり色々やってしまった。