¶iView 安裝與配置

這一篇是因為官網文件讓我實在是太挫折了！所以特別寫一篇來指正

用 vue-cli 的專案，初始化一個 webpack

¶安裝

https://www.iviewui.com/docs/guide/install#NPM_安装

npm install iview --save

¶官網配置

https://www.iviewui.com/docs/guide/start#引入_iView

官網文件有誤，要小心

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

Vue.use(VueRouter);
Vue.use(iView);

會出現 iView is unidefined

¶正確的配置

src/iview/index.js

import iview from 'iview'
前面的 iview 要用小寫

import Vue from "vue";
import iview from "iview";
import "iview/dist/styles/iview.css";

Vue.use(iview);

src/main.js

加入這一行即可

import "./iview";

¶測試

https://www.iviewui.com/docs/guide/introduce#示例

將專案中的

component/HelloWorld.vue

改寫成下面這樣

<template>
    <Slider v-model="value" range></Slider>
</template>
<script>

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

畫面