上篇文章我们完成了基础项目搭建，童鞋们都跟着教程完成了吗？没完成的童鞋们可以阅读上篇文章，先搭建好基础项目；这篇文章我们来完成页面基础布局的开发 。
先给大家看下本篇文章我们实现的界面，如下图所示：
首先，在components文件夹创建10个文件夹，分别是：2048，llk，maze，mine，pintu，snake，sudoku，tetris，wzq，xxk；然后，再创建一个index.js文件；然后，在刚才创建的10个文件夹中分别创建一个Index.vue文件，该文件的内容类似这样如下代码，其中2048是所属文件夹名字，目前该代码仅用于占位，以后将被我们真正可玩的游戏取代 。
<template>
<div>
2048
</div>
</template>
<script setup>
</script>
<style lang="scss">
</style>
现在，我们在components文件夹下的index.js文件中写下如下代码，代码都很简单，童鞋们都能看懂吧？我在JS中喜欢使用文档注释，文档注释可以使编辑器的语法提示更智能，编写代码不易出错，对文档注释不熟悉的童鞋们可以搜索一下jsdoc，学习一下文档注释的语法；下面的文档注释都添加了描述，希望童鞋们都能理解 。
/**
* @typedef Game 定义一个类型，我们叫它游戏类型
* @property {string} name 声明一个属性name，游戏的名字
* @property {import('vue').AsyncComponentLoader} component 异步组件加载器
*/
/** @type {object.<string, Game>} 声明类型一个对象类型，属性名为字符串，值为游戏类型 */
export const gameMap = {
2048: {
name: '2048',
component: () => import('./2048/Index.vue')
},
llk: {
name: '连连看',
component: () => import('./llk/Index.vue')
},
maze: {
name: '走出迷宫',
component: () => import('./maze/Index.vue')
},
mine: {
name: '扫雷',
component: () => import('./mine/Index.vue')
},
pintu: {
name: '拼图',
component: () => import('./pintu/Index.vue')
},
snake: {
name: '贪吃蛇',
component: () => import('./snake/Index.vue')
},
sudoku: {
name: '数独',
component: () => import('./sudoku/Index.vue')
},
tetris: {
name: '俄罗斯方块',
component: () => import('./tetris/Index.vue')
},
wzq: {
name: '五子棋',
component: () => import('./wzq/Index.vue')
},
xxk: {
name: '消消看',
component: () => import('./xxk/Index.vue')
}
}
/**
* @param {string} id 声明一个参数：游戏ID
* @returns {Game} 声明返回值类型：游戏
*/
export const getGame = id => gameMap[id]
现在，我们在src文件夹创建一个文件夹layouts，该文件夹用于存放布局组件，我们在该文件夹创建一个Main.vue文件，该组件定义了2个prop：title用于定义头部显示的标题，hasBack用于定义是否包含返回按钮，我们在main标签下定义了一个slot插槽，该插槽用于渲染游戏；本系列教程重点是JS部分，HTML和CSS都比较简单，我假装童鞋们都懂，就不多讲了；该文件源码如下：
<template>
<div :class="cls">
<header :class="`${cls}_header`">
<span v-if="hasBack" :class="`${cls}_btn-back`" @click="goBack">< 后退</span>
<div :class="`${cls}_title`">{{ title }}</div>
推荐阅读
- 笔记本电脑打游戏画质差怎么解决
- 原神林间寻游网页链接 林间寻游活动地址
- 艾尔登法环游戏攻略，艾尔登法环是什么游戏
- 少年群侠录 少年群侠传攻略
- 一拳超人主机游戏 一拳超人怎么联机
- 华为手机怎么关闭广告推送 华为手机怎么关闭开发者模式
- 养信鸽怎么能赚钱 玩游戏怎么能赚钱
- 辐射避难所新手攻略
- 如何把手机浏览器中网页放在桌面
- 腾讯现在什么游戏最火 什么游戏最火