Vue入門指南(快速上手vue)

時間 2019-11-16

標籤 vue 入門指南快速上手简体版

原文原文鏈接

Vue.js 2.0 快速上手vue

自從Vue2.0發佈後，Vue就成了前端領域的熱門話題，github排名已是前幾名了，那麼對於新手來講，如何高效快速的學習Vue2.0呢。html

Vue-router

和以前同樣，推薦直接用html+js過一遍文檔對路由導航鉤子得好好看一看。看完文檔就能夠上手vue-cli，通常新手在這幾天都會死活跑不出來。偷笑最直接的方法就是去github上搜一些關於vue-router2.0的demo，看如何構件路由，如何構件項目目錄。我這裏有一個傳送門若是能跑出來，就能夠作一些小項目了，好比寫一個知乎日報啊偷笑，這些demo在github上不少。能夠結合一些組件庫寫demo，這樣能夠更加了解組件化。好比餓了麼團隊的Element、mint-ui.前端

Vuex

什麼是vuex？Vuex 是一個專門爲 Vue.js 應用設計的狀態管理模型 + 庫。它爲應用內的全部組件提供集中式存儲服務，其中的規則確保狀態只能按預期方式變動。說白了就是控制應用的一些全局狀態。狀態改變了，對應的視圖也會改變。在學習Vuex時，會有一些ES6特性，當遇到這些時，最好不要一帶而過，去好好看一看這些es6特性。好比在學習Action時能夠看看ES6新增的Promise和參數解構。實踐的方法同樣是先看別人別人寫的代碼，好比官方的購物車實例的應用結構把以前寫的demo優化一下，有些地方能夠用用vuexvuex主要是用來對不一樣組件間進行通訊，它構建了一個Vue實例的全局數據與方法，這些數據與方法能夠在該Vue實例的全部組件中get與set.vue

Vue基礎

對於沒有接觸過es6和webpack的童鞋來講，不建議直接用官方的腳手架vue-cli構件項目。先按文檔順序最少學習完組件那一章。直接在html文件中引入vue.js開始學習,瞭解vue的基礎指令，和整個vue實例的基礎架構。vue的生命週期很重要，瞭解這點之後能夠免去不少問題。學完這些能夠作一些練手的小項目，好比萬年不變的todolist。。。如今能夠開始學習使用vue-cli構件項目了，學習組件化以前，推薦先看一下es6關於模塊的介紹。阮一峯《ECMAScript6》 Module光會這些仍是不夠的，還得會一些npm基礎，知道如何用git-bush來安裝模塊依賴，會一些經常使用的命令。這方面的知識能夠參閱npm入門文檔看完這些就能夠試着將以前的寫的demo用搭建的vue-cli來實現。webpack