Vue從零開發SPA專案

雪山飛豬發表於2020-12-31
Vue

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

相關文章