Vue腳手架編寫試卷頁面功能
腳手架(vue-cli)
?。ㄒ唬┦裁词悄_手架
概念:是一種用于快速開發(fā)Vue項目的系統(tǒng)架構
優(yōu)點:能夠幫助咱們快速的開發(fā)項目
缺點:由于腳手架適用于各種項目的開發(fā),而不是單獨的針對某一項目單獨研發(fā)的,會出現(xiàn)代碼冗余
腳手架的使用:
1、安裝腳手架 vue-cli
全局安裝打開cmd運行:cnpm install -g @vue/cli
2、查看當前版本號:
vue -V
3、創(chuàng)建項目:
根目錄下打開cmd運行:vue create objectname
項目名稱(名稱不能有大寫)
正文開始
Vue腳手架實現(xiàn)試卷頁面功能
將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
為方法,統(tǒng)一放在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
鑒于魔法數(shù)字的緣故,通過如下,使代碼更清晰
//枚舉 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偽造數(shù)據(jù)
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腳手架實現(xiàn)試卷頁面的文章就介紹到這了,更多相關Vue腳手架實現(xiàn)試卷頁面內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue 監(jiān)聽鍵盤回車事件詳解 @keyup.enter || @keyup.enter.native
今天小編就為大家分享一篇vue 監(jiān)聽鍵盤回車事件詳解 @keyup.enter || @keyup.enter.native,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08淺談vue中關于checkbox數(shù)據(jù)綁定v-model指令的個人理解
這篇文章主要介紹了淺談vue中關于checkbox數(shù)據(jù)綁定v-model指令的個人理解,v-model用于表單的數(shù)據(jù)綁定很常見,下面就來詳細的介紹一下2018-11-11vue 中this.$set 動態(tài)綁定數(shù)據(jù)的案例講解
這篇文章主要介紹了vue 中this.$set 動態(tài)綁定數(shù)據(jù)的案例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01Vue 父子組件實現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式(案例代碼)
本文給大家分享Vue 父子組件實現(xiàn)數(shù)據(jù)雙向綁定效果的兩種方式,方式一是通過監(jiān)聽事件實現(xiàn)方式二是通過 v-model 實現(xiàn),每種方式結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2022-11-11利用vue+elementUI實現(xiàn)部分引入組件的方法詳解
這篇文章主要給大家介紹了關于利用vue+elementUI實現(xiàn)部分引入組件的相關資料,以及介紹了vue引入elementUI報錯的解決方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面隨著小編來一起學習學習吧。2017-11-11vue使用動態(tài)組件手寫Router View實現(xiàn)示例
這篇文章主要為大家介紹了vue使用動態(tài)組件手寫RouterView實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-06-06