はじめに
フロントエンド環境の構築に関して最低限必要な手順を残します。
以下の環境を使って構築しました。
| 環境 | Version |
|---|---|
| OS | macOS Mojave 10.14.3 |
| node.js | 10.13.0 |
なぜ
なぜフロントエンドか？
提供しているプロダクトの責務とコンテキスト境界を考えたとき、サーバサイドアプリケーションだと重すぎるし、冗長機能ができそうな予兆がみられました。
また全ての機能を同じアプリケーションに搭載した場合、ビジネスのスピード感についてゆかなくなる時がくる、つまり技術的負債を溜め込みやすい体質になるのではないかという懸念があり、フロントエンドとバックエンドサービスは分断することにしました。
なぜVue.jsか？
自分が経験した開発の歴史はJQueryゴリゴリ→Knockout.js（MVVM）のような流れを辿ってきました。
Vue.jsはたまたま出会ったのですが、JSフレームワークのデファクトであるバインディング機能はもちろん、CLIによるワンタッチでの環境構築、ルーティング機能がとても便利だと感じた点と、学習コストが低いという定評がある点から選びました。
なぜUIKitか？
BootStrapは飽きたのと、いくつかCSSフレームワークを見た上でUIKitが一番シンプルで自分好みだったからです。
手順
環境構築する手順は以下のとおりです。
１．vue-cliのインストール
$ npm install -g @vue/cli
※すでに古いバージョンのvue-cliがインストールされている場合はアンインストールしてください。
$ npm uninstall vue-cli
２．vueプロジェクトの作成
$ vue create my-project
３．vueプロジェクトに移動
$ cd my-project
４．UIKitのインストール
$ npm install uikit
５．UIKitの読み込み
main.jsにUIKitを読み込むよう、以下の内容を追記
import UIkit from 'uikit'
import Icons from 'uikit/dist/js/uikit-icons'
import 'uikit/dist/css/uikit.css'
import 'uikit/dist/css/uikit.min.css'
UIkit.use(Icons)
６．ビルド
以下のコマンドでビルドし、http://localhost:8080 をURLバーに入力するとVue.jsの初期画面（ロゴ）が表示されます。
$ npm run serve
参考
自分が環境構築の際に、一番手こずった点はUIKitのimport部分です。
最初vue-cliをインストールした後、公式サイトから落としてきたUIKitを適当なフォルダに入れて<script>で読み込もうとしましたが、うまくいきませんでした。
そこでUIKitもnpmでインストールするように変更し、node_modulesの載せた状態でmain.jsにimportさせると上手くいったので、その手順を載せておきます。