vue3项目案例生成随机数九宫格

Vue3是一种流行的JavaScript框架，用于构建用户界面。下面是一个生成随机数九宫格的Vue3项目案例：

首先，你需要创建一个Vue3项目并安装Vue CLI。在终端中运行以下命令来创建一个新的Vue3项目：

vue create random-grid

然后选择默认配置或者根据你的需求进行配置。

接下来，进入项目目录并安装一些必要的依赖：

cd random-grid
npm install --save vue@next
npm install --save vue-router@next

在src目录下创建一个名为`RandomGrid.vue`的组件文件，并添加以下代码：

<template>
  <div>
    <button @click="generateGrid">Generate Grid</button>
    <div class="grid">
      <div v-for="(number, index) in grid" :key="index" class="grid-item">
        {{ number }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      grid: [],
    };
  },
  methods: {
    generateGrid() {
      this.grid = [];
      for (let i = 0; i < 9; i++) {
        this.grid.push(Math.floor(Math.random() * 10));
      }
    },
  },
};
</script>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  border: 1px solid black;
  padding: 10px;
}
</style>

在`App.vue`中引入`RandomGrid`组件：

<template>
  <div id="app">
    <RandomGrid />
  </div>
</template>

<script>
import RandomGrid from "./RandomGrid.vue";

export default {
  components: {
    RandomGrid,
  },
};
</script>

最后，在`main.js`中添加路由配置：

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [],
});

createApp(App).use(router).mount("#app");

现在你可以运行项目并在浏览器中查看结果：

npm run serve

这个项目会生成一个九宫格，每个格子中显示一个随机数。当你点击"Generate Grid"按钮时，随机数会重新生成。