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'bootstrap项目
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
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.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: v.BASE_URL,
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 = LowerCase()
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"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。