vue-cli 是一個官方釋出 vue.js 專案腳手架，使用 vue-cli 可以快速建立 vue 專案。這篇文章將會從實操的角度，介紹整個搭建的過程。

1. 避坑前言
其實這次使用vue-cli的過程並不順利，反覆嘗試幾次都遇到以下這個報錯：

建立vue-cli工程專案時的報錯

在網上查了很多資料才發現原來是node版本過低的問題，雖然沒有找到官方對這個“過低”問題的解釋，但是根據國外網友的經驗之談，應該是至少使用node6，我將node4更新至node8之後確實沒有報錯了，順利搭建。相關答疑帖：https://github.com/vuejs/vue-cli/issues/618

將這個放在最前面說是希望大家在搭建前，應該先確保將node更新至6以上，這樣能少走一些彎路。下面開始正式介紹整個構建過程。

2. 使用 vue-cli 搭建專案

下面整個過程是基於已經安裝node.js和cnpm的基礎上，node.js如何安裝就不在這裡詳說了。如何全域性化安裝cnpm，這裡簡單提一下：
安裝淘寶映象

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

其實對於安裝vue-cli，使用npm命令和cnpm命令都是可以的，個人覺得使用npm安裝的比較慢，而且很可能會因為網路問題而出錯，所以還是覺得使用cnpm穩一點。

（1）全域性安裝 vue-cli ，在命令提示視窗執行：

cnpm install -g vue-cli 

安裝vue-cli

出現以上提示表示vue-cli正常安裝成功，可以正式建立vue-cli工程專案了。
（2）安裝vue-cli成功後，通過cd命令進入你想放置專案的資料夾，在命令提示視窗執行建立vue-cli工程專案的命令：

vue init webpack

確認建立專案後，後續還需輸入一下專案名稱、專案描述、作者、打包方式、是否使用ESLint規範程式碼等等，詳見上圖。安裝順利執行後會，生成如下檔案目錄：

（3）生成檔案目錄後，使用 cnpm 安裝依賴：

 cnpm install 

（4）最後需要執行命令： npm run dev 來啟動專案，啟動完成後會自動彈出預設網頁：

到這一步，就算成功利用vue-cli搭建一個vue專案了

拓展安裝
npm i vue-resource --save
npm i axios --save

3.目錄結構及其對應作用
通過vue-cli搭建一個vue專案，會自動生成一系列檔案，而這些檔案具體是怎樣的結構、檔案對應起什麼作用，可以看看下面的解釋：

├── build/ # webpack 編譯任務配置檔案: 開發環境與生產環境
│ └── ...
├── config/
│ ├── index.js # 專案核心配置
│ └── ...
├ ── node_module/ #專案中安裝的依賴模組
── src/
│ ├── main.js # 程式入口檔案
│ ├── App.vue # 程式入口vue元件
│ ├── components/ # 元件
│ │ └── ...
│ └── assets/ # 資原始檔夾，一般放一些靜態資原始檔
│ └── ...
├── static/ # 純靜態資源 (直接拷貝到dist/static/裡面)
├── test/
│ └── unit/ # 單元測試
│ │ ├── specs/ # 測試規範
│ │ ├── index.js # 測試入口檔案
│ │ └── karma.conf.js # 測試執行配置檔案
│ └── e2e/ # 端到端測試
│ │ ├── specs/ # 測試規範
│ │ ├── custom-assertions/ # 端到端測試自定義斷言
│ │ ├── runner.js # 執行測試的指令碼
│ │ └── nightwatch.conf.js # 執行測試的配置檔案
├── .babelrc # babel 配置檔案
├── .editorconfig # 編輯配置檔案
├── .gitignore # 用來過濾一些版本控制的檔案，比如node_modules資料夾
├── index.html # index.html 入口模板檔案
└── package.json # 專案檔案，記載著一些命令和依賴還有簡要的專案描述資訊
└── README.md #介紹自己這個專案的，可參照github上star多的專案。
build/