基於vue-cli腳手架，結合實際專案經驗，搭建一個完整的SPA專案框架。

安裝vue-cli腳手架

先貼出官方的命令列工具使用方法 官方命令列工具

鑑於此過程比較緩慢，我這裡推薦使用淘寶映象來安裝。依次執行以下步驟 (本人mac，需要sudo獲取管理員許可權)

1. 安裝淘寶映象，通過cnpm使用

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

2. 全域性安裝 vue-cli腳手架

   sudo cnpm install --global vue-cli

3. 建立一個基於 webpack 模板的新專案, 此步驟需要注意的地方：前面會讓你確定專案名，作者，是否安裝路由等等，全部按 ENTER

   鍵即可，最後一部問你是否要安裝好模版立即執行npm install。此處選擇no, 否則超級慢。

   vue init webpack vue-cli-test

4. 進入剛才建立的專案目錄、通過cnpm安裝依賴、嘗試執行專案

   cd vue-cli-test/
   cnpm install
   cnpm run dev

   啟動服務成功後，便可以訪問localhost:8080。成功啟動展示如下圖所示：
   

安裝各種專案依賴

在前面執行 cnpm install 的時候，我們就已經安裝好了很多外掛，例如vue-router、babel、webpack、eslint 等等等等，可以在package.json檔案中看到。但是在實際開發中，這些還不夠。我們需要進行資料請求、資料管理、以及根據頁面需求決定是否引用元件化庫等。這裡我們使用：

1. 資料請求 axios 使用教程

   cnpm install axios --save

2. 資料倉庫管理 vuex 使用教程

   cnpm install vuex --save

3. 頁面元件化庫 vux 使用教程

   cnpm install vux --save

   提示：關於 --save 的作用是安裝到生產版本，專案打包後依然起作用。--save-dev 是安裝到開發版本，僅僅在專案本地開發有效，不存在於 cnpm run build 打包後的檔案中，例如熱載入、babel轉碼等。

搭建專案目錄結構

不同的公司都有自己的一套框架，這裡是目前我公司搭建的架構。給大家一個借鑑

這樣我們一個基本的專案架構就搭建完成了，但是真正的專案開發，少不了配置檔案的修改，以及各種外掛的具體安裝使用。我會在下一次部落格中詳細分析一下整個專案流程