这篇文章主要介绍了Vue脚手架如何编写试卷页面功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
脚手架(vue-cli)
(一)什么是脚手架
概念:是一种用于快速开发Vue项目的系统架构
优点:能够帮助咱们快速的开发项目
缺点:由于脚手架适用于各种项目的开发,而不是单独的针对某一项目单独研发的,会出现代码冗余
脚手架的使用:
1、安装脚手架 vue-cli
全局安装打开cmd运行:cnpm install -g @vue/cli
2、查看当前版本号:
vue -V
3、创建项目:
根目录下打开cmd运行:vue create objectname
项目名称(名称不能有大写)
正文开始
Vue脚手架实现试卷页面功能
将moduleA中的store模块化
在state中放入变量subjectList
,通过mutations更新subjectList
在Home.vue中通过mapMutations
激活mutations中的getSubjectList
,从而更新subjectList
import '@/mock' export default { namespaced: true, state: { subjectList: [] }, mutations: { getSubjectList(state, payload) { state.subjectList = payload } } }
store/index.js import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex) import user from './modules/user' import moduleA from './modules/moduleA' let store =new Vuex.Store({ modules:{ moduleA } }) export default store
Home.vue
fmtSubjectType,fmtOrder2ABC为过滤器,checkSubjectType
为方法,统一放在Vue.mixin中,保存在mixin中的index.js文件中
通过checkSubjectType方法的结果真假控制此div是否存在
<template> <div class="main"> <ul> <li class="item" v-for="(item, i) in subjectList" :key="i"> <h5>{{i+1}}.[{{item.type|fmtSubjectType}}] {{item.title}}</h5> <div > {{item.author}}{{item.createDate}} </div> <fieldset v-if="checkSubjectType(item.type)"> <legend >选项</legend> <div v-for="(choice, j) in item.choice" :key="j"> {{j|fmtOrder2ABC}} {{choice.answer}} </div> </fieldset> <div v-if="checkSubjectType(item.type)">答案:{{item.answer}}</div> <div >解析:{{item.desc}}</div> </li> </ul> </div> </template>
<script> import '@/mock' import {createNamespacedHelpers} from 'vuex' let {mapState,mapMutations,mapActions}= createNamespacedHelpers('moduleA') export default { async created() { let {subjectList} = await this.$get('/subjectList') this.getSubjectList(subjectList) }, computed: { ...mapState(['subjectList']) }, methods: { ...mapMutations(['getSubjectList']), } }; </script>
<style scoped lang='scss'> .main{ border: 1px solid red; .item{ padding: 20px 10px; border-bottom: 1px solid #ccc; } } </style>
mixin/index.js
通过切 换BASE_URL 来切换接口,axios中的url是通过 BASE_URL 拼接的
import axios from 'axios' import Vue from 'vue' import { BASE_URL } from '@/config' import {SUBJECT_TYPE} from '@/config/enum' Vue.mixin({ methods: { async $get(url,params){ let {data} = await axios.get(BASE_URL+url,{params}) return data }, checkSubjectType(type){ return type===SUBJECT_TYPE.DANXUAN||type===SUBJECT_TYPE.DUOXUAN } }, filters:{ fmtSubjectType(val){ return ['单选题', '多选题', '判断题', '简答题'][val] }, fmtOrder2ABC(val) { return 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[val] } }, data() { return { SUBJECT_TYPE } }, })
config/index.js
通过MODE的改变,更换接口
import {MODE_TYPE} from './enum' const BASE_URL_BEF='' const BASE_URL_PRO='XXX' const BASE_URL_DEV='PPPP' const MODE=MODE_TYPE.BEF export const BASE_URL = [BASE_URL_BEF,BASE_URL_PRO,BASE_URL_DEV][MODE]
config/enum.js
鉴于魔法数字的缘故,通过如下,使代码更清晰
//枚举 export const MODE_TYPE={ BEF:0, PRO:1, DEV:2 } export const SUBJECT_TYPE={ DANXUAN:0, DUOXUAN:1, PANDUAN:2, JIANDA:3 }
mock/index.js
通过mock伪造数据
import Mock from 'mockjs' Mock.mock('/subjectList',{ "subjectList|10":[ { "id|+1": 1, "title": "@cword(5,10)", "type": "@integer(0,3)", author:"@cname", createDate:'@datetime', "choice": [ { "id": 11, "choice": "A", "answer": 0 }, { "id": 12, "choice": "B", "answer": 1 }, { "id": 13, "choice": "C", "answer": 2 }, { "id": 14, "choice": "D", "answer": 3 } ], "answer": "C", desc:'@cword(8,25)' } ] })
感谢你能够认真阅读完这篇文章,希望小编分享的“Vue脚手架如何编写试卷页面功能”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。