这篇文章主要介绍了Vue脚手架如何编写试卷页面功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
Vue是什么 Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
<强>脚手架(vue-cli)
(一)什么是脚手架
概念:是一种用于快速开发Vue项目的系统架构
优点:能够帮助咱们快速的开发项目
缺点:由于脚手架适用于各种项目的开发,而不是单独的针对某一项目单独研发的,会出现代码冗余
<强>脚手架的使用:
1,安装脚手架vue-cli
全局安装打开cmd运行:<代码> cnpm安装- g @vue/cli
2,查看当前版本号:Vue - v
3,创建项目:
根目录下打开cmd运行:<代码> Vue创建对象名>
<强>正文开始
Vue脚手架实现试卷页面功能
将moduleA中的存储模块化
在状态中放入变量<代码> subjectList> 在家里。vue中通过<代码> mapMutations 激活中突变的<代码> getSubjectList> import & # 39; @/模拟# 39;
export default {
名称空间:大敌;的确,
,状态:{
,subjectList: []
},
,突变:{
,getSubjectList(状态,有效负载),{
state.subjectList =,才能有效载荷
,}
,}
} 存储/index.js
import Vuex 得到& # 39;vuex& # 39;
import Vue 得到& # 39;vue # 39;
Vue.use (Vuex)
import user 得到& # 39;。/模块/用户# 39;
import moduleA 得到& # 39;。/模块/moduleA& # 39;
let store =new Vuex.Store ({
,模块:{
,moduleA
,}
}）
export default 商店 Home.vue
fmtSubjectType, fmtOrder2ABC为过滤器,<代码> checkSubjectType>
通过checkSubjectType方法的结果真假控制此div是否存在
& lt; template>
,& lt; div 类=癿ain"比;
,& lt; ul>
,& lt; li 类=癷tem", v=?我)项目,,,拷贝subjectList",:关键=拔冶?
,& lt; h5> {{i + 1}}。[{{item.type | fmtSubjectType}}), {{item.title}} & lt;/h5>
,& lt; div 比;
,,{{item.author}} {{item.createDate}}
,& lt;/div>
,& lt; fieldset v=癱heckSubjectType (item.type)“比;
,& lt;才能legend 的在选项& lt;/legend>
& lt;才能div v=?选择,,j),拷贝item.choice",:关键=癹"比;
,,{{j | fmtOrder2ABC}}, {{choice.answer}}
& lt;才能/div>
,& lt;/fieldset>
,& lt; div v=癱heckSubjectType (item.type)“在答案:{{item.answer}} & lt;/div>
,,& lt; div 的在解析:{{item.desc}} & lt;/div>
,& lt;/li>
,& lt;/ul>
,& lt;/div>
& lt;/template> & lt; script>
import & # 39; @/模拟# 39;
import {createNamespacedHelpers},得到& # 39;vuex& # 39;
let {mapState, mapMutations mapActions}=, createNamespacedHelpers (& # 39; moduleA& # 39;)
export default {
,async 创建(),{
,let {subjectList},=, await 这让美元。(& # 39;/subjectList& # 39;
,this.getSubjectList (subjectList),
},
,计算:{
,……mapState ([& # 39; subjectList& # 39;])
},
,方法:{
,……mapMutations ([& # 39; getSubjectList& # 39;]),
,}
};
& lt;/script> & lt; style scoped lang=& # 39; scss # 39;比;
.main {
,边界:1 px solid 红色;
,.item {
,填充:20 px 10 px;
,边界底部:1 px solid # ccc;
,}
}
& lt;/style> mixin/index.js
通过切,换BASE_URL来切换接口,axios中的url是通过,BASE_URL拼接的
import axios 得到& # 39;axios& # 39;
import Vue 得到& # 39;vue # 39;
{},BASE_URL import 得到& # 39;@/配置# 39;
import {SUBJECT_TYPE},得到& # 39;@/config/enum # 39;
Vue.mixin ({
,方法:{
,async 得到美元(url, params) {
let 才能{数据},=,await axios.get (BASE_URL + url, {params})
,return 数据
},
,checkSubjectType(类型){
return 类型===才能SUBJECT_TYPE.DANXUAN | |===SUBJECT_TYPE.DUOXUAN类型
,}
},
,过滤器:{
,fmtSubjectType (val) {
return 才能;[& # 39;单选题& # 39;,,& # 39;多选题& # 39;,,& # 39;判断题& # 39;,,& # 39;简答题& # 39;](val)
},
,fmtOrder2ABC (val), {
return 才能;& # 39;ABCDEFGHIJKLMNOPQRSTUVWXYZ& # 39; (val)
,}
},
,数据(){
,return {
SUBJECT_TYPE才能
,}
},
})
