所謂SPA(Single Page Application)，就是單頁面應用的意思。 vue的亮點就是我們只需要關注資料的變化，下面演示一下從零開始建立一個獨立專案，並且能自定義路由，提交表單。 [toc] # 一、命令列建立專案 ## 使用vue-cli 安裝 ``` npm install vue-cli -g ``` 介面建立專案 安裝完成後執行 ``` vue ui ``` 開啟http://localhost:8000，會看到如下介面  *建立專案  下一步，我選擇了預設  建立完後目錄如下  也可以直接用命令列建立 ``` vue create qionghe ``` 啟動專案，更多請檢視[cli使用文件](https://cli.vuejs.org/zh/guide/cli-service.html#%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4) 我們進入目錄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文件](https://router.vuejs.org/zh/guide/) ## 絕對路由 新建路由檔案Cqh.vue  router/index.js引入這個新路由，並指定一個自己的路由  訪問：http://localhost:8080/#/cqh，看到如下結果  這樣我們就可以自定義路由了 ## 帶引數的路由 比如在後面加上:id，如下  使用{{ $route.params.鍵名}}獲取，如下  執行結果  可以看到，id已經能正常的獲取和渲染了 ## 巢狀路由 就是一個分組路由的概念，我們把component/Cqh.vue修改一下 ``` ``` 這個router-link就是使用路由的方式，這裡我加了兩上新路由/cqh/testA,/cqh/testB 這個``````就是子路由要渲染的地方，再新增一個對應的子路由，如下 訪問http://localhost:8080/#/cqh，如下  分別點選TestA和TestB，   這裡的頁面切換非常平常，體驗相當好！ # 三、表單互動示例 有路由了，咱們後端關注的還是資料互動，少不了表單，下面來個簡單的示例TestForm，程式碼如下 ``` ``` 執行如下  再提交一下資料，測試一下  可以看到已經能拿到表單的資料了，有了表單資料，就可以自行請求介面了。 正式專案可以考慮使用[ElementUI](https://element.eleme.cn/#/zh-CN/component/form)來建立好看一點的頁面 vue的使用也太簡單了吧，太感人了，只需要關注資料的變化！giao~