尝试用Vue.js开发网页小游戏的过程

准备

首先去官方下载并安装VSCODE，下载地址 https://code.visualstudio.com/。安装后打开会发现是英文版的，需要去安装插件来汉化。具体是在扩展插件搜索chinese，选择第一个安装然后重启软件，这样打开就是中文界面了。

网页

去这个网站 https://getbootstrap.com/docs/4.4/examples/album/ 将源代码Copy下来，然后打开VSCODE选择项目文件夹

在你的项目目录新建个src文件夹用来存放源代码，并在src下新建个index.html文件，将复制的代码拷贝进去

如果想要实时看到页面可以在扩展插件中安装个live server作为本地服务器

安装后在回到项目文件夹里的index.html文件，右键选择Open with live server就可以查看了，但是你会发现样式乱了这时候需要去修改一下代码，将代码第15行修改成下面的样子

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

保存后再次打开网页就好了

但是你会发现导航按钮好像不能使用这是因为没用正确的引用js，还需要修改一下代码。替换</body>前面的三个<script>标签，替换代码如下：

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

这样保存之后导航菜单就可以使用了。接下来新建一个img文件夹在src目录，并放入这张图片

再新建一个style.css样式文件在src目录，填入如下内容

#dog, #fox{
    position: absolute;
    font-size: xx-large;
}

#forest{
    background-image: url("./img/forest.jpg");
    height: 160px;
}

span.arrow-key {
    font-size: xx-large;
    cursor: pointer
}

开始

现在正式开始进入Vue开发，这是Vue的开发文档 https://cn.vuejs.org/v2/guide/。在index.html的</body>前面添加

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="custom.js"></script>

代码中custom.js文件需要在项目中自己建一个，接下来替换<div class="album py-5 bg-light">为

<div class="album py-5 bg-light" id="app">

在<div id="forest">...</div>添加如下内容

<span id="dog" :style="{left: dog.x + 'px', top: dog.y + 'px'}">