看具體內容之前，，想聽聽我的嘮叨。沒興趣的朋友可以直接掠過。
其實早在去年就已經接觸到Vue，但無奈，在一個二線城市。Vue這個東西大多人都是隻聞其聲，沒有幾個公司會在專案中具體用。而我也是出於興趣就把文件大概的掃射了一遍，也就放下了。

我想大家應該知道今年對於Vue有件大事。520那天，咱們的尤大大在全球首屆 VueConf 上，介紹了 Vue.js 2017 的現狀，並對 Vue 的未來做了展望。當然了。。雖然很想親臨現場。。但是現實的種種（你們懂的）讓我只能在會後的視訊中去感受了。

別的不多說我們只來看看尤大公佈的資料：

Vue 的現狀

• GitHub 超過 53,986 個 Star

  數，已經是歷史的 Top 10

• 每月 55 萬 + 次 NPM 下載（不算阿里爸爸 CNPM 映象）

• Chrome DevTool 外掛 17.4 萬日活

• 國內使用者：

• 當然還有活躍的社群，vue全家桶，與阿里爸爸合作的Weex。。。。。

• 看了這些，，我只能說，身為一個前端。。我得把它搞下來。於是我覺定先將一個公司的小專案轉到vue上來。

• 好了，不閒扯那我們正式開始。

• -------------------------------------------------------------------------華麗的分割線---------------------------------------------------------------------------、

• 還是那句老話。。文件文件文件（https://vuefe.cn/v2/guide/）
  我知道很多人同我一樣，不太喜歡看這玩意。但是對於Vue來說我強烈推薦在做專案之前大家必須去過一遍文件，或者說最起碼也要了解到Vue的基礎用法，基礎API，生命週期這些東西。我說了。。是瞭解，所以不用急。

• 在我看來，Vue的用法無非就是倆種 

• 1.CDN(就如咱們之前引用jq一樣的在官方穩定中下載直接引用到你的html <script src="*****">)
  好處呢，就是方便-可以快速的使用。這邊也推薦大家在初期看文件的時候就用CDN的方式去練DEMO。。莫不要一上來就NPM...Cli...WebPack...會把自己整懵逼的，原因很簡單，全是新知識就一塊一塊去學，沒有誰能一口吃成一個胖子。。。我就是吃過這個虧的人。
  2.用官方提供一個

  官方的命令列介面工具--也就是我們所說的Vue-Cli(腳手架工具：快速建立一個Vue專案的工具)，用於快速搭建大型單頁面應用程式
  當然我們實際中的專案當然要用第二種用法

• 一：開發環境（vue賴以開發和生存的環境）
  1.安裝node.js（win下前往node.js官網安裝即可） 安裝個穩定版就行  這個沒什麼可講的一路下一步

• 
  

• 檢查這步是否完成 可以開啟命令列輸入  node -v   -----這步的意思檢視node的版本號，如果回車後你看到版本號那就OK了。go-下一步
  
  這步完成的同時，node中自帶的  npm 一個nodejs的包管理器，用於node外掛管理（包括安裝、解除安裝、管理依賴等）的東西也安裝到你電腦裡了。以後我們要安裝其他外掛模組（比如 vue-cli  sass了什麼的）都靠這個玩意。同樣可以 npm -v 看一下它的版本號 
   友情提示，這塊可以安裝一個cnpm(這是淘寶npm映象  就是中國版的npm  好處就是下載東西快推薦安裝)
  

• 淘寶npm安裝
  

• 2.安裝Vue腳手架-Vue-cli  ------為什麼叫腳手架呢，其實就是和蓋樓房一樣，這個就是個基礎設施，是萬丈高樓平地起的重要工具。
  

  2	npm install -g vue-cli   或者cnpm install -g vue-cli

  安裝完成後，可以使用 vue -V （注意 V 大寫）檢視是否安裝成功。

• 
  3.安裝好咱們的腳手架之後咱們就可以用它來搭咱們的專案了。同樣一條命令

• 
  先 cd到你想要存放vue專案的目錄
  

  3

  cd E:\VUE

  
  
  用命令來建立一個webpack專案。vue-cli就是基於webpack的。

• 4	vue init webpack my-project-name(專案名字)

• 
  

• 好了。見證奇蹟的時刻就要到了

• 你會看到剛才的專案檔案已經自動建立好了

• 5	cd one-vue-project   cd進剛才自動建立好的專案目錄

  
  
  
  

  6	npm install      這一步的意思呢官方解釋是 安裝專案所需依賴。換一個通俗的話就是剛才使用vue-cli建立的這個專案只是個方案 描述了這個專案需要什麼外掛，還沒有實際的內容。 這就是來安裝這個方案所需的外掛

  
  

  7	npm run dev 最後  看看終極效果吧 哈哈~~~~~~~~~大V