Vue.js SPA 实现：导航栏、Banner、产品展示和文章展示

<template>
  <div>
    <Navigation />
    <Banner />
    <Product />
    <Article />
  </div>
</template>
<script>
import Navigation from './components/Navigation.vue';
import Banner from './components/Banner.vue';
import Product from './components/Product.vue';
import Article from './components/Article.vue';

export default {
  components: {
    Navigation,
    Banner,
    Product,
    Article
  }
}
</script> 
<!-- Navigation.vue -->
<template>
  <nav>
    <ul>
      <li><router-link to='/'>首页</router-link></li>
      <li><router-link to='/products'>所有产品</router-link></li>
      <li><router-link to='/about'>关于我们</router-link></li>
    </ul>
  </nav>
</template>
<!-- Banner.vue -->
<template>
  <div class='banner'>
    <img :src='bannerUrl' alt='Banner'>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bannerUrl: ''
    }
  },
  mounted() {
    // 调用后台上传的banner图
    this.bannerUrl = 'http://example.com/banner.jpg';
  }
}
</script>
<!-- Product.vue -->
<template>
  <div class='product'>
    <h2>产品展示</h2>
    <ul>
      <li v-for='product in products' :key='product.id'>
        <img :src='product.imageUrl' alt='Product'>
        <h3>{{ product.name }}</h3>
        <p>{{ product.description }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      products: []
    }
  },
  mounted() {
    // 调用5个产品
    this.products = [
      {
        id: 1,
        name: 'Product 1',
        description: 'Description of Product 1',
        imageUrl: 'http://example.com/product1.jpg'
      },
      {
        id: 2,
        name: 'Product 2',
        description: 'Description of Product 2',
        imageUrl: 'http://example.com/product2.jpg'
      },
      {
        id: 3,
        name: 'Product 3',
        description: 'Description of Product 3',
        imageUrl: 'http://example.com/product3.jpg'
      },
      {
        id: 4,
        name: 'Product 4',
        description: 'Description of Product 4',
        imageUrl: 'http://example.com/product4.jpg'
      },
      {
        id: 5,
        name: 'Product 5',
        description: 'Description of Product 5',
        imageUrl: 'http://example.com/product5.jpg'
      }
    ]
  }
}
</script>
<!-- Article.vue -->
<template>
  <div class='article'>
    <h2>文章展示</h2>
    <ul>
      <li v-for='article in articles' :key='article.id'>
        <h3>{{ article.title }}</h3>
        <p>{{ article.content }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    // 调用10篇文章
    this.articles = [
      {
        id: 1,
        title: 'Article 1',
        content: 'Content of Article 1'
      },
      {
        id: 2,
        title: 'Article 2',
        content: 'Content of Article 2'
      },
      {
        id: 3,
        title: 'Article 3',
        content: 'Content of Article 3'
      },
      {
        id: 4,
        title: 'Article 4',
        content: 'Content of Article 4'
      },
      {
        id: 5,
        title: 'Article 5',
        content: 'Content of Article 5'
      },
      {
        id: 6,
        title: 'Article 6',
        content: 'Content of Article 6'
      },
      {
        id: 7,
        title: 'Article 7',
        content: 'Content of Article 7'
      },
      {
        id: 8,
        title: 'Article 8',
        content: 'Content of Article 8'
      },
      {
        id: 9,
        title: 'Article 9',
        content: 'Content of Article 9'
      },
      {
        id: 10,
        title: 'Article 10',
        content: 'Content of Article 10'
      }
    ]
  }
}
</script>