没事干有点无聊,两个钟来个极限编程,用vue作一我的生解答书的小玩意,顺便边作边记录过程javascript
直接命令创建项目css
vue init webpack-simple answerbook
创建完之后进入目录html
npm install
而后跑一下vue
npm run dev
ok~java
谋定然后动,拿墨刀作个简单的原型图(啊啊啊没开QQ没截图工具 又浪费几分钟开QQ)webpack
主要流程就是:web
1. 进入页面1 输入我的的问题,点击翻开答案
2. 进入页面2 随机读取答案显示(固然随机啊哈哈否则还真的解答问题咩)
下面顺便放个二维码宣传下npm
其实就两个界面,用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 codebash
而后想一想答案的数据怎么来了,大概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 }}
如今美化一下
美化完就成了这个样子 有点感受了(具体代码随后放上码云吧)
部署的话服务器什么的本身准备好吧,而后命令:
npm run build
build完之后把 index.html和dist 丢上去服务器就行啦~~~~
测试一下吧:
macauapper.bananac.tech
下班咯~周末愉快