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


目前就選選擇了按需加載的話,但是樣式文件還是要引入完整的樣式文件


 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM