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


一、如何學習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開發更快)

初次打開單頁應用界面會比較慢,但是一旦打開了,操作就是搭飛機一樣流暢。(打開的速度取決於網速了)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM