前言
簡單地說，前后端分離 的核心思想是前端頁面通過 ajax 調用后端的 restuful api 進行數據交互，而 單頁面應用（single page web application，SPA），就是只有一張頁面，並在用戶與應用程序交互時動態更新該頁面的 Web 應用程序。
附上 Vue 的官方教程：
https://cn.vuejs.org/v2/guide/
一、安裝 Vue CLI
因為需要使用 npm 安裝 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我們需要安裝 Node.js，訪問官網 https://nodejs.org/en/，首頁即可下載。
圖中左邊是長期支持版本，右邊是當前版本，下載哪個都行，我一般選擇長期支持版本。
下載完成后運行安裝包，一路下一步就行。然后在 cmd 中輸入 node -v，檢查是否安裝成功。
如圖，出現了版本號（根據下載時候的版本確定），說明已經安裝成功了。同時，npm 包也已經安裝成功，可以輸入 npm -v 查看版本號
輸入 npm -g install npm ，將 npm 更新至最新版本。
可以選擇安裝 cnpm，即 npm 的國內鏡像。使用 cnmp 的好處是在日后下載內容時會比較快，但是下載的包可能不是最新的。
安裝 cnpm 的命令為 ：
npm install -g cnpm --registry=https://registry.npm.taobao.org
注意一點，cnpm 不要與 npm 混合使用，一個項目用 cnpm 就從頭用到底，不要中途敲錯命令，否則就會出現混亂。不過萬一遇到這種情況也不用慌，把項目的 node_modules 文件夾刪了重新執行 npm/cnpm install 就行了，只是比較浪費時間。
使用 npm install -g vue-cli 安裝腳手架
二、構建前端項目
1.使用 IDE 構建項目
file->new->project 然后選擇Static Web -> Vue.js，點擊 next，輸入相關參數
輸入項目名，完成后點擊 Next，等待 Vue CLI 初始化，然后在可視化界面上確認項目信息，修改或 Next 即可。IDEA 構建出的 Vue 項目是不含 node_modules 的，所以要先調出終端，打開如下按鈕 執行 npm install
運行完成后，輸入 npm run dev 即可。
我們還可以在 package.json 文件上點擊右鍵，選擇 show npm scripts
這些命令都是在 package.json 文件里預定義的。dev 和 start 是一樣的，start 即是執行 npm run dev 命令
三、Vue 項目結構分析
1.項目的目錄結構
├── build // 構建相關
├── config // 配置相關 △
├── dist // 打包之后相關
├── node_modules // npm相關包
├── src // 代碼
│ ├── api // 請求接口文件(加)
│ ├── assets // 靜態資源(圖片，樣式等)
│ ├── components // 全局公用組件 △
│ ├── directives // 全局指令(加)
│ ├── mock // 項目mock 模擬數據(加)
│ ├── pages // 相關頁面(加)
│ ├── router // 路由(index.js) △
│ ├── store // store管理(加)
│ ├── App.vue // 入口頁面
│ └── main.js // 入口 加載組件 初始化等
├── static // 第三方不打包資源
├── .babelrc // babel-loader 配置
├── .eslintignore // eslint 忽略項
├── .eslintrc.js // eslint 配置項
├── .postcssrc.js // postcss 配置項
├── .gitignore // git 忽略項
├── index.html // html模板
└── package.json // package.json //項目依賴配置
接下來我們分析幾個文件，目的是理解各個部分是怎么聯系到一起的。
2.index.html
這是一個普通的html文件，讓他不平凡的是<div id="app"></div>，下面有一行注釋，構建的文件將會被自動注入，也就是說我們編寫的其它的內容都將在這個 div 中展示。
還有不普通的一點是，整個項目只有這一個 html 文件，所以這是一個 單頁面應用，當我們打開這個應用，表面上可以有很多頁面，實際上它們都只不過在一個 div 中。
3.App.vue
這里也有一句 <div id="app">，但跟 index.html 里的那個是沒有關系的。這個 id=app 只是跟下面的 css 對應。
<script>標簽里的內容即該組件的腳本，也就是 js 代碼，export default 是 ES6 的語法，意思是將這個組件整體導出，之后就可以使用 import 導入組件了。大括號里的內容是這個組件的相關屬性。
這個文件最關鍵的一點其實是第四行， <router-view/>，是一個容器，名字叫“路由視圖”，意思是當前路由（ URL）指向的內容將顯示在這個容器中。也就是說，其它的組件即使擁有自己的路由（URL，需要在 router 文件夾的 index.js 文件里定義），也只不過表面上是一個單獨的頁面，實際上只是在根組件 App.vue 中。
4.main.js
前面我們說 App.vue 里的 <div id="app"> 和 index.html 里的 <div id="app"> 沒有關系，那么這兩個文件是怎么建立聯系的呢？讓我們來看入口文件 main.js 的代碼
這個js的文件比如沒有分號（;），因為是 ES6 的語法，不這么寫反而會提示錯誤，雖說可以把 es-lint 改了或者關了，但我想熟悉一下新的規則也挺好。
最上面 import 了幾個模塊，其中 vue 模塊在 node_modules 中，App 即 App.vue 里定義的組件，router 即 router 文件夾里定義的路由。
Vue.config.productionTip = false ,作用是阻止vue 在啟動時生成生產提示。
在這個 js 文件中，我們創建了一個 Vue 對象（實例），el 屬性提供一個在頁面上已存在的 DOM 元素作為 Vue 對象的掛載目標，router 代表該對象包含 Vue Router，並使用項目中定義的路由。components 表示該對象包含的 Vue 組件，template 是用一個字符串模板作為 Vue 實例的標識使用，類似於定義一個 html 標簽。