所謂SPA(Single Page Application)，就是單頁面應用的意思。
vue的亮點就是我們只需要關注數據的變化，下面演示一下從零開始創建一個獨立項目，並且能自定義路由，提交表單。
一、命令行創建項目
使用vue-cli
安裝
npm install vue-cli -g
界面創建項目
安裝完成后運行
vue ui
打開http://localhost:8000，會看到如下界面
*創建項目
下一步，我選擇了默認
創建完后目錄如下
也可以直接用命令行創建
vue create qionghe
啟動項目，更多請查看cli使用文檔
我們進入目錄chenqionghe，執行npm run serve
cd chenqionghe
npm run serve
打開界面如下http://localhost:8080/
創建webpack項目
安裝
npm i -g @vue/cli-init
創建項目
vue init webpack chenqionghe
一路回車
安裝完成目錄如下
啟動
npm run dev
打開http://localhost:8080/#/如下
二、自定義路由
關於路由的使用可以參考查看：router文檔
絕對路由
新建路由文件Cqh.vue
router/index.js引入這個新路由，並指定一個自己的路由
訪問：http://localhost:8080/#/cqh，看到如下結果
這樣我們就可以自定義路由了
帶參數的路由
比如在后面加上:id，如下
使用{{ $route.params.鍵名}}獲取，如下
運行結果
可以看到，id已經能正常的獲取和渲染了
嵌套路由
就是一個分組路由的概念，我們把component/Cqh.vue修改一下
<template>
<div class="hello">
<router-link to="/cqh/testA">TestA</router-link>
<router-link to="/cqh/testB">TestB</router-link>
<router-view/>
</div>
</template>
這個router-link就是使用路由的方式，這里我加了兩上新路由/cqh/testA,/cqh/testB
這個<router-view/>就是子路由要渲染的地方，再添加一個對應的子路由，如下
訪問http://localhost:8080/#/cqh，如下
分別點擊TestA和TestB，
這里的頁面切換非常平常，體驗相當好！
三、表單交互示例
有路由了，咱們后端關注的還是數據交互，少不了表單，下面來個簡單的示例TestForm，代碼如下
<template>
<div class="hello">
<h1>{{ name }}</h1>
名字：<input type="text" v-model="form.name"/><br>
年齡：<input type="text" v-model="form.age"/><br>
性別：<input type="text" v-model="form.sex"/><br>
<button @click="mySubmit">提交</button>
<p>{{form.msg}}</p>
</div>
</template>
<script> export default { data() { return { name: '雪山飛豬', form: {}, } }, methods: { mySubmit() { let msg = "您提交的數據是：" + JSON.stringify(this.form); this.$set(this.form, 'msg', msg) } } } </script>
運行如下
再提交一下數據，測試一下
可以看到已經能拿到表單的數據了，有了表單數據，就可以自行請求接口了。
正式項目可以考慮使用ElementUI來創建好看一點的頁面
vue的使用也太簡單了吧，太感人了，只需要關注數據的變化！giao~