1.iView 實戰教程之配置篇
點擊添加插件，。
選中后安裝
全部導入還是按需導入。
2.是否需要自定義主題變量
3.多語言的設置。
這里我們全部選擇為默認
然后點擊繼續。
啟動項目
入口文件導入了iview的插件
Ivewi.js也比較的簡單的 完整的導入了iview的組件庫。現在我們的項目可以完整的使用ivew了
比如說首頁上的button就是在這個地方渲染的。
全局配置
https://www.iviewui.com/docs/guide/global
我們首頁上的button沒有使用任何的size屬性的：
比如說我們這里設置一個全局配置;
頁面的button就變成了大尺寸的button了
單獨設置button大小為small
我們在select內復制一段代碼
復制一段代碼
直接替換掉App.vue原來的內容
然后外層加個div包裹住
然后在瀏覽器中的效果。
設置transfer：true后 浮動窗在body的里面了。並不在下拉菜單的div里面
這是浮動層的元素。
這樣設置的好處：
上面的浮層被overflow給切掉了。設置transfer就不會出現此問題了
自定義主題配置
vue-cli3設置iview自定義主題
https://my.oschina.net/zjhlearn/blog/1920642?tdsourcetag=s_pcqq_aiomsg
默認藍色主題
Iview使用的less和less-loader
注意安裝的是2.7.3的版本
再安裝less-loader的4.0.6的版本;
注釋掉iview默認的css引入：
這里面包含了所有的iview。變量還有各個組件的配置
在webStorm編輯器中是可以直接點擊進入對應的less文件中的
直接進入到了index.less文件內。VScode中支持不了
這是一個主色，我們在custom內覆蓋這個變量就可以了。
設置為一個紫顏色
重新引入我們的less文件
重新啟動項目會
查看頁面的效果：鼠標放上去 紫色的效果出來了。
我們把下拉修改為一個Button，主意首字母B一定是大寫的。Button是最能體現出主題顏色的
頁面效果
國際化（多語言）配置
Iview默認是中文的
Iview.js內
Button替換不來我們換成DatePicker的插件，會比較明顯。會根據不同的語言顯示不同的文本
直接在這里搜索
復制這一段。
頁面上顯示效果
例如我們再換成日語
動態切換多語言
這里需要用到一個插件vue-i18n
使用Vue.use注冊一下i18n的插件
使用Vue.locale把這個變量去覆蓋，要不然我們在使用i18n的時候會報錯
這兩語言包只是iview里面組件的語言包
這個時候還沒有引入自己業務的語言包
這個時候需要去聲明一個列表。把你業務中的多言和iview的語言包進行一個merge合並，。
然后去創建i18n的實例
前后都一樣可以用縮寫的形式
Key和value的形式是一樣的 es6中就可以使用縮寫的形式
那么怎么去使用呢
我們使用$t的形式，這里的變量message就是我們之前定義的
我們再改成中文：
Iview-loader
從20分鍾開始
Iview-loader是個什么東東呢？我們到文檔里面去看一下
Vue里面Swich和Circle無論是大寫還是小寫都是無法直接被使用的。
如果你使用iview-loader的話 你就要寫成i-switch和i-circle這種的標簽的形式
搜索組件switch：
我們的項目是通過vue-cli3.0來創建的。Iview-loader目前還沒有很好的支持它
所以我們使用第二種用法：
https://github.com/iview/iview-project
直接下載：
1:npm install
安裝所有依賴
2:npm run init
執行初始化
3：npm run dev
啟動服務
出現這個界面就代表我們的服務已經起來了
這個配置里面已經預先安裝好了iview-loader
關於iview-laoder的配置已經在這里配置好。 Rules的規則是從下往上走的。
所以先進來的是下面的iview-loader
Iview-loader的配置也是非常的簡單 只有一個prefix前綴
如果我們設置為true。開啟后。那么我們就可以
或者日期控件
在文檔中已經對所有支持的標簽做了一個完整的列表
Iview用到的所有的組件都可以在上面找到了。
創建新項目
通過vue-cli去創建新的項目，看一下剛才的配置
在c盤創建iview-custom
安裝完成
添加插件
是否替換iview的less的變量。默認是關閉的。如果我們開啟的話剛才上面講的那些配置就會默認都配置好了。
還有默認去選擇一種語言。
點擊完成安裝的按鈕，進行安裝
Vue-cli貌似給你標出來了 改動了哪些地方，這里我們提交修改 貌似沒作用 我們跳過也是可以的
我們在編輯器中打開
不管用我們還是直接拖拽到VSCode里面吧
這里主題顏色的變量就已經幫你寫好了。
在iview的配置里面也引入了less
Api選擇快速上手
首先需要安裝babel-plugin-import插件
如果剛才通過vue-cli配置安裝的時候選擇了按需加載的話就不需要在安裝babel了。插件已經自動安裝好了。你就什么都不用配置了。
目前就選選擇了按需加載的話，但是樣式文件還是要引入完整的樣式文件
