Vue.jsの環境構築

Vue.jsの環境構築:

はじめに

Vue.jsを用いたWebアプリケーションの開発を始めるにあたり必要な手順を記載します。

対象

• Vue.jsに興味はあるが触れたことがない人
• フロントエンドの開発全般に知見があまりない人

環境

• MacOS Mojave 10.14.1

Vue.jsをインストールする

まず、homebrewを利用してnode.jsのパッケージを管理するツールであるnodebrewをインストールします。

ホームディレクトリに.nodebrewディレクトリができているのでパスを設定して有効化します。

すると、npmコマンドが使えるようになっているので、関連するモジュールをインストールします。

なお、-gオプションをつけると、インストールされたパッケージがどのディレクトリにいても有効化されます。

$ brew install nodebrew 
$ echo "PATH=$HOME/.nodebrew/current/bin:$PATH" >> ~/.bashrc 
$ source ~/.bashrc 
$ npm install -g @vue/cli@3.0.1 @vue/cli-init@3.0.1 @vue/cli-service-global@3.0.1 

また、上記ではvue.jsに関連するパッケージのバージョンを指定していますが、以下のように指定なしでも問題はありません。

$ npm install -g vue-cli 

サーバーを立ち上げる

vueコマンドでアプリケーションディレクトリを作り、ディレクトリに入ります。

その後、npm runコマンドでサーバーを立ち上げます。

$ vue init webpack your_app 
$ cd your_app 
$ npm run dev 

最初のコマンドで指定している、webpackはVue.jsにおけるディレクトリのテンプレートを表しています。
webpackを指定すると様々なツールが自動的に生成されるので大抵の場合はこれを指定すれば問題ないでしょう。

起動すると、コマンドライン上に立ち上がったWebサーバーのURLが表示されます。(ほとんどの場合http://localhost:8080)

URLにアクセスして、Vue.jsの初期画面が表示されれば成功です。

利用するパッケージを追加する

必要なパッケージがあれば、適宜インストールします。
-gオプションをつけない場合は自分がいるアプリケーションディレクトリのみにパッケージがインストールされます。

アプリケーション特有のパッケージをインストールする場合は-gオプションなしでインストールすることを推奨します。

$ npm install --save axios vuex es6-promise 
$ npm install --save-dev eslint-plugin-vue@4.7.1 @vue/test-utils@1.0.0-beta.24 

終わりに

以上でVue.jsの環境構築は完了です。

Webアプリケーションの開発環境構築に関して知見がない状態で書いているので誤りがあればご指摘ください。