Rails + Vue.jsでWebアプリケーションを作っている途中ですが、その前にVue.jsのお勉強ということでvue-cliを使って簡単なアプリケーションを作ってみます。

何を作るか

大学のアート系学科に在席している知人のポートフォリオサイトを制作します。
就職活動にあたってポートフォリオの提出を求められることが多いtとか。
紙で作る人も多いとのことですが、今回はWebでポートフォリオサイトを作っていきたいと思います。
ついでにそのサイトを自分のポートフォリオにしてしまおう

開発環境

こちらもAWS Cloud9で開発することにしました。
まずはポートフォリオサイト用のディレクトリを作ります。

mkdir terraFolio

ふざけた名前ですが、このディレクトリに構築していきます。

アプリケーションの構築

こちらの記事を参考にさせていただきました。
Cloud9でvue-cli環境を作る

vue-cliをインストール

まずは、npmでvue-cliをインストールします

npm install -g vue-cli

Vue.jsのプロジェクトを作る

作成したプロジェクト用ディレクトリへ移動し、Vue.jsのプロジェクトを作ります。

cd terraFolio
vue init webpack

これでVue.jsのプロジェクトが作成されました。 nodeモジュールをインストールします。

npm install

サーバーを起動する

Cloud9でdevサーバーを動かす場合には、build/webpack.dev.conf.jsの設定を変える必要があるようなので、以下のように変更します。

devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: true,
  hot: true,
  compress: true,
- host: process.env.HOST || config.dev.host,
- port: process.env.PORT || config.dev.port,
+ host: '0.0.0.0',
+ port: '8080',
+ disableHostCheck: true,
　　　　・
　　　　・
　　　　・
}

これでサーバーが立ち上がるようになりました。
devサーバーを立ち上げてみます。