[TOC] ## 前言 通過本篇你將了解到vue的基本知識以及它與其他框架的主要區別，順便講解一些vue必備常識。 ## vue與其他框架區別 ## vue學習三步曲 ### vue入門 1. 扎實的js css html基礎 2. 通讀官方教程 (guide) 的基礎篇。不要用任何構建工具，就只用最簡單的 `<script>`，把教程里的例子模仿一遍，理解用法。不推薦上來就直接用 vue-cli 構建項目，尤其是如果沒有 Node/Webpack 基礎。 3. 照著官網上的示例，自己想一些類似的例子，模仿著實現來練手，加深理解 4. 閱讀官方教程進階篇的前半部分，到『自定義指令 (Custom Directive) 』為止。著重理解 Vue 的響應式機制和組件生命周期。『渲染函數（Render Function)』如果理解吃力可以先跳過。 5. 閱讀教程里關于路由和狀態管理的章節，然后根據需要學習 vue-router 和 vuex。同樣的，先不要管構建工具，以跟著文檔里的例子理解用法為主。 6. 基于 Node 的前端工程化 ### node前端工程化 1. es6語法，js模塊規范 8. bash基本命令行的使用，建議使用mac 9. 學習 Node.js 基礎。建議使用 nvm 這樣的工具來管理機器上的 Node 版本，并且將 npm 的 registry 注冊表配置為淘寶的鏡像源 1. 了解如何使用 / 配置 Babel 來將 ES2015 編譯到 ES5 用于瀏覽器環境 1. 學習 Webpack ### vue進階學習 1. 通過 vue-cli 來搭建基于 Webpack ，并且支持單文件組件的項目了。閱讀官方教程進階篇剩余的內容以及 vue-loader 的文檔，了解一些進階配置。 2. 在 Webpack 模板基礎上整合 vue-router 和 vuex 3. 深入理解 Virtual DOM 和『渲染函數 (Render Functions)』這一章節（可選擇性使用 JSX)，理解模板和渲染函數之間的對應關系，了解其使用方法和適用場景 4. 根據需求，了解服務端渲染的使用（需要配合 Node 服務器開發的知識）。其實更重要的是理解它所解決的問題并搞清楚你是否需要它 5. 閱讀開源的 Vue 應用、組件、插件源碼，自己嘗試編寫開源的 Vue 組件、插件 6. 閱讀 Vue 的源碼，理解內部實現細節 7. 參與 Vue GitHub issue 的定位 -> 貢獻 PR ### 參考文檔 * 本學習步驟參考：[知乎尤大大文章](https://zhuanlan.zhihu.com/p/23134551)