使用vue開發專案已經過了一段時間了，對其中的很多東西還是一知半解，於是想要系統學習一下。主要內容是參照官方中文**然後加上一些自己的理解與批註。
什麼是vue.js
vue (讀音 /vjuː/，類似於view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，vue被設計為可以自底向上逐層應用。vue的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，vue也完全能夠為複雜的單頁應用提供驅動。上面的這段話引用至官方教程，其中有一些字眼比較難以理解，比如【漸進式框架】，比如【自底向上逐層應用】，還比如【為單頁應用提供驅動】。
理解【漸進式框架】
事實上，漸進式（progressive）這個概念在多個技術領域裡都有不同的作用與理解，所以有理解成本也是在意料之中的。漸進式的現實例子有很多，比如網頁中的載入方式演化就是乙個經典的漸進式例子。
在很多年以前，網頁中的，比如jpeg在頁面中載入的處理方式，採用的預設處理方式都是從上至下一塊一塊地載入，直到完全載入。如果網路慢了或者是卡了，那麼可能就只會載入一半，這時候對的整體內容沒有乙個大致的認知，對使用者的整體感官體驗就沒有那麼好了。因此在網頁的載入方式引入了漸進式的概念，先載入整張的主體（模糊），再慢慢從模糊載入到清晰，這樣一來使用者體驗相對來說會好一些。這裡我們就可以得出乙個初步的結論：漸進式概念指的是優先展示全域性整體核心，再從核心上逐步拓展出想要的結果。
看完網頁載入的這個例子之後，我們再來看看vue官方教程中的這段話。結合這一段時間的開發經驗，我理解的vue中漸進式框架的理念，指的是先看到核心的部分（最小集），然後再在此基礎上進行開發者自身的diy拓展（新增元件），這個過程隨著開發者的需求逐步變化增長。從另乙個角度來看也可以是，當你使用vue的時候，不需要一上來就使用vue的全家桶，而是可以根據場景適當選用方便的框架（官方提供）。形象地理解，漸進式框架就是搭積木，我們可以根據需求，利用社群良好的生態，從基礎的底層開始，一步一步地，從下至上地，逐層遞進地借助已有的工具和庫搭建我們的專案。
說到這裡，我們很容易可以總結到，所謂的漸進式框架就是框架分層。在vue中，最核心的是檢視層渲染，然後往外是元件機制，再在此基礎上加入路由機制（vuerouter），再加上狀態控制（vuex），然後最外層才是構建工具。這樣做的好處是我們可以根據不同的需求來選擇不同的層級，遵循最小最優最快的開發原則。
理解【為單頁應用提供驅動】
因為vue可以只通過引用單個vue.js檔案即可使用，可以很方便地與現有的類庫或專案進行整合，輕鬆達到資料驅動頁面（雙向繫結）的效果，因此這句話的理解是：vue是乙個輕量級的框架，簡單引入即可使用。
<
script
src=""
>
script
>
<
script
src=""
>
script
>
和其他第三方庫（比如jquery）一樣，只需要通過script標籤引入即可使用，這是vue.js最簡單的一種安裝方式。當然，vue還另外提供了其他安裝方式，簡直簡直了。
vue的安裝
vue不支援ie8及以下版本，因為vue使用了ie8無法模擬的ecmascript 5特性。但它支援所有相容ecmascript 5的瀏覽器。官方教程文件裡明確說明了vue是不支援ie8的，關於這一點在實際專案中也有所體會，和客戶多次溝通之後客戶才同意統一使用谷歌瀏覽器，因此瀏覽器相容性這個因素一定要在選擇前端框架的時候考慮進去，否則後期可能會造成不必要的麻煩。在這裡，如果你的專案需要相容ie8的話，vue就不應該在你的考慮範圍之內了。
在瀏覽器上安裝vue devtools
在使用vue時，我們推薦在你的瀏覽器上安裝vue devtools。它允許你在乙個更友好的介面中審查和除錯vue應用。官方推薦了這一款瀏覽器外掛程式，同事有給我安裝，但是在開發過程中個人用得不多，也不知道用處在哪，大概是我太笨了不會用吧（手動滑稽）。
使用標籤引入
使用script標籤引入的話，vue就會被註冊為乙個全域性變數，然後就可以通過這個全域性變數來使用vue中提供的功能。
包含完整的警告和除錯模式；而
在開發環境下不要使用壓縮版本，不然就會失去了所有常見錯誤相關的警告。
對於製作原型或學習，開發者可以這樣使用最新版本（cdn）：
<script
src=""
>
script
>
<script
src="@2.6.11"
>
script
>
此外，開發者還可以在cdn.jsdelivr.net/npm/vue瀏覽npm包的源**。
請確認了解不同構建版本並在你發布的站點中使用生產環境版本，即把vue.js換成vue.min.js。因為這是乙個更小的構建，可以帶來比開發環境下更快的速度體驗。
使用npm安裝
在用vue構建大型應用時推薦使用npm安裝，因為npm能很好地和諸如webpack或browserify模組打包器配合使用。同時vue也提供配套工具來開發單檔案元件。
#最新穩定版
$ npm install vue
對於npm的內容又是乙個長時間的學習，如果是新手的話，這裡只要知道就好了（俺也一樣）。
使用命令列工具（cli）安裝
vue提供了乙個官方的cli，為單頁面應用 (spa) 快速搭建繁雜的腳手架。它為現代前端工作流提供了batteries-included的構建設定，只需要幾分鐘的時間就可以執行起來並帶有熱過載、儲存時lint校驗，以及生產環境可用的構建版本。
cli工具假定使用者對node.js和相關構建工具有一定程度的了解，如果是新手的話，這裡只要知道就好了（別問，問就是我不會，我太難了）。
不同構建版本的區別
官方文件這裡說了一大堆專業術語，雖然有解釋，但是沒有一定的基礎與了解還是看得一頭霧水，因此這裡只大概記一下構建版本可以分為三個版本：完整版、包含編譯器的版本和執行時的版本。什麼umd、commonjs和es module暫時放到一邊去好了，什麼csp環境、bower和amd模組載入器也丟到廁所裡去，以後再慢慢通過漸進式的學習來弄懂（等等，我真的是做後端的嗎？？？）。
"我還是很喜歡你，像風走了八百里，不問歸期。"
Vue2 X的入門學習
由於前幾天跟那位技術聊了一會，深感自己目前所學知識的淺薄以及實戰經驗的缺失。今天初步了解了一下前端的vue.js 時間不長，只是看了一些基本內容，肯定也是做不了什麼大專案的，這裡回憶一下所學知識。1.引入vue 此處利用script直接引用，另外呢，vue官網是給了很多教程的，對新手是很友好的 官網...
Vue2 x 原始碼閱讀筆記
定義 vue 的 init 方法 初始化 vm.options 初始化生命週期 初始化 events 初始化 render 呼叫鉤子函式 beforecreate 初始化 injections 初始化 state 初始化 methods 初始化 data 初始化 computed 初始化 watch...
Vue2 x 專案踩坑筆記
給檔案設定路徑別名，方便在元件內引入檔案，不必寫太長的路徑名稱。全域性引入scss檔案，不必在單個元件內再次引入，可以直接使用。例如 全域性變數 px2rem函式等檔案 const path require path function resolve dir module.exports chain...