基於vue-cli工程的應用之——iView

1、快速上手

一、搭建基礎工程--vue-cli
    
    // 新建iview-project工程文件夾
    $ vue init webpack iview-project
    
    // 安裝過程當中自定義選項，新手的話也能夠選擇**一路回車**
    
    // 進入 iview-project文件
    $ cd iview-project/
    
    // 安裝依賴模塊
    $ npm i
    
    // 測試
    $ npm run dev
    
    至此，瀏覽器打開localhost：8080，出現Vue.js頁面,表示基礎工程搭建**成功了**！

二、NPM安裝 iView
    $ npm i -S iview

三、引入 iView 
    1)、總體引入
        通常在 webpack 入口頁面 main.js 中以下配置：
        import iView from 'iview';
        import 'iview/dist/styles/iview.css';

        Vue.use(iView);
    
    2）、按需引入
        若是您想在 webpack 中按需使用組件，減小文件體積，能夠這樣寫：
        import { Button, Table } from 'iview';
        Vue.component('Button', Button);
        Vue.component('Table', Table);
        
        **提醒：***按需引用仍然須要導入樣式，即在 main.js 
        或根組件執行 import 'iview/dist/styles/iview.css';*

四、組件使用規範
        a、動態傳值，使用 :prop = ''
        b、在非 template/render 模式下（例如使用 CDN 引用時），
           組件名要分隔（駝峯命名改成烤肉串），例如 DatePicker 必需要寫成 date-picker
        c、如下組件，在非 template/render 模式下，須要加前綴 i-：
            ·Button: i-button
            ·Col: i-col
            ·Table: i-table
            ·Input: i-input
            ·Form: i-form
            ·Menu: i-menu
            ·Select: i-select
            ·Option: i-option
            ·Progress: i-progress
           如下組件，在全部模式下，必須加前綴 i-，除非使用 iview-loader：
             ·Switch: i-switch
             ·Circle: i-circle