LoginSignup
17

More than 5 years have passed since last update.

IntelliJ IDEAでVue.jsを動かす

Last updated at Posted at 2018-06-16

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

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

スクリーンショット 2018-06-16 18.22.30.png

前提

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

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

とりあえず新規作成

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

Vue.jsプラグイン入れる

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

スクリーンショット 2018-06-16 14.39.57.png

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

スクリーンショット 2018-06-16 14.40.05.png

vue-cli入れる

npm install --global vue-cli

プロジェクト作る

File>>New>>Project

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

スクリーンショット 2018-06-16 14.41.38.png

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

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

スクリーンショット 2018-06-16 14.42.02.png

普通はサクッと作れます。あとインテリジェー全体的に初めにインデックスを作るそうで、プロジェクト作成直後重いです。我慢です。

スクリーンショット 2018-06-16 18.12.42.png

実行する

動いた感が早く欲しいので動かします。

Run>>Run

をクリック
Edit Configurations...をクリックし

スクリーンショット 2018-06-16 17.36.05.png

npmを選択しstartにする

スクリーンショット 2018-06-16 17.36.20.png

左上のプラスボタンで追加する

スクリーンショット 2018-06-16 17.38.58.png

Runする

スクリーンショット 2018-06-16 17.39.13.png

なんか動き出し、localhost:8080 なんたらって出てくるので、押せば動いてる。でけた。

スクリーンショット 2018-06-16 17.39.28.png

これで色々遊べそう。せっかく学んだインテリジェー機能を復習していきた。
Vueもやっていきたい。

参考

https://pleiades.io/help/idea/vue-js.html
https://qiita.com/nirasan/items/7499a2c7fe9d7e834207
https://qiita.com/miyamotok0105/private/5dcbd69a288526bb5580

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17