隨著vue.js越來越火爆，更多的項目都用到vue進行開發，在實際的開發項目中如何搭建開發腳手架呢，今天跟大家分享一下：
首先需要了解的知識
Html
Css
Javascript
Node.js 環境（npm包管理工具）
Webpack 自動化構建工具
一、安裝node.js
進入官網下載node.js
二、安裝 cnpm
1、說明：npm（node package manager）是nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）；
2、使用npm安裝插件：命令提示符執行npm install <name> /<name>
3、選裝 cnpm 因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，如果npm的服務器在中國就好了，所以我們樂於分享的淘寶團隊幹了這事！來自官網：“這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步。”;
安裝：npm install -g cnpm --registry=https://registry.npm.taobao.org
輸入cnpm -v，可以查看當前cnpm版本
三、安裝vue-cli腳手架構建工具
vue-cli 提供一個官方命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘即可創建並啟動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：
安裝：$ cnpm install vue-cli –g //g表示全局安裝
安裝完成之後輸入 vue -V（注意這裡是大寫的“V”），如下圖，如果出現相應的版本號，則說明安裝成功。
四、創建一個基於webpack模板的新項目
要創建項目，首先我們要選定目錄，然後再命令行中把目錄轉到選定的目錄。可以使用：
$ vue init webpack my-app // my-app為自定義項目名
運行初始化命令的時候回讓用戶輸入幾個基本的選項，如項目名稱，描述，作者等信息，如果不想填直接回車默認就好
Project name (my-app) # 項目名稱（我的項目）
Project description (A Vue.js project) # 項目描述一個Vue.js 項目
Author 作者（你的名字）
Install vue-router? (Y/n) # 是否安裝Vue路由，也就是以後是spa（但頁面應用需要的模塊）
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼？ （Y [ yes ] / N [ no ]）
Pick an ESLint preset (Use arrow keys) # 選擇一個預置ESLint（使用箭頭鍵）
Setup unit tests with Karma + Mocha? (Y/n) # 設置單元測Karma + Mocha？ （Y/ N）
Setup e2e tests with Nightwatch? (Y/n) # 設置端到端測試，Nightwatch？ （Y/ N）
注：當然這些都看你自己個人的情況
五、運行項目
$ cnpm run dev
運行成功後，瀏覽器直接顯示的是頁面如下：
六、安裝項目所需要的依賴
剛初始化的項目是沒有依賴的，如果運行會報類似這樣的錯誤，輸入命令
$ cnpm install
轉發+關注我吧，每天更新web前端乾貨知識，原創需要大家的支持，你們的支持是我更新最大的動力！
閱讀更多 web前端技術 的文章
