iView 實戰系列教程(21課時)_1.iView 實戰教程之配置篇_圖片優化

首先須要安裝vue cli 3.0版本

點擊添加插件，

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


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