一、環境準備
首先我們需要在自己的開發機器上安裝nodeJs，如果不確定自己是否已經安裝，可以使用以下命令查看：
node -v #查看node版本，檢查是否安裝node
npm -v
yarn -v
如果正常顯示版本，則說明已經安裝了nodeJs，如果沒有安裝，可以訪問node官網：http://nodejs.cn/download/，下載安裝node。
二、Vue CLI 全局安裝
安裝命令：
npm install -g vue-cli # -g 全局安裝
使用npm可能會比較慢，我們可以使用cnpm -- npm 的國內鏡像，使用 cnmp 的好處是在日後下載內容時會比較快，但是下載的包可能不是最新的。安裝 cnpm 的命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm可能會出現問題，下載依賴失敗，如果無法繼續可以將node_modules 文件夾裏面的依賴刪除重新執行命令下載依賴。
安裝完成以後，可以通過以下命令查看vue的命令用法 ：
vue -h
三、初始化項目
初始化命令：
vue init webpack vue-blog(項目名稱/文件夾名稱)
init：表示我要用vue-cli來初始化項目
<template-name>(webpack)：表示模板名稱，vue-cli官方爲我們提供了5種模板，
webpack-一個全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測和CSS擴展。
webpack-simple-一個簡單webpack+vue-loader的模板，不包含其他功能，讓你快速的搭建vue的開發環境。
browserify-一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。
browserify-simple-一個簡單Browserify+vueify的模板，不包含其他功能， 可以快速的搭建vue的開發環境。
-simple : 一個最簡單的單頁應用模板。
<project-name>(vue-blog)：標識項目名稱，這個你可以根據自己的項目來起名字。
執行命令會開始下載一個我們指定名稱的項目，我們需要指定以下項目參數。項目名稱直接使用默認的，選擇安裝 vue-router，ESLint是代碼質量檢測工具，這裏我選擇安裝。
- Project name :項目名稱 ，如果不需要更改直接回車就可以了。注意：這裏不能使用大寫。
- Project description:項目描述，默認爲A Vue.js project,直接回車，不用編寫。
- Author：作者，如果你有配置git的作者，他會讀取。
- Install vue-router? 是否安裝vue的路由插件，選擇Y。
- Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格，最好是進行配置。
- Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行爲模擬測試。
四、啓動項目
進入項目文件夾，執行依賴運行命令：
# 進入項目文件夾
cd vue-blog
# 運行項目-dev方式
npm run dev
項目構建成功之後，訪問 http://localhost:8080，可以看到以下內容，說明部署完成。
五、項目文件配置介紹
- build（webpack的初始化配置）
- config（index.js--項目配置）
- node_modules（項目依賴模塊，代碼庫）
- src（程序文件）
- static（靜態文件資源）
- test（測試代碼）
- index.html （項目首頁入口）
|-- build // 項目構建(webpack)相關代碼
| |-- build.js // 生產環境構建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- dev-client.js // 熱重載相關
| |-- dev-server.js // 構建本地服務器
| |-- utils.js // 構建工具相關
| |-- webpack.base.conf.js // webpack基礎配置
| |-- webpack.dev.conf.js // webpack開發環境配置
| |-- webpack.prod.conf.js // webpack生產環境配置
|-- config // 項目開發環境配置
| |-- dev.env.js // 開發環境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產環境變量
| |-- test.env.js // 測試環境變量
|-- src // 源碼目錄
| |-- components // vue公共組件
| |-- store // vuex的狀態管理
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件，加載各種公共組件
|-- static // 靜態文件，比如一些圖片，json數據等
| |-- data // 羣聊分析得到的數據用於數據可視化
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
|-- README.md // 項目說明
|-- favicon.ico
|-- index.html // 入口頁面
|-- package.json // 項目基本信息
.