Hapicode

# 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 build WARNING in entrypoint size limit

Nuxtjs build で entrypoint size limit warning エラー発生...

Nuxtjs axios リクエストのヘッダー設定

Nuxtjs axios 通信毎に onRequest に header 設定したい...

Nuxtjs titleTemplate の設定

Nuxtjsのheadにtitleのtemplate使って設定する方法...

Nuxt.js でフロントエンドのカテゴリ選択

バックエンドLaravelとフロントエンドNuxtjsでカテゴリーの一覧表示と選択したら子カテゴリー...

楽天 GOLD に Nuxt で作った HP デプロイ公開した話

楽天GOLDにNuxtjs製HPデプロイ公開!楽天GOLDのFTP操作とNuxtjsで作成したページ...

web 開発でよく使うリダイレクトと nuxtjs redirect

リダイレクトコード、恒久リダイレクト一時的リダイレクトのいろいろをまとめました。...

localStorage is not defined に遭遇した時の対応

nuxtjsのssrモードでlocalStorage is not definedエラーに遭遇！...

nuxtjs の wpa を実装した時のメモ

3分でできるnuxtjs使ってwpa設定 @nuxtjs/wpaモジュール入れて設定追加して画像一枚...

vuejs スクロールでナビバー表示非表示

vuejsで上にスクロールするとナビメニューが表示、下にスクロールすると非表示の切り替えをやってみま...

nuxtjs のページごと head の title description 変更

nuxtjsのhead内titleとdescription動的変更してSEOパワーアップしていこう！...