用vue写一个王者荣耀英雄页面

好的，首先需要安装Vue CLI，可以使用以下命令进行安装：

npm install -g @vue/cli

然后可以使用以下命令创建一个新的Vue项目：

vue create my-project

进入项目目录，使用以下命令启动本地开发服务器：

npm run serve

现在我们开始创建王者荣耀英雄页面。首先需要准备好英雄数据，可以从官网或其他网站上获取，这里为了简单起见，我们使用静态数据。在src目录下创建一个data目录，然后创建一个heroes.js文件：

export const heroes = [
  {
    id: 1,
    name: '鲁班七号',
    avatar: 'https://game.gtimg.cn/images/yxzj/img201606/heroimg/112/112.jpg'
  },
  {
    id: 2,
    name: '程咬金',
    avatar: 'https://game.gtimg.cn/images/yxzj/img201606/heroimg/144/144.jpg'
  },
  // ...
];

接下来创建一个Heroes组件，在src/components目录下创建一个Heroes.vue文件，代码如下：

<template>
  <div class="heroes">
    <div v-for="hero in heroes" :key="hero.id" class="hero">
      <img :src="hero.avatar" alt="">
      <p>{{ hero.name }}</p>
    </div>
  </div>
</template>

<script>
import { heroes } from '@/data/heroes';

export default {
  name: 'Heroes',
  data() {
    return {
      heroes
    };
  }
};
</script>

<style>
.heroes {
  display: flex;
  flex-wrap: wrap;
}

.hero {
  width: 200px;
  margin: 20px;
  text-align: center;
}

.hero img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>

这个组件会渲染所有的英雄数据，并将它们以卡片形式展示出来。现在我们需要在App.vue中引入这个组件，代码如下：

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

<script>
import Heroes from '@/components/Heroes';

export default {
  name: 'App',
  components: {
    Heroes
  }
};
</script>

现在运行npm run serve，就可以看到一个简单的王者荣耀英雄页面了。当然，这只是一个简单的示例，如果要实现更多的功能还需要更多的代码。