vue系列踩坑大作戰由此就要開始了，准備好了嗎，和我一起踩坑，學會vue吧。同時，也歡迎大家把自己遇到的坑發出來，讓更多的人學會vue，因為我深知前端學習新框架不容易，尤其是我這種半路出家的女前端。不廢話了，開始吧：
摘要：本篇文章介紹了vue環境配置，項目的搭建等。（如果有人node安裝配置環境變量配不好，過幾天我會再寫一篇node安裝和less在項目中的應用給大家看。）
我們接下來一個一個搭建安裝：
一、基本環境安裝：
- 安裝node：從node.js官網下載並安裝node，安裝過程很簡單，一路“下一步”就可以了（傻瓜式安裝）。測試：win+R(打開命令行)-------輸入cmd-------敲入node -v。如果出現相應版本號，即安裝成功，我的如下圖：
2. 測試npm版本，不能低於3：命令行-------npm -v:
3.安裝淘寶鏡像：
在命令行里輸入如下代碼：npm install -g cnpm --registry=https://registry.npm.taobao.org
測試淘寶鏡像是否安裝成功：命令行-------cnpm -v
4.安裝vue：
npm install vue
測試(注意，這里最后一個是大V哦)：vue -V
5.安裝vue-cli腳手架：
npm install vue-cli -g
6.安裝webpack：
npm install webpack -g
7.安裝less(現在的項目都用less或者sass啦，別犯懶，安裝吧~~)
npm install -g less
好的，基本上我們需要的環境都安裝了，接下來，要搭建項目啦~
二、項目搭建：
1.先建一個項目文件夾
2.在該文件夾下執行：npm install
3.啟動運行項目嘍(這一步在每次啟動項目前都要敲哦~)：npm run dev 向下面這樣，就啟動成功啦！復制HTTP到瀏覽器你就能看到你的Hello Vue啦~~
二、項目准備：
1、項目目錄設計：
如圖：黑色背景為剛下載好在編輯器中打開時的樣子，第一幅白色背景的圖片里面有一些需要添加的文件夾。我們所需要寫的代碼都在src文件夾里面。
1.common文件夾：該文件夾下應該再新建兩個文件夾，一個命名為js,一個命名為css，common的里面是存放公共css和js的，有些情況下你會需要圖標，所以還會有font文件夾。
2.components文件夾：這是本來就有的文件夾，是用來管理組件的。比如說頭部header,內容里面的幾個組件，尾部footer,這里並不是公共的組件，是你頁面的結構所需要的都放在這里。以header文件夾為例，里面的header.vue是你需要敲寫的代碼，其他的header所需要的圖片也放在這里。也就是說一個組件里除了.vue的文件之外，還可能包括圖片等其他相關的資源等等。因為組件有一個很重要的設計理念就是就近維護。
3.router文件夾：負責路由的代碼。
（還有其他文件夾還會陸續補充進來。。。。下一節為大家更新如何模擬數據，mock數據。）