最近的前端VUE以及React可以說是大火了，基本上每個群的討論都離不這兩個話題，本身自己是做後臺出身的，對前端的追求大概就在能看的水平線了，這次也跟一次風一起看看VUE這個東西到底是什麼吧。

構建

Vue官網
Vue中文社群
工欲善其事必先利其器，這兩個網站就是我們的學習手冊了。
關於Vue的構建方式的話分為兩種，一種是直接在頁面上通過js的引用比如下面這種

<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
 

上面兩種引用任選一個即可
以及使用vue-cli腳手架的方式構建，關於這個的教程比較多，在這裡我就不詳述了，簡單的羅列一下步驟。

1. 由於vue是依賴於node.js所以先去把node.js安裝好
2. 在nodejs的官網上下載好安裝包一路next即可，注意現在npm是直接包含在內的，如果看到之前的教程還需要去裝npm的話，省略這步即可
3. 如果沒有梯子的話可能會發現下載的時候特別慢，建議大家先換到國內映象https://npm.taobao.org
   使用如下命令npm install -g cnpm --registry=https://registry.npm.taobao.org
4. 接下來安裝vue-cli腳手架
   cnpm install -g vue-cli
5. 安裝完畢後可以開始構建我們的專案了比如我們現在進入到F盤
   vue init webpack 專案名
   接下來的話會出現一些元件的安裝
   image.png
   不出意外的話，我們的專案已經構建完畢了。
6. 執行npm vue dev執行我們的專案,訪問http://localhost:8080則會出現以下介面
   image.png

能看到如上介面就代表我們的vue專案已經構建完畢啦