简单的vue2 + vue-router + vuex + iview 入门项目，一个移动端平台的简易考试系统。灵感来源于近期工作项目中开发的一套考试平台系统。欢迎大家来issues指出错误共同进步。

项目运行

# 克隆到本地
git clone https://github.com/webproblem/vue-demo.git
# 进入项目
cd vue-demo
# 安装依赖
npm install，可以使用cnpm代替npm
#运行项目
npm run dev

项目文件说明

主要是src文件夹。

• data: 模拟的数据
• page: 存放的vue组件页面
• router: vue路由文件
• store: vuex状态管理文件
• utils: 公共的工具函数

功能描述及实现

可以通过设置不同的路由参数来切换不同的考试试题

<div class="button-group"><span><router-link :to="{name: 'exam1', query: {id: 1}}">考试试题一</router-link></span><span><router-link :to="{name: 'exam1', query: {id: 2}}">考试试题二</router-link></span>
</div>

在src/data目录下的模拟数据中，配置好考试试题和考试时长等信息。

/*** @param {Number} examTime 考试时长* @param {String} title 题目内容* @param {Array} options 答案选项* @param {Number} answer 正确答案索引，从0开始* @param {Number} score 题目对应的分数* @param {String} examId 题目唯一ID
*/export const examTime = 30;export const examList = [{title: "《春晓》这首诗是出自哪位诗人？",options: ["李白", "杜甫", "王维", "苏轼"],answer: 1,score: 5,examId: "0"}
]

然后运行项目，进入首页就可以选择试卷答题了！！！

在考试时间结束的时候，系统会自动提交答题试卷，或者在答完所有题的时候，手动点击提交试卷，系统会根据答题情况给出相应的考试结果。（还有一些细节没有考虑进去，后期可以添加查看答错题目的功能等）

<template><div class="exam-result"><div class="scores-container"><div class=""><header class="scores">{{getScore}}分</header><label class="result-tips">{{resultTips}}</label></div></div></div>
</template><script>
import {mapState, mapMutations} from 'vuex'export default {data () {return {//答错的题errorExam: [],//答对的题sureExam: [],//总分totalScore: 0,//得分getScore: 0,resultTips: "",examList: []}},computed:mapState(['saveAnswer','useTime','examId']),mounted () {const vm = this;vm.examList = vm.$store.state.examList[this.examId - 1] || [];vm.getSureAnswer();},methods: {getSureAnswer() {var vm = this;vm.examList.forEach(function(item, index){vm.totalScore += parseInt(item.score);if((item.answer + 1) == vm.saveAnswer[index]){vm.sureExam.push(item);vm.getScore += parseInt(item.score);}else{vm.errorExam.push(item);}})vm.setResultTips();console.log(this.useTime)console.log("答对题:" + vm.sureExam.length);},setResultTips() {const scores = [100 ,90, 70, 60, 40, 20],tips = ['哇，你太优秀了，厉害了！！！','智商只差一步就爆表了，继续加油！','表现很好，good！','嗯，不错，还有很大的进步空间！','还需要继续加油哦！！！','What are you弄啥嘞！'];if(this.getScore <= scores[5]) {this.resultTips = tips[5];return;}if(this.getScore <= scores[4]) {this.resultTips = tips[4];return;}if(this.getScore <= scores[3]) {this.resultTips = tips[3];return;}if(this.getScore <= scores[2]) {this.resultTips = tips[2];return;}if(this.getScore <= scores[1]) {this.resultTips = tips[1];return;}if(this.getScore <= scores[0]) {this.resultTips = tips[0];return;}}}
}
</script>

本教程是基于已经有一定vue基础之上的，如果你还不了解什么是vue建议先去学习一下。友情链接:
vue中文官网
vuex文档
vue-router文档
欢迎大家star和issues。
源码地址:
https://github.com/webproblem/vue-demo