曾幾何時聽過這樣一句話：2016年是JavaScript最火的一年；因為湧現出了很多優秀的前端框架，比如：vue，ng，react 這三個以react為首的被稱作前端三大框架。聽著就很吊，有木有？原先一直只玩過jquery，此框架在原生JavaScript基礎上做了大量改進比如對一些瀏覽器相容性上，對dom節點的讀取和渲染上都做了很多便利的輸出。

這段時間有幸接手之前交由外包團隊做的前端專案，很顯然是很牛逼的那種！用的就是Vue. 自己在一個人的情況下獨自接手該專案，剛一開始的時候真的是無從下手，後面加了幾次班也算是小小的入門的了，此外在百度或者其它交流群中也看了，市面上像這種從0開始學Vue的教程真的是少之又少，特此想簡短的記錄一下，我兩週前開始學vue的感受，順便也給想從jq轉Vue的同學一點點參考.

第一步：首先去nodejs官網（https://nodejs.org/en/）下載最新的node包（個人而言喜歡用最新的，就像女朋友，我喜歡是處女一樣）

下面截圖是最新的node安裝包，不要下錯了哦（其實也不會錯啦，我相信現在沒有誰的電腦會是32位的！！）

下載完成以後，眼睛閉著一路next安裝即可。
我嘗試過，你預設安裝完成以後，系統環境變數會自動把node的安裝路徑加到path裡。如果沒有請自行加上，記得路徑不要錯，是指到有node.exe的目錄；（可參考下面兩個截圖）

第三步：需要進dos命令列檢視所安裝的node可以正常使用；其中npm是node下載安裝完成之後自帶的包管理器，可以使用npm進行安裝一些常用modules；（後面會經常使用npm命令

隨即可以執行：

node -v

npm -v

第四步：以上node安裝完畢之後就可以開始進入新建vue工程啦；進入某個磁碟執行命令：

npm install --global vue-cli

（以上命令為全域性安裝vue腳手架--把它理解成讓你不需要為編譯或其他瑣碎的事情而浪費時間，幫助你快速開始一個vue專案，其實其本質就是給你一套檔案結構，包含基礎的依賴庫）

再執行：

vue init webpack my-project

（以上命令是生成一個基於webpack模板的新vue工程，工程的名字是：my-project；當然，名字取啥樣，隨你意）

再執行：

cd my-project

（以上命令是在dos命令列中指定進入my-project這個工程資料夾裡面）

正常情況下是以下截圖的樣紙；紅框裡的dist和node_modules資料夾先不要管，我後面會講解到；

再執行：

npm install

（此命令是為本工程下載安裝所有的依賴包檔案，也就是上面截圖提到的node_modules）

下載安裝時可能由於被牆和windows機器本身沒mac“速度”的原因會很慢，建議開啟vpn，進行翻牆操作，至於如何進行翻牆，，我想你懂得。
哦，這裡我說一下，上次我女朋友帶有挑逗的語氣跟我說，如果她出牆了，我會怎麼辦？我想了一下，回答說：

你出牆一尺，我挪牆一丈。

然後，，，就沒有然後了，咱們繼續。

再執行：

npm run dev

（此命令是開啟正常開發模式，會正常監聽8080埠，預設也會在瀏覽器開啟一個視窗，地址就是：http://localhost:8080/，當然，這裡的埠你可以在config檔案下的index.js裡進行更改）

下面截圖是我修改完之後重新執行npm run dev後瀏覽器上的介面

很顯然，可以正常監聽我修改後的埠。

咱們再看這裡：紅框裡的 “my-project” 是工程的根目錄下的index.html裡面的title標識，現在咱們嘗試著改下這個標識，比如加個1234什麼的，再儲存（ctrl+s）操作，再看下這裡的標識.

沒錯！！  已經有熱更新的包在裡面啦，哇咔咔，是不是很吊很吊的樣紙！！ 

在此之後就可以進行任意修改再儲存即可檢視效果。很炫很炫有木有？想想以前玩jq，還要清空快取並硬性重新載入才能看到效果。
重新整理瀏覽器的日子將會一去不復返；

當然，就新建一個工程而言其中可以遇到的問題還有很多，

1、比如下載很慢的常態如何解決？

建議使用淘寶映象：

npm install -g cnpm --registry=https://registry.npm.taobao.org

隨後所有用npm命令安裝的包檔案全部用cnpm代替可能會快一點

2、又如：執行npm run dev 命令下面報