安裝一套基於 Vue.js 的高質量UI 元件庫iView

472 total views, 1 views today

在改版公司新網站的時候，因為要應付天天都會有奇怪的人，問奇怪的問題，所以要用最快速有效率的元件，來解決自己工作上的疑難雜症，但是通常高手先進都會叫你啃官網的說明，於是當初用了vue-datepicker-local這個套件，發現我又需要一些三級連動的，或是處理動態效果的，這些當然可以透過 js 與 bootstrap4 來寫，但是我又不碼農，隨時都會有”電腦不能用”，或是指著螢幕講我聽不懂的話，需要處理的項目，最後終於出現 iview 這個萬用的UI。

同場加映，另外一套也是不錯的UI元件layui ，或是ElementUI與vueify，可是因為已經使用 vue 了，加上bootstrap，感覺用layui有點多餘(雖然加掛 iview 也差不多是這樣 ) ，總之我們來看看怎麼安裝吧。

首先，先去啃官方的文件，有很多的範例與教學，我是安裝在laravel使用 webpack的方式裝。

首先下

 npm install iview --save

然後在 webpack.mix.js 加入

mix.js('resources/js/app.js', 'public/js')
.js('node_modules/iview/dist/iview.min.js','public/js')

接著在linux終端機執行

 npm run watch-poll

接下來是蠻關鍵的一步，但是好像很多教學網站都沒提到，在view要引入 iview.min.js

 <script src="{{ mix('/js/iview.min.js') }}"></script>

這樣就完工了，透過 iView 官方文件，可以簡單看一下他的範例，抄起來很快的

步驟指引 https://jsfiddle.net/adslcai/21vkth6s/

tab 標籤頁範例 https://jsfiddle.net/adslcai/2uvawh86/

網頁載入進度指示 https://jsfiddle.net/adslcai/1wbkt6u8/