概述
在最開始聽說vuejs這個詞是在2016年，當時天真的認為自己是個后端開發工程師不需要學習太多的前端知識，不過緊接着在2017年在公司就用到了vuejs。對於初學者（尤其是干后端的初學者）來說，剛接觸時，有好多思路都很難理解。
本來寫這一系列博客，只是為了記錄自己在這一段時間學習vuejs的成果。如果有何紕漏請大家多多理解，不喜勿噴…
再說，在目前互聯網的調整發展情況下，javascript更是在快速的更新迭代，如今對前端工程師來說，需要會的不只有css+div，js+jq了。近年來，javascript各界大神也發布了很多優秀的框架，如安哥拉（angularjs），Reactjs等。而vuejs更是由國人大神【尤雨溪(Evan You)】主導開發並得到了業界認可的優秀框架。
因此，綜合上述種種，本人決定以該系列博客來記錄自己的學習過程及問題，在寫作時由於本人方案功底薄弱，寫的不好希望大家多多見諒。在學習時，參考了另一篇特別好的博客，以下有些內容也借鑒而來，忠心感謝FungLeo，是你們無私的奉獻，才讓我們有了學習的參考，以下是地址：
http://blog.csdn.net/fungleo/article/details/77575077
基本理念
本文將通過vue-cli+axois+amaze ui+jquery來搭建一個小型的后台管理系統，數據來源使用cnode.js 的公開 api接口。由於該項目屬於小型項目，所以不涉及vuex等知識。
前后端分離開發模式
在N年前，我們開發web項目的流程是：
1、設計師設計頁面
2、美工將設計稿通過css+div切片成html的頁面
3、后端工程師拿切好的html頁面
在這種開發模式上有明顯的缺點，就是頁面出現哪怕只是特別小的問題或是修改很小的功能，也需要前后端工程互相協調開發。對后端工程師來說，並不能更專注的去實現業務邏輯。
所以近年出現在前后端分離開發模式，如下：
1、設計師設計頁面
2、前端、后端、測試等其它開發人員約定接口規范（形成接口文檔）
3、前端工程師按接口文檔來開發前端（前期可模擬接口返回的數據模型）來進行前端的開發
4、后端工程師按接口文檔開開發相應接口
與幾年前相比，對前端工程師的要求無疑提高了很多，如如何調用接口等。對后端工程師來說卻可以更專注的實現業務邏輯。
時代在發展，困難如彈簧，你強它就弱，你弱它就強。所以為了不被時代所淘汰，努力吧！
單頁應用程序（SPA）
單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用，是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。
要想更好的學習SPA，需要大家先了解一下錨點鏈接：
HTML中的鏈接，正確的說法應該稱作"錨點"，它命名錨點鏈接（也叫書簽鏈接）常常用於那些內容龐大繁瑣的網頁，通過點擊命名錨點，不僅讓我們能指向文檔，還能指向頁面里的特定段落，更能當作"精准鏈接"的便利工具，讓鏈接對象接近焦點。便於瀏覽者查看網頁內容。類似於我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時，標記錨點是最佳的方法。
更多關於錨點鏈接的解釋請參見：
https://baike.baidu.com/item/%E9%94%9A%E7%82%B9%E9%93%BE%E6%8E%A5/7472012?fr=aladdin
為什么要用錨點鏈接，原因是錨點鏈接並不會使頁面進行跳轉或刷新。以我們的 vue 項目為例，它的本地 url 結構一般為以下格式：
http://localhost:8080/#/Inbox
可以明顯的看到我們所謂的路由地址是在 # 號后面的，也就是利用了錨點的特性。
RESTful 風格接口
URI表示資源的兩種方式：資源集合、單個資源。如下：
資源集合：
/zoos //所有動物園
/zoos/1/animals //id為1的動物園中的所有動物
單個資源：
/zoos/1 //id為1的動物園
/zoos/1;2;3 //id為1，2，3的動物園
更多關於RESTful 風格接口的解釋請參見：
http://blog.csdn.net/yue7603835/article/details/52536497
VUE是什么？
目前業界主流的前端三大框架：angular、react、vue，目前angular正處於新舊交替所以不選擇，剩下的兩個都非常優秀，但是vue的學習成本要比react低好多。同樣都優秀的框架，我們選擇vue，只因為兩個字“簡單”。
vuejs是一個前端框架，並不只是官網下載下來的一個vue.js文件。官方的解釋：
Vue.js (讀音 /vjuː/，類似於 view) 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。
如果你是有經驗的前端開發者，想知道 Vue.js 與其它庫/框架的區別，查看對比其它框架。
更多關於vuejs的解釋請參見：
https://cn.vuejs.org/v2/guide/
在上面提到了Vue的核心庫，我們來看一下都有哪些核心庫，如下：
1、vue.js 核心，不解釋。
2、VueRouter2 實現路由組織工具。
3、webpack 項目打包以及編譯工具。
4、nodejs 前端開發環境。
5、npm 前端包管理器。
6、axios ajax 接口請求工具。
7、sass-loader 和 node-sass css 預處理。
8、element 基於 vue 的后台組件庫。
9、iview 基於 vue 的另一套后台組件庫。
10、vue-cli vue 項目腳手架。一鍵安裝 vue 全家桶的工具。
命令行的重要性
在學習vue時，我們會經常用到一些命令，如npm install、npm run dev等，這是vue-cli對我們提供的一些命令，現在的前端，不會點命令出去找工作都不好意思說自己是前端了。希望在初學vue或其它前端框架時，不要抵觸命令行，因為它
1、更好
2、更快
3、更強
4、更裝逼
第一篇文章，基本沒有代碼，接下來我們就要開始慢慢的揭露vue神秘的面紗了。