vue 手机端答题页面_从0开始,手把手教你用Vue开发一个答题App01之项目创建及答题设置页面开发...
项目演示
项目源码
配套讲解视频
教程说明
本教程适合对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
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组件。
New Game
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,实现游戏初始设置。
id="input-group-number-of-questions"
label="Select a number"
label-for="input-number-of-questions"
class="text-left"
>
id="input-number-of-questions"
v-model="form.number"
type="number"
:min="minQuestions"
:max="maxQuestions"
required
:placeholder="`Between ${minQuestions} and ${maxQuestions}`"
>
id="input-category"
v-model="form.category"
:options="categories"
>
id="input-difficulty"
v-model="form.difficulty"
:options="difficulties"
>
id="input-type"
v-model="form.type"
:options="types"
>
Submit
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
备注
本系列文章首发于作者的微信公众号[豆约翰],想尝鲜的朋友,请微信搜索关注。
有什么问题也可以加我微信[tiantiancode]一起讨论。
最后,为了将来还能找到我
vue 手机端答题页面_从0开始,手把手教你用Vue开发一个答题App01之项目创建及答题设置页面开发...相关推荐
- vue 手机端答题页面_从0开始,手把手教你用Vue开发一个答题App
项目演示 项目源码 配套讲解视频 教程说明 本教程适合对Vue基础知识有一点了解,但不懂得综合运用,还未曾使用Vue从头开发过一个小型App的读者.本教程不对所有的Vue知识点进行讲解,而是手把手一步 ...
- h5适配华为手机_手机端H5页面适配 踩坑
这两天在公司做手机端H5页面,第一次开发没什么经验,对rem, pt, ppi, dpr这些概念完全不懂,看了很多博客,现总结如下. 对于不同像素宽度的手机,如何做到每一个元素自动缩放? rem: f ...
- 怎么实现手机端网页页面自适应调整
今天分享下"怎么实现手机端网页页面自适应调整"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下 ...
- vue手机端开发聚焦不灵敏
vue手机端开发聚焦不灵敏 前置: 手机端开发时有时使用UI框架中的输入框或者文本域在点击的时候聚焦不是很快速.因为一是有的控件带有动画过度效果,二是移动设备的屏幕点击事件大多会延迟300ms左右才会 ...
- vue手机端布局纵向布局_Vue中的黄金布局集成
vue手机端布局纵向布局 金色的布局 (vue-golden-layout) Integration of the golden-layout to Vue. 将黄金布局整合到Vue. 安装 (Ins ...
- 仿微信手机端支付页面代码可改余额
介绍: 高仿的微信手机端支付页面代码可改余额,就自己看看装个样子,别去骗人啊,哈哈哈哈,穷人只能这样玩玩 网盘下载地址: http://kekewl.org/uGEBzURdmBF0 图片:
- python numpy安装教程_手把手教你搭建机器学习开发环境—Python与NumPy的超简安装教程...
手把手教你搭建机器学习开发环境Python语言是机器学习的基础,所以,想要入门机器学习,配置好Python的开发环境是第一步.本文就手把手的教你配置好基于Python的机器学习开发环境.超简单!第一步 ...
- vue手机端回退_华为官方教程:以 P40 为例,鸿蒙 OS 2.0 Beta 版本回退到 EMUI 11 稳定版...
12月16日,华为举行 HarmonyOS 2.0 手机开发者 Beta 活动.现场正式发布了 HarmonyOS 2.0 手机开发者 Beta 版本.同时,HarmonyOS 2.0 手机开发者 B ...
- vue手机端回退_推荐3个快速开发平台 前后端都有 接私活又有着落了
经常性逛github,发现了一些优秀的开源项目,其中的框架及代码非常不错,现在给大家推荐三个快速开发平台. 第一个就是优秀的Jeecg-boot快速开发平台 前端采用阿里的ant-design-vue ...
最新文章
- CPU,GPU,Memory调度
- simplexmlelement类设置编码_「软帝学院」:2019java五大常用工具类整理
- Bzoj 2152: 聪聪可可(点分治)
- Cs231n课堂内容记录-Lecture2-Part2 线性分类
- (62)SPI外设驱动协议(一)(第13天)
- 反射实现方法调用(1):执行机制
- java人账户atm模拟存款,模拟银行ATM系统(基础版)
- 网管员常用工具(一)
- 纯前端html导出pdf(jsPDF.js)-分页-不分页
- 数据库(mysql、oracle、sqlserver)单表sqlserver
- 【axure手机原型】Axure实现iPhone推动切换效果
- detach()函数理解
- GEE(python)雨天Gini指数
- 2055041-21-7,Acid-PEG4-S-PEG4-acid在EDC和HATU等活化剂存在下,羧酸基团可与伯胺反应
- B端产品的筛选场景调研与设计优化实践
- 在终端下调用IGV进行截图
- 6p14推挽胆机20w功放电路图_6P14推挽双输出牛胆机
- Python调用pywin32模拟触屏滑动 刷宝视频,自动刷视频python
- 什么是sku转载网上,备忘一个业务知识
- Python爬虫实战四 | 盘搜搜1.2-网盘搜索神器开源
热门文章
- 部署vue项目到阿里云服务器
- HS6621系列低功耗国产蓝牙芯片 支持蓝牙5.1
- HTTPS 证书免费续费操作流程
- 使用计算机完成怎样的工作计划,电脑上使用便签记录工作计划如何设置闹钟定时提醒?...
- 每节课都是一个项目 手把手用STM32打造联网气象站-10-带有屏幕显示的番茄时钟
- 人民币(¥)符号在html中的显示
- 树莓派——配置Linux内核适合树莓派
- 社工计算机操作考试时间,社工证每年什么时间考试
- 3.1.1 存储器的分类3.1.2. 存储器的性能指标
- SPOJ7258--SUBLEX(SAM)