Help us understand the problem. What is going on with this article?

Vue.js + UIKitによるSPA開発環境構築

More than 1 year has passed since last update.

はじめに

フロントエンド環境の構築に関して最低限必要な手順を残します。
以下の環境を使って構築しました。

環境 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が一番シンプルで自分好みだったからです。

手順

環境構築する手順は以下のとおりです。

1.vue-cliのインストール

$ npm install -g @vue/cli

※すでに古いバージョンのvue-cliがインストールされている場合はアンインストールしてください。

$ npm uninstall vue-cli

2.vueプロジェクトの作成

$ vue create my-project

3.vueプロジェクトに移動

$ cd my-project

4.UIKitのインストール

$ npm install uikit

5.UIKitの読み込み

main.jsにUIKitを読み込むよう、以下の内容を追記

src/main.js
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)

6.ビルド

以下のコマンドでビルドし、http://localhost:8080 をURLバーに入力するとVue.jsの初期画面(ロゴ)が表示されます。

$ npm run serve

参考

自分が環境構築の際に、一番手こずった点はUIKitのimport部分です。
最初vue-cliをインストールした後、公式サイトから落としてきたUIKitを適当なフォルダに入れて<script>で読み込もうとしましたが、うまくいきませんでした。

そこでUIKitもnpmでインストールするように変更し、node_modulesの載せた状態でmain.jsにimportさせると上手くいったので、その手順を載せておきます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした