1、VueJs 填坑日記之基礎概念知識解釋

概述
在最開始據說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項目的流程是：
一、設計師設計頁面
二、美工將設計稿經過css+div切片成html的頁面
三、後端工程師拿切好的html頁面
在這種開發模式上有明顯的缺點，就是頁面出現哪怕只是特別小的問題或是修改很小的功能，也須要先後端工程互相協調開發。對後端工程師來講，並不能更專一的去實現業務邏輯。
因此近年出如今先後端分離開發模式，以下：
一、設計師設計頁面
二、前端、後端、測試等其它開發人員約定接口規範（造成接口文檔）
三、前端工程師按接口文檔來開發前端（前期可模擬接口返回的數據模型）來進行前端的開發
四、後端工程師按接口文檔開開發相應接口
與幾年前相比，對前端工程師的要求無疑提升了不少，如如何調用接口等。對後端工程師來講卻能夠更專一的實現業務邏輯。

時代在發展，困難如彈簧，你強它就弱，你弱它就強。因此爲了避免被時代所淘汰，努力吧！

單頁應用程序（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的核心庫，咱們來看一下都有哪些核心庫，以下：
一、vue.js 核心，不解釋。
二、VueRouter2 實現路由組織工具。
三、webpack 項目打包以及編譯工具。
四、nodejs 前端開發環境。
五、npm 前端包管理器。
六、axios ajax 接口請求工具。
七、sass-loader 和 node-sass css 預處理。
八、element 基於 vue 的後臺組件庫。
九、iview 基於 vue 的另外一套後臺組件庫。
十、vue-cli vue 項目腳手架。一鍵安裝 vue 全家桶的工具。

命令行的重要性
在學習vue時，咱們會常常用到一些命令，如npm install、npm run dev等，這是vue-cli對咱們提供的一些命令，如今的前端，不會點命令出去找工做都很差意思說本身是前端了。但願在初學vue或其它前端框架時，不要抵觸命令行，由於它
一、更好
二、更快
三、更強
四、更裝逼

第一篇文章，基本沒有代碼，接下來咱們就要開始慢慢的揭露vue神祕的面紗了。