【作個小玩意】基於Vue的人生解答書

沒事幹有點無聊，兩個鍾來個極限編程，用vue作一我的生解答書的小玩意，順便邊作邊記錄過程

Step 1. 創建Vue項目模板

直接命令創建項目

vue init webpack-simple answerbook

創建完之後進入目錄

npm install

而後跑一下

npm run dev

ok~

Step 2. 原型圖

謀定然後動，拿墨刀作個簡單的原型圖（啊啊啊沒開QQ沒截圖工具 又浪費幾分鐘開QQ）

主要流程就是：

1. 進入頁面1 輸入我的的問題，點擊翻開答案
2. 進入頁面2 隨機讀取答案顯示(固然隨機啊哈哈否則還真的解答問題咩)
下面順便放個二維碼宣傳下

Step 3. 拼界面

其實就兩個界面，用vue-route的話有點小題大作了，實際問題實際分析，根據step來控制v-show就行了

<template>
  <div id="app">
    <div class="page" v-show="step == 1">
      <div class="center">
        <div class="top">
          <h1>答 案 之 書</h1>
          <h3>The Book Of Answers</h3>
        </div>
        <div class="mid">
          <h3> What's Your Question ? </h3>
          <input type="text" v-model="question"/><br/>
          <button class="submitBtn" @click="showAnswer">翻開答案</button>
        </div>
      </div>
    </div>
    <div class="page" v-show="step == 2">
        <div class="center">
          <div class="top">
            <h1>我 的 問 題</h1>
            <h3>{{ question }}</h3>
          </div>
          <div class="mid">
            <h3> 確定是你啊！ </h3>
            <h4> Fucking You </h4>
            <button class="submitBtn" @click="showQuestion">再問其餘</button>
          </div>
          <div class="bottom">
          </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      step: 1,
      question: ""
    }
  },
  methods: {
    showAnswer (){
      this.step = 2;
    },
    showQuestion (){
      this.step = 1;
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.page {
  .center{
    width:100%;
    text-align:center;
  }
  .top,.mid,.bottom{
    float:left;
    width:100%;
    height:180px;
  }
}
</style>

大概頁面出來了， 數據先用hard code

Step 4. 拿數據

而後想一想答案的數據怎麼來了，大概100個隨機答案的話，平均5個字一個答案，500個字就大概1KB，加上格式什麼的2KB對於手機端來講也不算負擔重，那就不寫服務端了，直接靜態寫在裏面。

var data = ["是的","不是","放棄吧","確定是你啊"];
module.exports = exports = data;

這個就是答案的數據來源了

而後在App.vue <script>改爲：

import answersData from './data/data.js'
export default {
  name: 'app',
  data () {
    return {
      step: 1,
      question: "",
      answer: ""
    }
  },
  methods: {
    showAnswer (){
      this.step = 2;
    },
    showQuestion (){
      this.step = 1;
      this.answer = answersData[Math.floor(Math.random() * answersData.length)];
    }
  }
}

還有前面template中 hard code的答案顯示要改爲 {{ answer }}

Step5. 美化

如今美化一下

 

美化完就成了這個樣子 有點感受了（具體代碼隨後放上碼雲吧）

Step6. 部署

部署的話服務器什麼的本身準備好吧，而後命令：

npm run build

build完之後把 index.html和dist 丟上去服務器就行啦~~~~

 

測試一下吧：

macauapper.bananac.tech

 

下班咯~週末愉快