Vue.jsを勉強するために環境を整える

どうもJavaScriptの経験一週間もない程度のころすけです

今回はVue.jsのTutorialをLocalで動かすために整えた環境のお話です

そもそもVue.jsとは

簡単にいえばJavascript UIライブラリです

Reactと似たところはありますが、別物です

詳しくは下のURLからどうぞ

必要な環境

試すだけならJSFiddleで以下の文を足しても良いのですが、ぼくの場合仕事で使うのでアプリケーションを開発できる状態にする必要がありました

というわけでVue.js公式では初心者は使うなと書いてありますがvue-cliをセットアップします

vue-cli

以下のコマンドを実行するとvue-cliをInstallすることができます

npm install --global vue-cli

vue-cliはプロジェクトを作る際に様々なボイラープレートを使用したプロジェクトを作成してくれるコマンドラインツールです

例えばwebpackを用いるボイラープレートを使用したい場合は以下のコマンドを実行します

vue init webpack my-project

その後対話式にProjectNameやAuthorなどを聞かれ、答え終わるとプロジェクトが出来上がっています

あとはmoduleをInstallしてrunすれば実行できます

cd my-project
npm install
npm run dev

開発環境

特にEditorを選ぶのに宗教上の問題がないのであれば、WebStormを採用しよう

Vue.jsが標準でサポートされており、補完などもしてくれる

公式からであれば毎月$5ちょっと払えばいいだけだし30日間は無料だし、会社を通じて買いたい場合サムライズムを通せば日本語で購入も可能

WebStorm上で実行できるように設定する

起動して先程作ったプロジェクトを読み込ませた後、右上にある▽のボタンを押し、「Edit Configurations…」を押す

その後次のような画面がでるので+を押し、npmを選択する

あとは次の画像のようにpackage.jsonのパスを設定し、Commandにrun、Scriptsにdevを設定してApplyすれば実行できるようになる

devを指定して、緑色の▶を押せばnpm run devが実行される

Terminateするのを忘れてPortを専有されないように注意しよう

今回は以上です