vue例子实现主页

2026-02-24 10:25:33VUE

Vue 实现主页的示例代码

以下是一个使用 Vue.js 实现主页的简单示例，包含常见的布局和功能：

<template>
  <div class="home">
    <header class="header">
      <h1>欢迎来到我的网站</h1>
      <nav>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于</router-link>
        <router-link to="/contact">联系我们</router-link>
      </nav>
    </header>

    <main class="main-content">
      <section class="hero">
        <h2>网站特色</h2>
        <p>这是一个使用Vue.js构建的现代化网站</p>
      </section>

      <div class="features">
        <div v-for="(feature, index) in features" :key="index" class="feature-card">
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
        </div>
      </div>
    </main>

    <footer class="footer">
      <p>© 2023 我的网站. 保留所有权利.</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      features: [
        {
          title: '响应式设计',
          description: '适配各种屏幕尺寸'
        },
        {
          title: '快速加载',
          description: '优化的性能体验'
        },
        {
          title: '现代化UI',
          description: '简洁美观的界面'
        }
      ]
    }
  }
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: #42b983;
  color: white;
  padding: 1rem;
  text-align: center;
}

.header nav {
  margin-top: 1rem;
}

.header a {
  color: white;
  margin: 0 1rem;
  text-decoration: none;
}

.main-content {
  flex: 1;
  padding: 2rem;
}

.hero {
  text-align: center;
  margin-bottom: 2rem;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.feature-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1rem;
}
</style>