Vue.jsのUIデザインフレームワークにiViewを導入する


## iViewとは

[公式サイト](https://www.iviewui.com)

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

2018年12月5日現在GitHubのスター数が18000ほど。
デザイン的には[Element](https://element.eleme.io/#/en-US)に近いデザインのものが多く、選定の際には競合しますが、iView Loaderが追加されるなど、導入が簡単になりました。

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



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

```html
<!-- 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を初期化させます。

```html

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

<script>
new Vue({
  el: '#app',
  data: {
    text: 'button'
  }
})
</script>
```
https://www.iviewui.com/docs/guide/install-en

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

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

```
$ npm install -g @vue/cli
```

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

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

<img width="1337" alt="スクリーンショット 2018-12-04 5.52.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/151039/223ad2bc-0220-e5b8-637f-e34583841519.png">

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

![スクリーンショット 2018-12-03 19.52.35.png](https://qiita-image-store.s3.amazonaws.com/0/151039/d19b85cb-bc6b-084f-4164-4d03ce9963b6.png)

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

![スクリーンショット 2018-12-03 19.56.42.png](https://qiita-image-store.s3.amazonaws.com/0/151039/a04951fb-cdd2-f50b-b286-bc5c314f4337.png)

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

![スクリーンショット 2018-12-03 20.00.42.png](https://qiita-image-store.s3.amazonaws.com/0/151039/80370613-2546-682a-b6e4-ebcad5ad8ec1.png)

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

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

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

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

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

webpack.config.js

```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

```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

```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

```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

```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

```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

```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をスクラッチから始める](https://ja.nuxtjs.org/guide/installation#%E3%82%B9%E3%82%AF%E3%83%A9%E3%83%83%E3%83%81%E3%81%8B%E3%82%89%E5%A7%8B%E3%82%81%E3%82%8B)

## 最後に

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