阿望教你用vue写扫雷小游戏

生成项目

避免vue新手不知如何下手，那就从建项目开始吧，环境安装我就不讲了，脚手架也是要有的

第一步，初始化lovesweeping工程（阿望不喜欢地雷，喜欢小桃心）

项目很小，不需要路由，不需要vuex，即可完成，只带了sass，连eslint都可以不要，看官们可以根据自己的喜好建项目

项目生成之后，helloworld就可以删掉了，它的存在并没有什么意义

文件切分

这一步主要是构建工程结构，简单画一下主要的几个文件

- src
 - components
  - SelectLevel.vue [新增，难度选择组件]  - LoveSweeping.vue [新增，游戏界面组件] - App.vue [父组件，负责组件间的切换和某些数据传递] - main.js
- package.json

好，初步认识了项目结构以后，咱把该新建的建好，可以不加东西，不报错就行

然后就是把组件间的切换代码写好，再来一步步的填充代码

难度选择

这一步很简单，首先画好难度选择的页面，难度可以自己设置，你觉得合理就行，我这里的数据格式是这样的，用一个对象表示一个难度等级，对象中包含了难度描述，以及难度设置，设置中包含了格子横排数，格子纵排数，雷数

// 难度
 level: [
  {
   text: '青铜', // 难度描述
   value: [9, 9, 10] // 格子横排数，格子纵排数，雷数
  }, {
   text: '黄金',
   value: [12, 9, 20] ]

然后模板中直接渲染列表，这样做的好处是，想要增加难度直接在数组中添加数据即可

<li v-for="(item, index) in level" :key="index" @click="handleChoseLevel(item.value)"></li>

该组件中只有一个方法：选择难度之后，跳转到游戏主界面上去，因为项目没有用路由，直接使用组件间的切换，所以，这个方法只负责告诉父组件，我已经选择好难度了，可以开始游戏了

// 选择难度
 handleChoseLevel(level) {
  this.$emit("chose-level", level);
 }

代码如下：

界面长这样，当然，你要觉得难看自己换个样式也行