轉載自https://www.jianshu.com/p/88380e0bfac1
1.安裝腳手架工具vue-cli（命令行）
- 全局安裝vue-cli
Mac打開終端，windows打開命令行工具
輸入npm install --global vue-cli
- 創建基於webpack模板的項目
vue init webpack 項目名稱
- 輸入完上面命令後，會詢問你配置如下信息（按需配置）
Project name ：項目名稱
Project description：項目描述
Author：作者
Vue build：如何構建項目
Install vue-router：是否安裝路由
Use ESLint to lint your code：是否使用ESLint來規範我們的代碼
Pick an ESLint preset：選擇一個ESLint代碼規範
Set up unit tests：是否需要自動化單元測試
Setup e2e tests with Nightwatch：是否需要自動化用戶界面測試
Should we run 'npm install' for your after the project has been created?(recommend)：在後續安裝依賴包是是否使用npm install安裝
- 當根據配置執行完成後會提示Project initialization finished!，代表安裝項目初始化完成
- 根據提示信息啓動項目
cd 項目名稱（進入項目）
npm run dev（運行項目）
- 項目啓動完成 提示Your application is running here: http://localhost:8080
這時 我們在瀏覽器輸入網址，即可 - 項目目錄說明
build：項目webpack配置文件
config：針對開發環境和線上環境的配置文件
node_modules：項目依賴包
src：源代碼目錄
static：靜態資源
.babelrc：JavaScript 語法的編譯器
.editorconfig：針對babel的編譯，瀏覽器配置
.eslintignore：針對babel的編譯，eslint檢測規則配置
.eslintrc.js：針對babel的編譯，eslint檢測規則配置
.gitignore：git 配置文件
.postcssrc.js：轉換成css格式的插件
index.html：整個項目的入口index頁，包含根實例的掛載點
package.json：定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）
package-lock.json：其實package-lock就是鎖定安裝時的包版本號，需要上傳到git上，以保證其他人在install時候，大家的依賴版本相同
- src目錄下文件介紹
main.js:整個項目入口文件
el：#app
創建了一個vue的實例app讓其掛載在index.html的id=app的節點上
components: { App }
註冊局部組件APP，APP來源：import App from './App'，即引入當前目錄下的APP.vue組件
template: '<App/>'
定義模板爲APP組件的內容
即，main中創建vue實例展示的就是APP.vue組件中的內容
- APP.vue：單文件組件，包含三部分
第一部分：<template>模板部分
第二部分：<script>邏輯部分
第三部分：<style>樣式部分
- 腳手架工具的優點
使用ES6語法
提供單文件組件編碼形式
