vue配合iview/element等ui實現界面效果起步

iview與element都是與vue配合使用的ui框架，用法與配置基本一致，在此，我以iview爲例，教你如何起步。
*首先，你須要有必定的vue基礎，若是你仍是個小白，能夠去我以前介紹如何搭建一個vue項目先看看，點擊下面的連接就OK了
http://www.jianshu.com/p/866999e513ef
vue.js使用vue-cli搭建...

1.安裝

安裝：方式有倆種

[1]:CDN 引入

<!-- 引入css樣式 -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- 引入組件庫 -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>

[2]:npm安裝

這種方式是通常實際開發所用的方式，因此若是你剛開始，我仍是比較推薦這個，下面是安裝以及引入的詳細流程

2.npm安裝

在你的項目路徑下執行命令 $ npm install iview --save ---安裝ui框架文件

安裝成功後，就能夠在項目文件下的 node_modules文件下看見iview文件

ok,若是你看見iview文件，你已經安裝成功了

3.在你引入的項目的main.js文件進行配置

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

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

固然，還有必不可少的一部，在vue的機制下，咱們必須對其進行全局引用
Vue.use(iView);

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

完成以上步驟後，就好辦啦，進入iview官網，將你須要的ui組件copy下來paste入你的頁面就ok啦

<Button type="success" long>確認提交</Button>
    <br><br>
    <Button type="error" long>確認刪除</Button>

好比我在官網copy下來倆個按鈕的code，放置在個人頁面

若是你的頁面和上門的圖片同樣，出現iview的button組件，恭喜你，已經成功安裝並引用了

5.建議

以上內容只是爲了幫助初學者進行簡單的起步，在實際開發中，其實會有不少的坑與問題，畢竟實戰的環境更爲複雜，so，我建議你們遇到問題仍是要多看看api，固然，也要多餘我交流哦。^_^,若是個人文字對你有用，記得點心關注我，給一點點動力支撐。

再附上一個工做之餘作的小demo，高仿餓了麼app，若是你有興趣，在裏面能夠和我交流更多的東西，demo實現了vue-router,vue-resource,還有組件的複用，vue的動畫實現，better-scroll實現聯動效果等等等，實現一些更接近實戰的效果，並且，我會在工做之餘進行不斷的優化，實現更多的效果，點擊下面的連接就好啦

https://github.com/PaiDaXingSWK/elema.git
點我進入demo