Vue.jsの環境構築のやり方
Vue.jsの環境構築をVue CLIを使って行うやり方を備忘録も兼ねてまとめました。
Vue CLIとは？
Vue.jsの開発環境をセットアップするためのツール
Vue.jsの開発に必要なツール類を質問に答えるだけでまとめてインストールしてくれる
- トランスコンパイラ(ES6などの標準では対応していない新しいJavascriptの構文をブラウザで解釈できるように変換するためのツール)
- Vue.js関連のライブラリ(RouterやVuexなど)
- リントツール(構文のミスなどを検出してくれるツール)
- テストツール(プログラムが意図したとおりに動くかチェックするツール)
Vue CLIを利用するために必要なもの
- Nodeのバージョン8.9以上
ご丁寧に推奨版なるものがあるので、そちらをインストールするのが安牌だと思います。もちろん、すでにインストール済みの方は飛ばして下さい。
- Vue CLIのnpmパーケージ
コマンドをターミナルに打っていきます。(今回はバージョン3.5.0を使用します。)
~ $ npm install -g @vue/cli@3.5.0
インストールが終わったら、正しくインストールされたか確認するため
~ $ vue -V
と打って3.5.0と表示されれば成功です。
表示されない場合はエラーが起きている可能性が高いです。permission deniedと出ていたらこの記事のとおりにコマンドを打てばおそらく治ります。(私もなりました)
Vue CLIがインストールできたらVueコマンドが使えるようになるので、開発環境をセットアップしていきましょう。
プロジェクトを作成したいディレクトリに移動して下さい。
デスクトップに作成する場合は次のコマンドを打ちます。
~ $ cd ~/Desktop/
次にVueコマンドを打ってプロジェクトを作成します。
Desktop $ vue create sample-app
(実際に打つのはvue以下、sample-appの部分はプロジェクト名になるので自由に指定して下さい。)
ここから各種オプションが選択肢で提示されるので選んで行きます。
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
Manually select features
デフォルトのプリセットを使用するか、個別にインストールするツールを選ぶか聞かれています。下を選択すると細かくカスタマイズできますが、今回は簡易的に、そのままエンターを押して上を選択します。
プロジェクトのディレクトリに移動してサーバーを立ち上げましょう。
Desktop $ cd sample-app/
sample-app $ npm run serve
サーバーがうまく立ち上がると下のようにターミナルに表示されるので、http://localhost:8080/にアクセスしてみましょう。(8080番ポートが使用済みの場合は8081番以降で空いている番号が指定されます)
こんな画面が表示されれば成功です！めでたしめでたし〜。
