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

 2,901 total views,  3 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/

發表迴響

%d 位部落客按了讚: