vue配合iview/element等ui實(shí)現(xiàn)界面效果起步

Object 發(fā)布于2019-08-20 17:31 / 1410人閱讀

摘要：與都是與配合使用的框架，用法與配置基本一致，在此，我以為例，教你如何起步。如果我的文字對(duì)你有用，記得點(diǎn)心關(guān)注我，給一點(diǎn)點(diǎn)動(dòng)力支撐。

iview與element都是與vue配合使用的ui框架，用法與配置基本一致，在此，我以iview為例，教你如何起步。
*首先，你需要有一定的vue基礎(chǔ)，如果你還是個(gè)小白，可以去我之前介紹如何搭建一個(gè)vue項(xiàng)目先看看，點(diǎn)擊下面的鏈接就OK了
http://www.jianshu.com/p/866999e513ef
vue.js使用vue-cli搭建...

1.安裝

安裝：方式有倆種

[1]:CDN 引入

[2]:npm安裝

這種方式是一般實(shí)際開(kāi)發(fā)所用的方式，所以如果你剛開(kāi)始，我還是比較推薦這個(gè)，下面是安裝以及引入的詳細(xì)流程

2.npm安裝

在你的項(xiàng)目路徑下執(zhí)行命令 $ npm install iview --save  ---安裝ui框架文件

安裝成功后，就可以在項(xiàng)目文件下的 node_modules文件下看見(jiàn)iview文件

ok,如果你看見(jiàn)iview文件，你已經(jīng)安裝成功了

3.在你引入的項(xiàng)目的main.js文件進(jìn)行配置

在你的main.js輸入以下代碼，引入iview

import iView from "iview";
import "iview/dist/styles/iview.css"; ---引入其css

當(dāng)然，還有必不可少的一部，在vue的機(jī)制下，我們必須對(duì)其進(jìn)行全局引用
Vue.use(iView);

4.使用ui組件，展示效果

完成以上步驟后，就好辦啦，進(jìn)入iview官網(wǎng)，將你需要的ui組件copy下來(lái)paste入你的頁(yè)面就ok啦

比如我在官網(wǎng)copy下來(lái)倆個(gè)按鈕的code，放置在我的頁(yè)面

如果你的頁(yè)面和上門(mén)的圖片一樣，出現(xiàn)iview的button組件，恭喜你，已經(jīng)成功安裝并引用了

5.建議

以上內(nèi)容只是為了幫助初學(xué)者進(jìn)行簡(jiǎn)單的起步，在實(shí)際開(kāi)發(fā)中，其實(shí)會(huì)有很多的坑與問(wèn)題，畢竟實(shí)戰(zhàn)的環(huán)境更為復(fù)雜，so，我建議大家遇到問(wèn)題還是要多看看api，當(dāng)然，也要多余我交流哦。^_^,如果我的文字對(duì)你有用，記得點(diǎn)心關(guān)注我，給一點(diǎn)點(diǎn)動(dòng)力支撐。

再附上一個(gè)工作之余做的小demo，高仿餓了么app，如果你有興趣，在里面可以和我交流更多的東西，demo實(shí)現(xiàn)了vue-router,vue-resource,還有組件的復(fù)用，vue的動(dòng)畫(huà)實(shí)現(xiàn)，better-scroll實(shí)現(xiàn)聯(lián)動(dòng)效果等等等，實(shí)現(xiàn)一些更接近實(shí)戰(zhàn)的效果，而且，我會(huì)在工作之余進(jìn)行不斷的優(yōu)化，實(shí)現(xiàn)更多的效果，點(diǎn)擊下面的鏈接就好啦

https://github.com/PaiDaXingSWK/elema.git
點(diǎn)我進(jìn)入demo