vue 手机端答题页面_从0开始，手把手教你用Vue开发一个答题App

项目演示

项目源码

配套讲解视频

微信小程序版

教程说明

本教程适合对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样式略，请参考源码。

{ { errorMessage }}

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

ex