一、Vue教程
vue.js是一套構建用戶界面的漸進式框架。vue采用自底向上增量開發的設計。vue的核心庫只關心視圖層，非常容易學習，非常容易與其它庫和已有項目整合。vue完全有能力驅動采用單文件組件和vue生態系統支持的庫開發的復雜單頁應用。vue.js的目標是通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件。
這里介紹一些我學習vue時用的教程。
1.入門教程
vue.js的官網教程是很全面的，包括文檔和視頻。
這里還推薦一個我經常用的教程。
2.路由
對於大多數單頁面應用，都推薦使用官方支持的 vue-router 庫。更多細節可以移步 vue-router 文檔。
這塊知識是比較重要的。這里推薦一個視頻講解，它是按着官網的教程來的，很詳細。
3.vue-cli
Vue 提供了一個官方的 CLI，為單頁面應用 (SPA) 快速搭建繁雜的腳手架。它為現代前端工作流提供了 batteries-included 的構建設置。只需要幾分鍾的時間就可以運行起來並帶有熱重載、保存時 lint 校驗，以及生產環境可用的構建版本。更多詳情可查閱 Vue CLI 的文檔。
一開始學習，我對vue-cli項目的目錄結構不是很了解，這篇博客講的很詳細，也推薦給你們。
一個vue-cli的項目結構如下：
二、模板
我們這個項目可以套用后台管理平台的框架。但是從零搭建一套多樣化后台管理並不容易，目前有許多開源、免費、樣式豐富的后台管控面板。這里介紹幾個優秀的后台管理控制面板。
1.vue-Element-Admin
Github源碼：https://github.com/PanJiaChen/vue-element-admin
官網教程：https://panjiachen.github.io/vue-element-admin-site/zh/guide/
在線預覽：https://panjiachen.gitee.io/vue-element-admin/#/login?redirect=%2Fdashboard
介紹：vue-element-admin 是一個后台前端解決方案，它基於 vue 和 element-ui實現。它使用了最新的前端技術棧，內置了 i18 國際化解決方案，動態路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能組件，它可以幫助你快速搭建企業級中后台產品原型。
我們團隊選的就是這個寶藏模板啦！不過vue-element-admin的定位是后台集成方案，集成了很多你可能用不到的功能，會造成不少的代碼冗余，所以不太適合當基礎模板進行二次開發。我們選擇的是其基礎模板vue-admin-template進行的二次開發。官網上的教程豐富詳盡，慶幸一開始選擇了這個寶藏模板，讓前端的開發變得層次清晰，有條理！！
2.iview-admin
GitHub源碼：https://github.com/iview/iview-admin
介紹：iView Admin是一個前端管理后台集成解決方案。它基於Vue.js並使用UI Toolkit iView。
3.vue-manage-system
介紹：基於 Vue + Element UI 的后台管理系統解決方案。
4.vue-framework-wz
介紹：后台管理框架，集成了權限管理，登錄功能，UI組件，七牛上傳等功能。
三、PC端常見的UI框架
工欲善其事，必先利其器。這些UI框架一定是你前端開發的利器！
1、Vuetify
介紹：Vuetifyjs 根據材料設計規格提供 UI 布局。 V 1.0 Alpha 版本提供了超過 80個 reusbale 組件，其中包含一個易於記憶的語義設計，它基於名稱簡單明了 type-as-you 的類型屬性。在GitHub 上有超過 25.4K 的 star。
Vuetify是一款非常精致的UI框架，它提供了很多常用的組件，依靠Material Design的設計優勢，讓你無需編寫一行css代碼就可以得到非常美觀的界面功能。響應式做的不錯，移動PC多段支持，配置靈活，功能全面。我們項目大部分的組件用的就是vuetify的哦，強烈安利喲~
2、ElementUI
介紹：Element，餓了么前端開源的UI框架，一套為開發者，設計師和產品經理准備的基於Vue 2.0的桌面端組件庫。一經面世，就收獲大量程序員的芳心。在github 上更是高達45.2k的star早已說明一切。用於開發PC端的頁面還是綽綽有余的。其更新頻率還是很高的，基本一周到半個月都會發布一個新版本。
3、iview
介紹：iView 是一套基於 Vue.js 的開源 UI 組件庫，主要服務於 PC 界面的中后台產品。使用單文件的 Vue 組件化開發模式 基於 npm + webpack + babel 開發，支持 ES2015 高質量、功能豐富 友好的 API ，自由靈活地使用空間，由TalkingData開發維護。
iView的組件還是比較齊全的，更新也很快，文檔寫得很詳細。有公司團隊維護，比較可靠的Vue UI組件框架。iView生態也做得很好，還有開源了一個iView Admin，做后台非常方便。官網上介紹，iView已經應用在TalkingData、阿里巴巴、百度、騰訊、今日頭條、京東、滴滴出行、美團、新浪、聯想等大型公司的產品中。
4、vueStrap
介紹：基於 Vue.js 的 Bootstrap 組件。該倉庫包含一系列基於 Bootstrap 標記和 CSS 的本地 Vue.js 組件。所以不需要 jQuery 和 Bootstrap 的 JavaScript 文件，唯一需要依賴的是: Vue.js Bootstrap CSS ，VueStrap 不依賴某個非常精確的 Bootstrap 版本。如果喜歡bootstrap的小伙伴又不想換jquery的開發方式是不二的選擇。
5、vue-beauty
官網地址： https://fe-driver.github.io/vue-beauty/#/components/button
介紹：基於 ant design 的漂亮的 vue 組件庫；vue-beauty 是一套基於 vue.js 和 ant-design樣式 的PC端 UI 組件庫，旨在幫助開發者提升產品體驗和開發效率、降低維護成本。
6、at-ui
介紹：AT-UI 是一個模塊化的前端 UI 框架，開發基於Vue.js 的快速和強大的 Web 界面。專門為桌面應用程序構建，AT-UI提供了一套 npm + webpack + babel 前端開發工作流程。全英文的文檔對用戶來說可能是具有有挑戰性的，但它提供了一個體面的干凈整潔的 UI 組件。
四、前端圖標庫
1、 Iconfont-阿里巴巴矢量圖標庫
官網地址：http://iconfont.cn/
介紹：網站多為國內設計師的原創作品，有官方與色彩圖標分類，線條圓滑，風格多樣，包含許多國內應用和具有中國特色的圖標。下載時需要登陸，可以收藏圖標，大多數為免費下載。下載時可以選擇大小，線條顏色，支持SVG,AI,PNG格式。
2、 Icons - Material Design
介紹：包含了Google所有官方圖標。免費下載，提供黑白兩色和不同大小的下載。下載后為安裝包格式，解壓后分為安卓，iOS和web三個文件夾，里面有不同大小的PNG格式圖標。同時每個圖標還提供ICON FONT，主要用於不同系統的HTML，CSS，網站內有詳細的教程。
3、 Ionicons
官網地址：http://ionicons.com/
介紹：高級設計的圖標，用於Web，iOS，Android和桌面應用程序。 支持SVG和Web字體。 完全開源，MIT由Ionic Framework團隊授權和構建。
4、Font Awesome
介紹：一套絕佳的圖標字體庫和 CSS 框架。 Font Awesome為您提供可縮放的矢量圖標,您可以使用CSS所提供的所有特性對它們進行更改,包括:大小、顏色、陰影或者其它任何支持的效果。網站分為中英文版本，對於不同圖標有名稱分類，需要下載插件使用。用於HTML等，選擇圖標后會有ICON CODE，網站可以將ICON CODE發送到你的郵箱。
