蝙蝠岛资源网 Design By www.hbtsch.com
脚手架(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"> <h4>{{i+1}}.[{{item.type|fmtSubjectType}}] {{item.title}}</h4> <div style="color:#888;font-size:14px"> {{item.author}}{{item.createDate}} </div> <fieldset style="padding:0 10px;" 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)' } ] })
总结
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无Vue脚手架编写试卷页面功能的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]