脚手架是一种用于快速开发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 storeHome.vue
fmtSubjectType，fmtOrder2ABC为过滤器，checkSubjectType为方法，统一放在Vue.mixin中，保存在mixin中的index.js文件中
通过checkSubjectType方法的结果真假控制此div是否存在
{{i+1}}.[{{item.type|fmtSubjectType}}] {{item.title}}
{{item.author}}{{item.createDate}}答案:{{item.answer}}解析:{{item.desc}}
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脚手架编写试卷页面功能的详细内容，更多请关注0133技术站其它相关文章！
