一、如何學習VUE
第一步:學好ES6,ECMAScript順便把NodeJS也學會了。
第二步:如何學ES6,看阮一峰教授的教程(http://es6.ruanyifeng.com/),先中文后英文,上網看看思路,實戰。
難點: 1、(五星)函數的拓展,箭頭函數,語法特別多
setInterval(()=>)
2、(五星)Generator生成器函數,花個10小時或者2天看懂
3、(一星)對象,類,面向對象
4、(一星)promise,核心,微信開發,nodejs
5、(一星)模塊化
80%常用核心,搞定!
Vue.js手冊學習(https://cn.vuejs.org/v2/guide/):2周左右看明白。
二、工程項目的搭建(利用vue-cli腳手架搭建)
1、無腦官網下載並安裝最新的node
2、在任意文件夾下,shift+鼠標右擊,打開命令窗口,輸入指令:npm install -g vue-cli
3、在希望建立工程文件的目錄下,shift+鼠標右擊,打開命令窗口,輸入指令:vue init webpack 工程名
恭喜,這時候你已經完成項目的框架搭建!
4、下載官方最新的webstrom,網上可以找到方法自行破解
5、打開webstrom,open工程所在的那個目錄,就可以編輯啦!
6、在工程目錄下,shift+鼠標右擊,打開命令窗口,輸入指令:npm run dev 命令窗口最終會給出一個網站,你運行一下就可以看到它默認的單頁應用效果
三、項目目錄的一些解釋,不完整
src目錄下的文件及文件夾解釋
1、asset文件夾下存放靜態資源:圖片、css、js
2、App.vue包括template、script、style三個部分,其它vue文件可以復制過來修改,export導出該模塊,需有name
3、main.js導入各.vue文件的模塊,實例化vue
適合場景:單頁應用,數據驅動性模板,對DOM頻繁操作,(彈幕系統,微信應用,在線即時聊天,上一頁下一頁,畫圖游戲)
不適合:OA,企業網站(純html開發更快)
初次打開單頁應用界面會比較慢,但是一旦打開了,操作就是搭飛機一樣流暢。(打開的速度取決於網速了)