iView 實戰系列教程(21課時)_1.iView 實戰教程之配置篇

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了。插件已經自動安裝好了。你就什麼都不用配置了。



目前就選選擇了按需加載的話，可是樣式文件仍是要引入完整的樣式文件