项目演示

项目源码

配套讲解视频

教程说明

本教程适合对Vue基础知识有一点了解，但不懂得综合运用，还未曾使用Vue从头开发过一个小型App的读者。本教程不对所有的Vue知识点进行讲解，而是手把手一步步从0到1，做出一个完整的小项目。目前网上的教程不是只有零散的知识点讲解；就是抛出一个开源的大项目，初级读者下载下来后，运行起来都很费劲，更谈不上理解这个项目是如何一步步开发出来的了。本教程试图弥补这个空白。

1. 项目初始化

1.1使用 Vue CLI 创建项目

如果你还没有安装 VueCLI，请执行下面的命令安装或是升级：

npm install --global @vue/cli

在命令行中输入以下命令创建 Vue 项目：

vue create vue-quiz

Vue CLI v4.3.1

? Please pick a preset:

> default (babel, eslint)

Manually select features

default：默认勾选 babel、eslint，回车之后直接进入装包

manually：自定义勾选特性配置，选择完毕之后，才会进入装包

选择第 1 种 default.

安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入：

# 进入你的项目目录

cd vue-quiz

# 启动开发服务

npm run serve

启动成功，命令行中输出项目的 http 访问地址。 打开浏览器，输入其中任何一个地址进行访问

如果能看到该页面，恭喜你，项目创建成功了。

1.2 初始目录结构

项目创建好以后，下面我们来了解一下初始目录结构：

1.3 调整初始目录结构，实现游戏设置页面

默认生成的目录结构不满足我们的开发需求，所以需要做一些自定义改动。

这里主要处理下面的内容：

删除初始化的默认文件

新增调整我们需要的目录结构

删除默认示例文件：

src/components/HelloWorld.vue

src/assets/logo.png

修改package.json，添加项目依赖：

"dependencies": {

"axios": "^0.19.2",

"bootstrap": "^4.4.1",

"bootstrap-vue": "^2.5.0",

"core-js": "^3.6.5",

"vue": "^2.6.11",

"vue-router": "^3.1.5"

},

"devDependencies": {

"@vue/cli-plugin-babel": "~4.4.0",

"@vue/cli-plugin-eslint": "~4.4.0",

"@vue/cli-plugin-router": "~4.4.0",

"@vue/cli-service": "~4.4.0",

"babel-eslint": "^10.1.0",

"eslint": "^6.7.2",

"eslint-plugin-vue": "^6.2.2",

"vue-template-compiler": "^2.6.11"

},

然后运行yarn install,安装依赖。

修改项目入口文件main.js，引入bootstrap-vue。

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import BootstrapVue from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'

import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.productionTip = false

Vue.use(BootstrapVue)

const state = { questions: [] }

new Vue({

router,

data: state,

render: h => h(App)

}).$mount('#app')

定义一个state对象来共享答题数据(答题页面和结果页面共享)

const state = { questions: [] }

src目录下新增eventBus.js消息总线，用来在组件间传递消息，代码如下：

import Vue from 'vue'

const EventBus = new Vue()

export default EventBus

修改App.vue，css样式略，请参考源码。

import EventBus from './eventBus'

import Navbar from './components/Navbar'

export default {

name: 'app',

components: {

Navbar

},

data() {

return {

errorMessage: '',

dismissSecs: 5,

dismissCountdown: 0

}

},

methods: {

showAlert(error) {

this.errorMessage = error

this.dismissCountdown = this.dismissSecs

}

},

mounted() {

EventBus.$on('alert-error', (error) => {

this.showAlert(error)

})

},

beforeDestroy() {

EventBus.$off('alert-error')

}

}

新增components/Navbar.vue，定义导航部分。

Vue-Quiz

New Game

About

export default {

name: 'Navbar'

}

src目录下新增router/index.js，定义首页路由。

import Vue from 'vue'

import VueRouter from 'vue-router'

import MainMenu from '../views/MainMenu.vue'

Vue.use(VueRouter)

const routes = [

{

name: 'home',

path: '/',

component: MainMenu

}

]

const router = new VueRouter({

mode: 'history',

base: process.env.BASE_URL,

routes

})

export default router

src下新增views/MainMenu.vue，MainMenu主要包含GameForm组件。

import GameForm from '../components/GameForm'

export default {

name: 'MainMenu',

components: {

GameForm

},

methods: {

/** Triggered by custom 'form-submitted' event from GameForm child component.

* Parses formData, and route pushes to 'quiz' with formData as query

* @public

*/

handleFormSubmitted(formData) {

const query = formData

query.difficulty = query.difficulty.toLowerCase()

this.$router.push({ name: 'quiz', query: query })

}

}

}

新增src/components/GameForm.vue，实现游戏初始设置。

import LoadingIcon from './LoadingIcon'

import axios from 'axios'

export default {

components: {

LoadingIcon

},

data() {

return {

// Form data, tied to respective inputs

form: {

number: '',

category: '',

difficulty: '',

type: ''

},

// Used for form dropdowns and number input

categories: [{ text: 'Category', value: '' }],

difficulties: [{ text: 'Difficulty', value: '' }, 'Easy', 'Medium', 'Hard'],

types: [

{ text: 'Type', value: '' },

{ text: 'Multiple Choice', value: 'multiple' },

{ text: 'True or False', value: 'boolean'}

],

minQuestions: 10,

maxQuestions: 20,

// Used for displaying ajax loading animation OR form

loading: true

}

},

created() {

this.fetchCategories()

},

methods: {

fetchCategories() {

axios.get('https://opentdb.com/api_category.php')

.then(resp => resp.data)

.then(resp => {

resp.trivia_categories.forEach(category => {

this.categories.push({text: category.name, value: `${category.id}`})

});

this.loading = false;

})

},

onSubmit(evt) {

evt.preventDefault()

/** Triggered on form submit. Passes form data

* @event form-submitted

* @type {number|string}

* @property {object}

*/

this.$emit('form-submitted', this.form)

}

}

}

GameForm组件，主要通过axios发起获取全部题目分类请求：

axios.get('https://opentdb.com/api_category.php')

新增src/components/LoadingIcon.vue，在异步请求数据未返回时，渲染等待图标。

export default {

name: 'LoadingIcon'

}

新增src/assets/ajax-loader.gif等待动画文件，请参考项目源码。

1.4 运行项目

yarn run serve

2. 答题页面开发

2.1 修改路由

修改router/index.js：

import Vue from 'vue'

import VueRouter from 'vue-router'

import MainMenu from '../views/MainMenu.vue'

import GameController from '../views/GameController.vue'

Vue.use(VueRouter)

const routes = [

{

name: 'home',

path: '/',

component: MainMenu

}, {

name: 'quiz',

path: '/quiz',

component: GameController,

props: (route) => ({

number: route.query.number,

difficulty: route.query.difficulty,

category: route.query.category,

type: route.query.type

})

}

]

const router = new VueRouter({

mode: 'history',

base: process.env.BASE_URL,

routes

})

export default router

2.2 答题页面

新增views/GameController.vue

本页面是本项目最重要的模块，展示问题，和处理用户提交的答案，简单解析一下：

1.fetchQuestions函数通过请求远程接口获得问题列表。

2.setQuestions保存远程回应的问题列表到本地数组。

3.onAnswerSubmit处理用户提交的选项，调用nextQuestion函数返回下一问题。

import EventBus from '../eventBus'

import ShuffleMixin from '../mixins/shuffleMixin'

import Question from '../components/Question'

import LoadingIcon from '../components/LoadingIcon'

import axios from 'axios'

export default {

name: 'GameController',

mixins: [ShuffleMixin],

props: {

/** Number of questions */

number: {

default: '10',

type: String,

required: true

},

/** Id of category. Empty string if not included in query */

category: String,

/** Difficulty of questions. Empty string if not included in query */

difficulty: String,

/** Type of questions. Empty string if not included in query */

type: String

},

components: {

Question,

LoadingIcon

},

data() {

return {

// Array of custom question objects. See setQuestions() for format

questions: [],

currentQuestion: {},

// Used for displaying ajax loading animation OR form

loading: true

}

},

created() {

this.fetchQuestions()

},

methods: {

/** Invoked on created()

* Builds API URL from query string (props).

* Fetches questions from API.

* "Validates" return from API and either routes to MainMenu view, or invokes setQuestions(resp).

* @public

*/

fetchQuestions() {

let url = `https://opentdb.com/api.php?amount=${this.number}`

if (this.category) url += `&category=${this.category}`

if (this.difficulty) url += `&difficulty=${this.difficulty}`

if (this.type) url += `&type=${this.type}`

axios.get(url)

.then(resp => resp.data)

.then(resp => {

if (resp.response_code === 0) {

this.setQuestions(resp)

} else {

EventBus.$emit('alert-error', 'Bad game settings. Try another combination.')

this.$router.replace({ name: 'home' })

}

})

},

/** Takes return data from API call and transforms to required object setup.

* Stores return in $root.$data.state.

* @public

*/

setQuestions(resp) {

resp.results.forEach(qst => {

const answers = this.shuffleArray([qst.correct_answer, ...qst.incorrect_answers])

const question = {

questionData: qst,

answers: answers,

userAnswer: null,

correct: null

}

this.questions.push(question)

})

this.$root.$data.state = this.questions

this.currentQuestion = this.questions[0]

this.loading = false

},

/** Called on submit.

* Checks if answer is correct and sets the user answer.

* Invokes nextQuestion().

* @public

*/

onAnswerSubmit(answer) {

if (this.currentQuestion.questionData.correct_answer === answer) {

this.currentQuestion.correct = true

} else {

this.currentQuestion.correct = false

}

this.currentQuestion.userAnswer = answer

this.nextQuestion()

},

/** Filters all unanswered questions,

* checks if any questions are left unanswered,

* updates currentQuestion if so,

* or routes to "result" if not.

* @public

*/

nextQuestion() {

const unansweredQuestions = this.questions.filter(q => !q.userAnswer)

if (unansweredQuestions.length > 0) {

this.currentQuestion = unansweredQuestions[0]

} else {

this.$router.replace({ name: 'result' })

}

}

}

}

新增srcmixinsshuffleMixin.js

打乱问题答案，因为远程返回的答案有规律。mixins是混入的意思，可以混入到我们的某个页面或组件中，补充页面或组件功能，便于复用。

const ShuffleMixin = {

methods: {

shuffleArray: (arr) => arr

.map(a => [Math.random(), a])

.sort((a, b) => a[0] - b[0])

.map(a => a[1])

}

}

export default ShuffleMixin

新增src/components/Question.vue

import QuestionBody from './QuestionBody'

export default {

name: 'Question',

props: {

/** Question object containing questionData, possible answers, and user answer information. */

question: {

required: true,

type: Object

}

},

components: {

QuestionBody

},

data() {

return {

answer: null

}

},

methods: {

onSubmit(evt) {

evt.preventDefault()

if (this.answer) {

/** Triggered on form submit. Passes user answer.

* @event answer-submitted

* @type {number|string}

* @property {string}

*/

this.$emit('answer-submitted', this.answer)

this.answer = null

}

}

}

}

新增src/components/QuestionBody.vue

export default {

name: 'QuestionBody',

props: {

/** Object containing question data as given by API. */

questionData: {

required: true,

type: Object

}

},

data() {

return {

variants: { easy: 'custom-success', medium: 'custom-warning', hard: 'custom-danger', default: 'custom-info' },

variant: 'custom-info'

}

},

methods: {

/** Invoked on mounted().

* Sets background color of card header based on question difficulty.

* @public

*/

setVariant() {

switch (this.questionData.difficulty) {

case 'easy':

this.variant = this.variants.easy

break

case 'medium':

this.variant = this.variants.medium

break

case 'hard':

this.variant = this.variants.hard

break

default:

this.variant = this.variants.default

break

}

}

},

mounted() {

this.setVariant()

}

}

Simple component displaying question category, difficulty and question text.

Used on both Question component and Answer component.

运行：

yarn run serve

启动成功:

如果能看到该页面，恭喜你，项目到此成功了。

2.3 至此项目目录结构

如果你走丢，请下载源码进行对比：

3 实现最终结果展示页面

再次修改router/index.js

import Vue from 'vue'

import VueRouter from 'vue-router'

import MainMenu from '../views/MainMenu.vue'

import GameController from '../views/GameController.vue'

import GameOver from '../views/GameOver'

Vue.use(VueRouter)

const routes = [

...

{

name: 'result',

path: '/result',

component: GameOver

}

]

...

新增src/views/GameOver.vue：

import Answer from '../components/Answer'

export default {

name: 'GameOver',

components: {

Answer

},

data() {

return {

questions: [],

score: 0,

maxScore: 0

}

},

methods: {

/** Invoked on created().

* Grabs data from $root.$data.state.

* Empties $root.$data.state => This is done to ensure data is cleared when starting a new game.

* Invokes setScore().

* @public

*/

setQuestions() {

this.questions = this.$root.$data.state || []

this.$root.$data.state = []

this.setScore()

},

/** Computes maximum possible score (amount of questions * 10)

* Computes achieved score (amount of correct answers * 10)

* @public

*/

setScore() {

this.maxScore = this.questions.length * 10

this.score = this.questions.filter(q => q.correct).length * 10

}

},

created() {

this.setQuestions();

}

}

新增srccomponentsAnswer.vue

import QuestionBody from './QuestionBody'

export default {

name: 'Answer',

props: {

/** Question object containing questionData, possible answers, and user answer information. */

question: {

required: true,

type: Object

}

},

components: {

QuestionBody

}

}

.answer-card >>> .card-header {

border-radius: 0;

}

3.1 运行项目

yarn run serve

3.2 项目结构

项目总结

很感谢您和豆约翰走到了这里，至此我们一个小型的Vue项目，全部开发完毕，下一期，豆约翰会带大家见识一个中型的项目，咱们循序渐进，一起加油。

本系列文章首发于作者的微信公众号[豆约翰]，想尝鲜的朋友，请微信搜索关注。

有什么问题也可以加我微信[tiantiancode]一起讨论。

最后

为了将来还能找到我