iViewとは

Vue.jsベースのデザインフレームワークです。
デザインに優れていて、コンポーネント単位でUIを組み立てることができます。シンプルで使いやすいコンポーネントが多いです。

2018年12月5日現在GitHubのスター数が18000ほど。
デザイン的にはElementに近いデザインのものが多く、選定の際には競合しますが、iView Loaderが追加されるなど、導入が簡単になりました。

今回はCDN, webpack, Vue-CLI, Nuxt.js、それぞれの環境上での構築について解説します。

CDN

スクリプトの読み込みでVue.jsの環境を構築できる方法です。コンポーネント志向のフレームワークに慣れていない方は、まずこちらで試してみることをお勧めします。
Vue.jsの公式サイトにも記載がありますが、React, Vueなどコンポーネント志向のフレームワークは文法的にも環境構築も、ES5のものと大きく違うので混乱しがちなためです。

<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- iView -->
<script src="https://unpkg.com/iview@3.1.5/dist/iview.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/iview@3.1.5/dist/styles/iview.css">

CDNの読み込み後にVueを初期化させます。


<div id="app">
  <i-button>{{ text }}</i-button>
  <date-picker />
</div>

<script>
new Vue({
  el: '#app',
  data: {
    text: 'button'
  }
})
</script>

Vue-CLI

プラグインからiViewを読み込みます。
環境構築の煩雑さがなく、簡単に単一コンポーネントベースのプロジェクトを作成できます。
また、UIからインストールを行えたり、実行状況をチェックできたりするのも、とっつきやすくて良いですね。

Vue-CLIをインストールします。

$ npm install -g @vue/cli

GUIからプロジェクトをスタートさせてみましょう。モジュール類はデフォルトで大丈夫です。

$ vue ui

指定されたアドレスからこのページに遷移できます。「作成」からプロジェクトを作ってみましょう。

完成後は、このようなダッシュボード画面が表示されます。この画面から、新しいプラグインを読み込んだり、Vuex, Vue Routerなど必要なモジュールを読み込むことができます。

右上の「プラグインを追加する」ボタンからVue-cli専用のプラグインをインストールすることができます。プラグインを追加した後は、「タスク」バーからアプリの起動ができます。開発用ならserveですね。「タスクの実行」ボタンを押すとモジュール類を読み込んで起動します。

完了したら「アプリを開く」ボタンを押すと出来上がったアプリを見ることができます。

iViewのボタンを表示してくれていますね。

webpack

追加で、専用loaderであるiView Loaderを読み込みます。
webpackの運用はVue-CLI、Nuxt.jsの存在により必須ではなくなりましたが、それらのモジュールも裏ではwebpackを使用していますし、少し凝った設定をしたい場合などはwebpackを直接使います。
Vue.jsの構築の際はICS MEDIAさんのサイトがお勧めです。

今回はこの設定にiViewを加えていきます。上記の設定に加えて、iview-loaderをインストールします。

$ npm install --save iview
$ npm install --save-dev iview-loader

.vueの記述を次のように書き換え、iview-loaderを追加します。また、iviewのCSSのアイコンを読み込むため、file-loader用の記述を追加します。

webpack.config.js


module: {
  rules: [
    {
      test: /\.vue$/,
      use: [
        { loader: 'vue-loader' },
        {
          loader: 'iview-loader',
          options: { prefix: false }
        }
      ]
    },
    {
      test: /\.(png|jpg|gif|woff|svg|eot|ttf)\??.*$/,
      loader: 'file-loader',
      options: {
        name: 'assets/[name].[ext]?[hash]'
      }
    }
  ]
}

webpackでの指定がなければ、src/index.jsがデフォルトで読み込まれます。
src/index.jsでVue.js、Viewの読み込みを行います。

src/index.js


import Vue from 'vue';
import iView from 'iview';
// CSSの読み込み
import 'iview/dist/styles/iview.css';
// 日本語対応
import locale from 'iview/dist/locale/ja-JP';
import App from './components/App.vue';

Vue.use(iView, { locale });

new Vue({
  el: '#app',
  render: h => h(App)
});

初期に読み込む対象としてApp.vueを作ります。
パスはsrc/components/App.vueです。単一コンポーネントの場合は.vueファイルになりますね。

src/components/App.vue

<template>
  <div>
    <Button>{{ text }}</Button>
    <Datepicker />
  </div>
</template>

<script>
export default {
  data() {
    text: 'button'
  }
}
</script>

webpackを起動させます。npxはnode-modules内のモジュールを直接実行させるコマンドです。

$ npx webpack

ファイルはdist/main.jsの位置に生成されます。
出来上がったmain.jsを起動させるためのhtmlを作ります。src/index.jsでVueの初期化の際にel: '#app'と指定しているので、id="app"の付いたdiv要素は必須です。

dist/index.html

<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>

Nuxt.js

プラグインを利用してiViewの読み込みとCSSの読み込みをします。
Vue.jsの設計は自由度が高く、規模に応じてディレクトリの管理が難しくなっていくので、ディレクトリ管理に使用する意味合いでもNuxt.jsは分かりやすくて良いです。それに加えて構築が楽です。

まずはインストールから。

$ npm install --save nuxt iview

pluginsディレクトリを作成して、index.jsを作成します。
plugins/index.js

import Vue from 'vue';
import iView from 'iview';
// CSSの読み込み
import 'iview/dist/styles/iview.css';
// 日本語対応
import locale from 'iview/dist/locale/ja-JP';

Vue.use(iView, { locale });

cssの読み込みと、nuxtの設定ファイルで、先ほど作成したplugins/index.jsの読み込みをします。

nuxt.config.js


module.exports = {
  plugins: ['~/plugins/index'],
  css: [
    'iview/dist/styles/iview.css'
  ]
}

「~」はディレクトリ直下を指すエイリアスですね。
https://ja.nuxtjs.org/guide/directory-structure#%E3%82%A8%E3%82%A4%E3%83%AA%E3%82%A2%E3%82%B9-%E5%88%A5%E5%90%8D-

Nuxtはpages内の各ファイルを１ページと判定するので、pages/index.vueを作成します。

pages/index.vue

<template>
  <div>
    <h1>hello!</h1>
    <Button>{{ text }}</Button>
    <DatePicker />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text: 'this is button'
      }
    },
  }
</script>

dev版での起動はnuxtを起動させます。

$ npx nuxt

指定されたポートにアクセスすれば開きます。

nuxt.jsをスクラッチから始める

最後に

iviewはデザインが良いコンポーネントが揃っているので、導入事例が今後増えていけば良いなと思います。
明日はインターンの@andmohiko君です。