H5小游戏开发教程之页面基础布局的开发

这篇文章我们来完成页面基础布局的游戏开发。

先给大家看下本篇文章我们实现的开发开界面，如下图所示：

首先，教程局在components文件夹创建10个文件夹，面基分别是础布：2048，llk，游戏maze，开发开mine，教程局pintu，面基snake，础布sudoku，游戏tetris，开发开wzq，教程局xxk;然后，面基再创建一个index.js文件;然后，云服务器础布在刚才创建的10个文件夹中分别创建一个Index.vue文件，该文件的内容类似这样如下代码，其中2048是所属文件夹名字，目前该代码仅用于占位，以后将被我们真正可玩的游戏取代。

2048

.page-home {

&_games {

border-radius: 4px;

background-color: #fff;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);

}

&_game-item {

&:not(:last-child) {

border-bottom: 1px solid #dcdee2;

}

a {

display: block;

padding: 10px;

color: #515a6e;

transition: background-color .2s;

&:hover {

background-color: #f5f5f5;

}

}

}

}

然后，打开views文件夹下的Game.vue文件，替换为如下代码。在Vue3中，component组件的is属性如果绑定的值为异步组件，源码库则必须将异步组件加载器传入defineAsyncComponent函数，将defineAsyncComponent函数的返回值绑定到is属性，否则，直接绑定异步组件加载器的话，将什么都渲染不出来，而且还会抛出警告;在该路由组件中，我们通过路由参数id来渲染不同的游戏;

import { computed, defineAsyncComponent } from vue

import { useRoute } from vue-router

import { getGame } from ../components

import UiLayout from ../layouts/Main.vue

const route = useRoute()

const game = computed(() => getGame(route.params.id))

const gameComponent = computed(() => defineAsyncComponent(game.value.component))

感谢阅读!以上就是我们本篇文章的全部内容，这些代码是不是很简单呢?童鞋们阅读起来是不是很轻松?