這里是《Vue2.0 從零開始學系列筆記》的第一篇博文,博主小呆是一名互聯網非著名的半吊子前端,喜歡學習新技術,受到一些前輩的影響,多少也寫過一些筆記和學習心得,但是很遺憾沒有一個是成系列的╮(╯▽╰)╭,這次小呆下定決心了,不僅要寫一個成品系列文章出來,而且還要把之前沒寫完的坑補上,最近一直在學Vue2.0相關的東西,所以就拿它開刀了。

小呆學習Vue2.0的時候,大大小小的教程也看了不少,官網API來來回回看了好多遍,可是真正動手寫起來,還是一頭霧水的?;蛟S這就是理想與現實的差距吧,所以我決定自己寫一點東西出來,學習并加深對Vue全家桶以及Es6的理解。

由于小呆自己也正處于學習階段,此系列筆記只作為參考,不具有指導意義。所以知識點學習比較凌亂,屬于用到啥,學啥的那種,所以喜歡教科書般學習的同學,還是推薦跟著官網教程學習

敵軍還有五秒鐘到達戰場,兄弟們上吧。


小呆在看網上一些教程的時候,要么比較淺,要么比較深。讓小呆這種慢熱型的人看起來很是吃力,而且各種教程所使用的項目結構差異很大。所以本系列筆記將使用(官方推薦的)Vue-cli來進行開發。關于node.js環境的安裝這里不在贅述,童鞋們自行搜索即可。

安裝Vue-cli

打開終端:

npm install -g vue-cli

創建vue-cli項目

用終端進入項目需要存放的地方(比如小呆存放到F:\MyCoding)創建項目:

vue init <template-name> <project-name>

這里我們使用webpack來進行開發,創建項目時需要輸入一些項目名稱,描述,作者之類的,嫌麻煩的可以一路回車,下面是截圖:

創建好項目之后,我們來大概了解下項目的結構:

安裝依賴

接著我們安裝依賴包:

#進入到我們剛才創建的app目錄下
cd app
#執行安裝依賴的命令
npm install
# 安裝完成之后運行
npm run dev

安裝過程中出現錯誤的話,有可能是github和npm被墻了,找梯子解決吧(梯子一般都收費,但是也不貴,為了學習小呆覺得這點支出是值得的)。

如果出現如下情況:

PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip
Saving to C:\Users\ADMINI~1\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...
  [----------------------------------------] 1%

卡主不動了,ctrl+c+c 退出安裝,在執行npm run dev,這個東西是用來做單元測試神馬的,我們學習寫vue,暫時用不到。

啟動成功

啟動成功后,看到了我們的歡迎頁面,頁面上的鏈接都是與vue相關的資料和插件。


結語

這篇筆記主要記述了一下如何安裝Vue-cli 來創建項目,以及項目的結構,并沒有實際開發代碼??赡芎芏嗤竭@里還是一頭霧水,比如webpack那些東西怎么配,如何配,小呆剛學習的時候也是如此,這里建議大家記住重點,我們是來學習Vue2.0的,所以與Vue2.0無關的東西,我們通通先屏蔽掉,反正項目能啟動嘛。一步一步來,不然你會陷入這樣的循環(本來準備學習Vue2.0——過程中發現用到webpack——跑去學webpack——學webpack發現用到node.js——跑去學node.js——最后一個都沒學會,而你的本意其實只是學習Vue2.0)