vue-cli是一個官方釋出的vue.js專案腳手架，使用vue-cli可以快速建立vue專案，GitHub地址是:https://github.com/vuejs/vue-cli

1. 安裝node.js 首先安裝node環境，可以到官網下載安裝包http://nodejs.cn/，安裝完成之後，可以用命令列檢查是否安裝成功。 2. 安裝vue-cli 安裝好了node，可以直接全域性安裝vue-cli

npm install -g vue-cli

但是這種安裝方式比較慢，推薦使用國內映象來安裝：

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

如果安裝失敗，則用npm cache clean清理快取，然後再安裝，後面安裝過程中如有失敗，同樣清理快取，再安裝。然後同樣用npm -v檢查是否安裝成功。 然後使用 npm 安裝 vue-cli 和 webpack

npm install -g vue-cli

最新的 vue 專案模板中，都帶有 webpack 外掛，所以這裡可以不安裝 webpack

安裝完成後，可以使用 vue -V （注意 V 大寫）檢視是否安裝成功。 如果提示“無法識別 ‘vue’ ” ，有可能是 npm 版本過低，可以使用 npm install -g npm 來更新版本

3. 生成專案 首先需要在命令列中進入到專案目錄，然後輸入：

vue init webpack Vue-Project

其中 webpack 是模板名稱，可以到 vue.js 的 GitHub 上檢視更多的模板https://github.com/vuejs-templates，建立專案過程中yes的話，按Enter鍵往下執行。 Vue-Project 是自定義的專案名稱，命令執行之後，會在當前目錄生成一個以該名稱命名的專案資料夾 配置完成後，可以看到目錄下多出了一個專案資料夾，裡面就是 vue-cli 建立的一個基於 webpack 的 vue.js 專案 然後進入專案目錄（cd Vue-Project），使用 npm 安裝依賴

npm install
 

然後啟動專案

  npm run dev

4. 打包上線 自己的專案檔案都需要放到 src 資料夾下 專案開發完成之後，可以輸入 npm run build 來進行打包工作

npm run build

打包完成後，會生成 dist 資料夾，如果已經修改了檔案路徑，可以直接開啟本地檔案檢視 專案上線時，只需要將 dist 資料夾放到伺服器就行了。

建立好的專案頁面如下： 5. vue-cli專案結構詳情