如今vue.js熱度不減，利用vue-cli和webpack可以非常便捷的搭建一個開發環境，以下列出利用vue-cli搭建一個vue.js模板的過程：

1：安裝vue-cli
安裝vue-cli前系統必須先裝有node.js，我們將通過npm來進行環境搭建和依賴載入；本文將介紹window開發環境下的操作，mac系統下大同小異，在操作時需要加入許可權sudo即可。
開啟cmd，輸入node -v檢視當前node版本號。如果顯示– ‘node’ 不是內部或外部命令，也不是可執行的程式
或批處理檔案。
說明系統未裝有node，請下載並安裝（http://nodejs.cn/download/

2：下載vue-cli腳手架工具
關於vue-cli：
Vue-cli是vue官方提供的一個命令列工具（vue-cli），可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鐘即可啟動帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案。

執行命令：npm install -g vue-cli 全域性安裝vue-cli腳手架工具

安裝完畢有會得到一大堆目錄，先不用理會！看到以下畫面說明安成。。
此時執行vue會得到相息
Commands:

init        generate a new project from a template
list        list available official templates
build       prototype a new project
help [cmd]  display help for [cmd]

Options:

-h, --help     output usage information
-V, --version  output the version number

3：下載模板
C:\Users\hauyi>vue init webpack first_project

‘git’ ——-這裡最好先在電腦裝有git
? Project name first_project    //專案名稱
? Project description A Vue.js project  //專案描述
? Author hau5yi //專案作者，如有git則會自動關聯
? Vue build standalone
? Install vue-router? No  //是否使用vue_router
? Use ESLint to lint your code? Yes //esLint的語法檢測（ES6）
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

vue-cli · Generated “first_project”.

To get started:

 cd first_project
 npm install
 npm run dev

看到以上提示，表示專案已經建立完畢，vue-cli非常友好的提示我們下一步應該如何操作，首先開啟專案，然後下載依賴再執行專案，我們跟著提示操作完成這三個步驟即可搭建起一個基礎模板。
4：下載依賴並執行   

 cd first_project    //開啟專案

  npm install         //下載依賴
下載依賴完畢之後，會出現很多目錄，這些都是專案總用到的依賴項，我們可以通過dir檢視當前資料夾，會發現多出了一個 node_modules資料夾，這裡就是存放依賴項的地方
 npm run dev      //執行專案            

到這裡，可以看到電腦8080埠已經執行起來了這個專案，可以看到hellovue介面已經出現了，模板就建立完成了，瀏覽器開啟localhost:8080即即可檢視當前專案。