基於vue-cli網上商城項目實戰開發——搭建一個完整的SPA項目開發框架（一）

基於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轉碼等。

搭建項目目錄結構

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

---

這樣我們一個基本的項目架構就搭建完成了，但是真正的項目開發，少不了配置文件的修改，以及各種插件的具體安裝使用。我會在下一次博客中詳細分析一下整個項目流程