• vue-cli:一個官方釋出 vue.js 專案腳手架，使用 vue-cli 可以快速建立 vue 專案
• webpack:是當下最熱門的前端資源模組化管理和打包工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源

• vue-router:SPA單頁應用必備路由模組（下面詳細介紹）

        1.搭建環境

            搭建環境之前，你需要在本地安裝node.js,npm是node.js的包管理器，用於node外掛管理(包括安裝、解除安裝、管理依賴)等，會隨著node的安裝而自動安裝。但是因為npm安裝外掛是從外國的伺服器下載，受網路影響大，可能出現異常。所以國內的淘寶團隊在npm的基礎上，為我們提供了強大的cnpm包管理工具。 

cnpm安裝                                                                                                                                                                             

            測試cnpm是否安裝：cnpm -v，下圖表示安裝成功。

               cnpm和npm的用法一致，但凡用到npm的地方，使用cnpm代替即可，下載速度會提升一個檔次！

接下來執行以下命令：

全域性安裝webpack

        全域性安裝vue腳手架

建立vue專案

執行vue init webpack myVueStudy

安裝專案相關依賴工具

cnpm install

cnpm run dev   啟動該專案

大功告成，專案已成功啟動，瀏覽器會自動為我們開啟一個頁面，這就是我們將要開發的專案主頁面。見下圖

2.專案檔案結構

開啟我們建立的myVueStudy專案，專案目錄如下

src目錄結構如下

分別看下app.vue和main.js兩個重要檔案

app.vue            main.js

3.開始開發

編寫過後的app.vue檔案如下(主頁面中的路由定義)

效果圖

在使用vue-cliwebpack構建專案的過程中，要注意以下一些方面

• 要在引用元件之前通過命令列cnpm install <元件name>來全域性安裝這些元件
• vue元件中，template需要有一個根元素，否則控制檯會報錯
• 一級路由會了，二級路由就很簡單