項目演示

項目源碼

配套講解視頻

教程說明

本教程適合對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之项目创建及答题设置页面开发...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。