Vue從零開發SPA項目

所謂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~