編寫第一個組件 面板
我們要開始寫掃雷遊戲了，此時需要刪掉自動創建的一些文件，加上我們自己創建的新文件。
在這之前，可以看看 src/App.vue 以及 src/components/HelloWord.vue ，結合前一節說到的組件結構和用法，加深一些瞭解。
好了，開始吧，先使用 vs code 打開項目目錄吧。
不要忘記通過命令 npm run serve 啟動服務器
一些準備工作
到 src/components 目錄創建文件 Board.vue，並填上以下代碼
<template>
/<template>
此時，創建了一個名叫 Board 的單文件 Vue 組件。
board，表示掃雷遊戲的整個區域。
打開文件 src/App.vue，長這樣的，將原來的 HelloWord.vue 組件的引用，替換成 Board.vue 的引用
<template>
<board>
/<template>
後面，我們整個遊戲的開發都會在 Board.vue 組件中進行。
準備數據結構
首先定義一下數據結構，掃雷的行列數據，最簡單就是使用二維數組來存放了，所以？那就創建一個二維數組 data 來存放吧。第一維表示雷區的行，第二維表示雷區的列就行了。
然後，一般的掃雷遊戲都有個難度等級吧，我們就用 level 來表示好了，這是一個數值，值越大表示難度越大，設置個默認難度為 1。
默認難度為 1 了，那麼再默認一個雷的數量 mineCount 吧，就設置為 9 好了
再想想，還需要定義雷區的尺寸，也就是需要幾行幾列 size (使行列數相同)，就都設置為 9 吧
export default {
data() {
return {
// 使用 data 作為掃雷的數據存儲
data: [],
level: 1,
mineCount: 9,
size: 9
}
}構建佈局/樣式
既然是掃雷遊戲，那麼總得有個區域吧，看起來每個雷區都是一個格子，這樣的佈局，不正是表格擅長的嗎？
Board.vue 模板如下
<template>
<table>
{{i}}-{{j}}
/<table>
/<template>
在此，使用 {{i}}-{{j}} 將行和列的值都給顯示在了界面上。
不曉得你有沒有注意到，size 是個數值，在使用 i in size這樣的寫法時，得到的 i 是從 1 開始的，其結果也包含了 size 的最大值 9
保存後，界面會自動更新，顯示如圖
此時會發現，生成的表格沒有邊框，很難分清單元格的邊界在哪裡。所以，寫點樣式吧
<style><br> table {<br> border: 1px solid #aaaaaa;<br> border-collapse: collapse;<br> }<br> td {<br> border: 1px solid #aaaaaa;<br> padding: 5px;<br> }<br>/<style>顯示效果如下
生成掃雷數據
生成掃雷數據的詳細算法以及過程參見源碼 src/component/Board.vue 中的方法
生成後的數據，被填充到了 data 中，現在，改造一下模板，使其能直接顯示這些數據
<template>
<table>
雷
{{cell.count}}
/<table>
/<template>
顯示效果如下
本節完
閱讀更多 前端小李 的文章
