90
73

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vue.jsとUIkitでつくるフロントエンド環境

Last updated at Posted at 2017-05-24

最近社内ではVue.jsが流行っています。
世間でも人気は上々のようで、混沌としたフロントエンドフレームワーク界隈でも一番気軽に使えると評判です。

UIkitはbootstrapなどと同じようなスタイルライブラリです。
あんまり巷では噂は聞かないのですが使い勝手がよくこちらも業務で愛用しております。
UIkitがver.3になってWebpackでインポート出来るようになったのでスターターキットを作成しました。

UIkitが3になって個人的に嬉しかったのはWebpack対応とScss版が出来たこと。
ちなみにUIkitの公式サイトもVue.jsで作成されています。

そこで今回はスターターキットの説明をしながらVue.js,UIkitのよいところを書こうと思います。
※UIkitの説明がメインになってしまったのでVue.js,vue-loader,Webpackとかわかんねえよって方は意味不明かもしれません;

Vue.js+UIkit3 Boilerplate

Vue.js+UIkit3スターターキット

git cloneして適当にディレクトリ名変えて
yarn install & yarn devすればすぐにこんなイケた感じの画面が作れちゃうキットです。

スクリーンショット 2017-05-24 15.19.30.png

ディレクトリ構成はこんな感じ

.
├── README.md
├── dist
│   ├── build.js
│   └── bundle.js
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── bundle.js
│   ├── main.js
│   └── theme
│       └── uikit.app-theme.scss
├── webpack.config.js
└── yarn.lock

/src/bundle.js

ここにUIkitに必要なソースをimportしています。

bundle.js
import UIkit from 'uikit'
import Icons from 'uikit/dist/js/uikit-icons'
import 'uikit/dist/css/uikit.css'
import './theme/uikit.app-theme.scss'
UIkit.use(Icons);

UIkitのCSSソースも読み込んでいて、これは実行時にHTML <head>内に <style>としてJSにより生成されます。
WebpackにはCSSはファイルとして書き出すパターンと <style>で動的に生成するパターンがあるのですが、
こんかいは後者を選択してます。HTMLファイルに影響与えないので管理が楽かなと。

ファイルとして書き出すパターン => Webpack using ExtractTextWebpackPlugin

CSSテーマをカスタマイズする

UIkitはデフォルトはとてもシンプルなデザインなのでなにかしらカスタマイズすることになると思います。
このキットでは theme/uikit.app-theme.scssに書き込むと上書き出来るようになっています。

本格的にテーマをいじっていきたい場合は

Vue.js内でUIkitを使う

UIkitのいいとろろとして各種のコンポーネントを UIkit.modal(element, options); のようにJSから操作がしやすい点があります。
なのでVue.jsからの操作も簡単です。よく使うサンプルをつくってみました。

Notificationを使うサンプル

サンプルのJSFiddle
スクリーンショット 2017-05-24 15.19.30.png

new Vue({
  el: '#app',
  data: {
    text: "",
    messages: [
    	'add message here.'
    ]
  },
  methods: {
    set() {
        this.messages.push(this.text);
        this.text = "";
      },
      show() {
        this.messages.forEach(m => UIkit.notification(m, {
          status: 'success'
        }));
        this.messages = [];
      }
  }
})

ボタンをローディング表示にする

あんまりUIkit関係ないですがよく使う処理のサンプルです。
サンプルのJSFiddle
スクリーンショット 2017-05-24 15.19.30.png

new Vue({
  el: '#app',
  data() {
    return {
      url: 'https://api.github.com/search/repositories',
      events: [],
      isLoading: false
    }
  },
  methods: {
    get() {
    	this.isLoading = true;
			axios.get(this.url, {
        params: {
          q: 'vuejs'
        }
      })
      .then(response => {
      	this.events = response.data.items;
        this.isLoading = false;
      })
    }  
  }
})

とこんな感じでaxiosで通信して、Vue.jsでデータバインドして、UIkitで画面作ればWebダッシュボード的なものはすぐ作れちゃいます!
今後これをChart.js組み込んだり、カラーテーマ増やしてadminキットみたいなのも作ろうと思います。

90
73
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
90
73

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?