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之项目创建及答题设置页面开发...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 11月总结#nobody
- 下一篇： vue 动态设置 echarts 画布大