项目实战——创建菜单与游戏页面（上）

目录

PS：整篇文章全是实现前端的工作，如果大家不了解vue3，建议补一下前置知识~~

一、整体框架

二、实现导航栏

 三、导航栏中实现页面跳转

四、实现地图

五、实现墙体

六、生成障碍物 

---

PS：整篇文章全是实现前端的工作，如果大家不了解vue3，建议补一下前置知识~~

一、整体框架

 

二、实现导航栏

实现导航栏的组件我们可以在 bootstrap 中获得

Bootstrap v5 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 前端工具库。 | Bootstrap 中文网 (bootcss.com)

 在componets 中创建组件 NavBar.vue

在template标签中导入模板

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ texta>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homea>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Featuresa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricinga>
        li>
      ul>
      <span class="navbar-text">
        Navbar text with an inline element
      span>
    div>
  div>
nav>

App.vue中添加 NavBar 组件（App.vue 就是我们的首页页面）

<template>
  <NavBar>NavBar>
  <router-view>router-view>
template>
 
<script>
 
import NavBar from "@/components/NavBar.vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap"
 
export default {
  components:{
    NavBar
  }
}
script>
 
<style>
body {
  background-image: url("./assets/images/background.png");
  background-size: cover;
}
style>

 安装依赖

成功之后的导航栏~ 

 

 三、导航栏中实现页面跳转

由于我们每个页面可能设计很多组件，因此我们每个页面建一个文件夹比较好~

需要用到 5 个界面

pk + record + ranklist + userbots + 404

 这里我启动vue时发生了错误 ： 

解决方法：删掉node_modules,重新cnpm install一下就好了

 

每个页面的模板如下，不同的页面修改div里面的字体就可。

对战的修改对战、对局列表就修改为对局列表等。

<template>
    <div>对战div>
template>
 
<script>
 
script>
 
<style scoped> 
style>

如何把地址和页面产生关联呢？

在router/index.js 中定义~~

import PkIndexView from '../views/pk/PkIndexView'
import RanklistIndexView from '../views/ranklist/RanklistIndexView'
import RecordIndexView from '../views/record/RecordIndexView'
import UserBotIndexView from '../views/user/bot/UserBotIndexView'
import NotFound from '../views/error/NotFound'
 
const routes = [
  {
    path: "/",
    name: "home",
    redirect: "/pk/"
  },
  {
    path: "/pk/",
    name: "pk_index",
    component: PkIndexView,
  },
  {
    path: "/record/",
    name: "record_index",
    component: RecordIndexView,
  },
  {
    path: "/ranklist/",
    name: "ranklist_index",
    component: RanklistIndexView,
  },
  {
    path: "/user/bot",
    name: "user_bot_index",
    component: UserBotIndexView,
  },
  {
    path: "/404/",
    name: "404",
    component: NotFound,
  },
  {
    path: "/:catchAll(.*)",
    redirect: "/404/",
  }
]

这里有个小细节：如果输入了根路径的网址，我们把它重定向到PK页面~~ 如果是一个不存在的网址，我们跳转到404（从上到下匹配，最后的全是404） 

还需要在 NavBar 中更改跳转的路径：

 如何实现 点击不同页面，但不刷新呢？

把 换成  <router-link>  ，按照以下格式

class="nav-link" :to="{name: 'pk_index'}">对战

 每个页面有一部分都是公共的，因此我们把这一部分抽取出来作为一个组件

在Commponents中新建ContentField.vue 组件

 
<script>
 
script>
 
<style scoped>
    div.content-field{
        margin-top: 20px;
    }
style>
 

在不同界面引入组件，比如 PK 界面：

 
 
<script>
import ContentField from '../../components/ContentField'
 
export default {
    components: {
        ContentField
    }
}
script>
 
<style scoped> 
style>

如何实现我们在哪个界面，那个界面上边的标题高亮呢？

 

我们需要添加三元运算符来判断 是否添加 active 属性：