Vue脚手架编写试卷页面功能

2023-07-28 14:29:13 64

脚手架（vue-cli）

（一）什么是脚手架

概念：是一种用于快速开发Vue项目的系统架构

优点：能够帮助咱们快速的开发项目

缺点：由于脚手架适用于各种项目的开发，而不是单独的针对某一项目单独研发的，会出现代码冗余

脚手架的使用：

1、安装脚手架vue-cli

全局安装打开cmd运行：cnpminstall-g@vue/cli

2、查看当前版本号：

vue-V

3、创建项目：

根目录下打开cmd运行：vuecreateobjectname项目名称（名称不能有大写）

正文开始

Vue脚手架实现试卷页面功能

将moduleA中的store模块化
在state中放入变量subjectList,通过mutations更新subjectList
在Home.vue中通过mapMutations激活mutations中的getSubjectList，从而更新subjectList

import'@/mock'
exportdefault{
namespaced:true,
state:{
subjectList:[]
},
mutations:{
getSubjectList(state,payload){
state.subjectList=payload
}
}
}

store/index.js
importVuexfrom'vuex'
importVuefrom'vue'
Vue.use(Vuex)
importuserfrom'./modules/user'
importmoduleAfrom'./modules/moduleA'
letstore=newVuex.Store({
modules:{
moduleA
}
})
exportdefaultstore

Home.vue

fmtSubjectType，fmtOrder2ABC为过滤器，checkSubjectType为方法，统一放在Vue.mixin中，保存在mixin中的index.js文件中

通过checkSubjectType方法的结果真假控制此div是否存在


.main{
border:1pxsolidred;
.item{
padding:20px10px;
border-bottom:1pxsolid#ccc;
}
}

mixin/index.js
通过切换BASE_URL来切换接口，axios中的url是通过 BASE_URL拼接的

importaxiosfrom'axios'
importVuefrom'vue'
import{BASE_URL}from'@/config'
import{SUBJECT_TYPE}from'@/config/enum'
Vue.mixin({
methods:{
async$get(url,params){
let{data}=awaitaxios.get(BASE_URL+url,{params})
returndata
},
checkSubjectType(type){
returntype===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'
constBASE_URL_BEF=''
constBASE_URL_PRO='XXX'
constBASE_URL_DEV='PPPP'
constMODE=MODE_TYPE.BEF
exportconstBASE_URL=[BASE_URL_BEF,BASE_URL_PRO,BASE_URL_DEV][MODE]

config/enum.js

鉴于魔法数字的缘故，通过如下，使代码更清晰

//枚举
exportconstMODE_TYPE={
BEF:0,
PRO:1,
DEV:2
}
exportconstSUBJECT_TYPE={
DANXUAN:0,
DUOXUAN:1,
PANDUAN:2,
JIANDA:3
}

mock/index.js

通过mock伪造数据

importMockfrom'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脚手架实现试卷页面的文章就介绍到这了,更多相关Vue脚手架实现试卷页面内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue脚手架编写试卷页面功能

{{i+1}}.[{{item.type|fmtSubjectType}}]{{item.title}}

随机推荐

Vue脚手架编写试卷页面功能

{{i+1}}.[{{item.type|fmtSubjectType}}]{{item.title}}

热门推荐

随机推荐