Vue.js框架學習與工程搭建

1、如何學習VUE

第一步：學好ES6，ECMAScript順便把NodeJS也學會了。

第二步：如何學ES6，看阮一峯教授的教程（http://es6.ruanyifeng.com/），先中文後英文，上網看看思路，實戰。

　　難點：   一、（五星）函數的拓展，箭頭函數，語法特別多

　　　　　　　　setInterval(()=>)

　　　　　　二、（五星）Generator生成器函數，花個10小時或者2天看懂

　　　　　　三、（一星）對象，類，面向對象

　　　　　　四、（一星）promise,核心，微信開發，nodejs

　　　　　　五、（一星）模塊化

80%經常使用核心，搞定！

Vue.js手冊學習（https://cn.vuejs.org/v2/guide/）：2周左右看明白。

 

2、工程項目的搭建（利用vue-cli腳手架搭建）

一、無腦官網下載並安裝最新的node

二、在任意文件夾下，shift+鼠標右擊，打開命令窗口，輸入指令：npm install -g vue-cli

三、在但願創建工程文件的目錄下，shift+鼠標右擊，打開命令窗口，輸入指令：vue init webpack 工程名

恭喜，這時候你已經完成項目的框架搭建！

四、下載官方最新的webstrom，網上能夠找到方法自行破解

五、打開webstrom，open工程所在的那個目錄，就能夠編輯啦！

六、在工程目錄下，shift+鼠標右擊，打開命令窗口，輸入指令：npm run dev    命令窗口最終會給出一個網站，你運行一下就能夠看到它默認的單頁應用效果

 

3、項目目錄的一些解釋，不完整

src目錄下的文件及文件夾解釋

　　一、asset文件夾下存放靜態資源：圖片、css、js

　　二、App.vue包括template、script、style三個部分，其它vue文件能夠複製過來修改，export導出該模塊，需有name

　　三、main.js導入各.vue文件的模塊，實例化vue

 

適合場景：單頁應用，數據驅動性模板，對DOM頻繁操做，（彈幕系統，微信應用，在線即時聊天，上一頁下一頁，畫圖遊戲）

不適合：OA,企業網站（純html開發更快）

初次打開單頁應用界面會比較慢，可是一旦打開了，操做就是搭飛機同樣流暢。（打開的速度取決於網速了）