# Nuxtjs に iview 4.0 入れた動かしてみた

2019 年 10 月 9 日から iview4 がリリースされて今回のアップデート変更は複数あります。

  • 名前も iView から View UI に変更
  • これから npm パッケージiviewの更新しない、代わりにview-designのパッケージ名を使う
  • components サイズ調整、12px から 14px フォントアップなど 50 個以上更新・バグ修正
  • List コンポーネント追加

该项目即为原先的 iView。iView 作者将在此仓库继续开发 iView 4.0 和后续版本,以及维护工作。新的组件库命名为 ViewUI,原仓库 iView 作者不再提交内容。

This project is the original iView. The iView author will continue to develop iView 4.0 and subsequent releases, as well as maintenance work, in this repository. The new component library is named ViewUI, and the iView author will no longer continue to submit content in the original repository.

# npm install

npm install view-design --save

# plugin js 作成

nuxt の場合plugin/iview.js作成してインポート

import Vue from "vue";
import iview from "view-design";

// import style
import "view-design/dist/styles/iview.css";

Vue.use(iview);

# nuxt.config.js 修正

余計な部分省略します。

plugins: [
      {src: '~plugins/iview'}
  ],

オプションで ssr:true 設定できます。

{src: '~plugins/iview', ssr: true}

# page の vue ファイル作る

テストデータ入れてみる

<template>
  <div>
    <h1>iView4 粋だね</h1>
    <Slider v-model="value" range />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [20, 50]
    };
  }
};
</script>

# iview 内部の function 再利用する場合

iview/src/utils/assist.jsなど

// e.g.
import { findComponentDownload } from "view-design/src/utils/assist";

import { on, off } from "view-design/src/utils/dom";

# CDN インポート

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css" />
<!-- import iView -->
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>

CDN 利用した時、以前のバージョンと同様にi-タグが必要

# webpack 使ってmain.jsの設定

import Vue from "vue";
import VueRouter from "vue-router";
import App from "components/app.vue";
import Routers from "./router.js";
import ViewUI from "view-design";
import "view-design/dist/styles/iview.css";

Vue.use(VueRouter);
Vue.use(ViewUI);

// The routing configuration
const RouterConfig = {
  routes: Routers,
};
const router = new VueRouter(RouterConfig);

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

部分インポート

import { Button, Table } from "view-design";
Vue.component("Button", Button);
Vue.component("Table", Table);

# 参照

Nuxtjs 公式サイト (opens new window)
npm iview 3.5.2 (opens new window)
npm view-design 4.0.2 (opens new window)

2019-10-30
  • nuxtjs

関連記事

Nuxtjs 3 に Ant design Vue を使う
Nuxtjs build WARNING in entrypoint size limit
Nuxtjs axios リクエストのヘッダー設定
Nuxtjs titleTemplate の設定
Nuxt.js でフロントエンドのカテゴリ選択
楽天 GOLD に Nuxt で作った HP デプロイ公開した話
web 開発でよく使うリダイレクトと nuxtjs redirect
localStorage is not defined に遭遇した時の対応
nuxtjs の wpa を実装した時のメモ
vuejs スクロールでナビバー表示非表示
nuxtjs のページごと head の title description 変更