iView 安裝與配置

  1. iView 安裝與配置
    1. 安裝
    2. 官網配置
    3. 正確的配置
    4. 測試

iView 安裝與配置

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

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

安裝

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

npm install iview --save

官網配置

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

官網文件有誤，要小心

1
2
3
4
5
6
7
8
9
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 要用小寫

1
2
3
4
5
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

改寫成下面這樣

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <Slider v-model="value" range></Slider>
</template>
<script>

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

畫面

發表於 
tags:
  • { vue }
  • { ivuew }