Vue脚手架构建试卷页面指南

2023-11-26 16:35:11

构建试卷页面的步骤

创建Vue项目

vue create vue-quiz-app

安装Vuex

npm install vuex

创建store

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    subjectList: []
  },
  mutations: {
    updateSubjectList (state, payload) {
      state.subjectList = payload
    }
  }
})

export default store

在组件中使用store

src/components/Home.vue

<template>
  <div>
    <ul>
      <li v-for="subject in subjectList" :key="subject.id">{{ subject.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState([
      'subjectList'
    ]),
  },
  methods: {
    ...mapMutations([
      'updateSubjectList'
    ]),
  },
  created () {
    this.fetchSubjectList()
  },
  methods: {
    fetchSubjectList () {
      // fetch data from API and update the store
      this.updateSubjectList([
        { id: 1, name: 'Math' },
        { id: 2, name: 'Science' },
        { id: 3, name: 'English' }
      ])
    }
  }
}
</script>

在HTML和CSS中添加样式

src/App.vue

<template>
  <div id="app">
    <Home />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin-right: 10px;
}
</style>