Vue を使用して Tmall のホームページに似たページデザインを実装するにはどうすればよいですか?-Vue.js-php.cn

Vue の急速な発展により、Web 開発で Vue を使用することがますます一般的な選択肢になってきました。 Vue は、コンポーネントベースの開発アプローチを使用する人気のフロントエンドフレームワークであり、開発プロセスを大幅に簡素化します。中国最大の電子商取引 Web サイトの 1 つである Tmall のホームページのデザインスタイルは常に注目を集めています。そこで、この記事では、Vue を使用して、Tmall ホームページと同様のページデザインを実装します。具体的な実装計画は次のとおりです。

Vue プロジェクトの作成

まず、Vue プロジェクトを作成する必要があります。 Vue プロジェクトの作成方法をすでに知っている場合は、この手順をスキップできます。それ以外の場合は、次の手順に従って新しい Vue プロジェクトを作成できます。

Vue-cli がまだインストールされていない場合は、インストールします。コマンドラインに次のコマンドを入力します:

npm install -g @vue/cli

新しい Vue プロジェクトを作成します。コマンドラインで次のコマンドを入力します:

vue create myproject

プリセットを選択し、必要に応じて選択します。
Vue-router と Axios をインストールします。コマンドラインに次のコマンドを入力します。

npm install vue-router axios

デザインページレイアウト

Tmall のホームページデザインは非常に優れています。個性的。ページは、トップナビゲーション、カルーセル、製品分類、ブランドの推奨事項、売れ筋製品、新製品の発売などの複数の領域に分割されます。 Vue を使用してこのようなページレイアウトを実装できます。

まず、Vue で AppLayout.vue という名前のレイアウトコンポーネントを作成する必要があります。このコンポーネントでは、HTML と CSS を使用して、Tmall ホームページのページレイアウトを実装できます。以下は簡単な例です:

<template>
  <div class="app-layout">
    <header>顶部导航</header>
    <div class="carousel">轮播图</div>
    <nav class="nav">商品分类</nav>
    <section class="brand">品牌推荐</section>
    <section class="hot">热卖商品</section>
    <section class="new">新品上市</section>
  </div>
</template>

<style>
.app-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel, .nav, .brand, .hot, .new {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.carousel {
  height: 300px;
  background-color: #ddd;
}

.nav {
  height: 50px;
  background-color: #f9f9f9;
}

.brand, .hot, .new {
  padding: 20px 0;
  background-color: #f2f2f2;
}
</style>

ログイン後にコピー

このレイアウトコンポーネントでは、フレックスレイアウトを使用して、トップナビゲーション、カルーセル、製品分類、ブランドの推奨事項、売れ筋製品などの複数の領域にページを分割します。製品の発売など。このレイアウトコンポーネントは、他のすべてのページコンポーネントを含むアプリケーション全体のコンテナとして機能します。

カルーセルコンポーネントを設計する

カルーセルは、Tmall ホームページで最も目立つ要素の 1 つです。厳選した商品やイベントを紹介します。サードパーティのプラグインを使用してカルーセルを実装できます。

まず、Vue カルーセルプラグインをインストールして導入する必要があります。コマンドラインに次のコマンドを入力します:

npm install vue-awesome-swiper

次に、Vue でカルーセルコンポーネントを作成し、Carousel.vue という名前を付けます。このコンポーネントでは、サードパーティのプラグインを使用してカルーセルを実装できます。以下は簡単な例です:

<template>
  <div class="carousel">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item in items" :key="item.id">
        <img :src="item.image" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, Pagination } from 'swiper/vue';
import 'swiper/swiper-bundle.css';

export default {
  components: {
    Swiper,
    SwiperSlide,
    Pagination,
  },
  data() {
    return {
      items: [
        { id: 1, image: 'https://picsum.photos/id/100/300/200' },
        { id: 2, image: 'https://picsum.photos/id/200/300/200' },
        { id: 3, image: 'https://picsum.photos/id/300/300/200' },
      ],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
        },
        loop: true,
        autoplay: {
          delay: 3000,
        },
      },
    };
  },
};
</script>

<style scoped>
.carousel {
  margin-bottom: 20px;
}

.swiper-pagination {
  position: absolute;
  bottom: 10px;
  text-align: center;
  width: 100%;
}
</style>

ログイン後にコピー

このカルーセルコンポーネントでは、Vue のカルーセルプラグインを使用し、options 属性を通じてカルーセルの設定をカスタマイズします。 API を呼び出すことで、次の画像への切り替えやループ再生、自動再生などの設定など、カルーセル画像の動作を制御することもできます。

デザイン製品分類コンポーネント

Tmall の製品カテゴリは、衣類、家具、電子製品などを含め、非常に豊富です。 Vue を使用してこれらの製品カテゴリを表示できます。

まず、Vue で ProductList.vue という名前の製品分類コンポーネントを作成する必要があります。このコンポーネントでは、Vue のデータバインディングを使用して製品リストを表示し、CSS を使用してページを美しくすることができます。以下は簡単な例です:

<template>
  <div class="product-list">
    <h2>{{ title }}</h2>
    <ul>
      <li v-for="item in items" :key="item.id">
        <a :href="item.link">
          <img :src="item.image" alt="">
          <span>{{ item.name }}</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['title', 'items'],
};
</script>

<style scoped>
.product-list {
  margin-bottom: 20px;
}

.product-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.product-list li {
  width: calc(50% - 10px);
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.product-list a {
  display: block;
  text-align: center;
}

.product-list img {
  display: block;
  width: 100%;
  height: auto;
}

.product-list span {
  display: block;
  padding: 10px;
  font-size: 14px;
}
</style>

ログイン後にコピー

この製品分類コンポーネントでは、Vue のデータバインディングを使用して製品リストを表示します。各製品の名前、画像、リンク、その他の情報を props 属性を通じて渡すことができます。 Flexbox レイアウトと CSS スタイルを使用して、商品リストの表示を美しくすることもできます。

ブランド推奨コンポーネントのデザイン

ブランド推奨は、Tmall ホームページのもう 1 つの重要な要素です。有名ブランドのアイテムを多数展示しています。 Vue を使用してこれらのブランドを表示できます。

まず、Vue で BrandSlider.vue という名前のブランド推奨コンポーネントを作成する必要があります。このコンポーネントでは、Vue のカルーセルプラグインとアニメーション効果を使用してブランドを表示できます。以下は簡単な例です:

<template>
  <div class="brand-slider">
    <h2>品牌推荐</h2>
    <swiper :options="swiperOption">
      <swiper-slide v-for="item in items" :key="item.id">
        <div class="item">
          <img :src="item.image" alt="">
          <div class="overlay"></div>
          <div class="info">{{ item.name }}</div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import SwiperCore, { Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper-bundle.css';
import './BrandSlider.css';

SwiperCore.use([Autoplay]);

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      items: [
        { id: 1, image: 'https://picsum.photos/id/400/200/200', name: '品牌 1' },
        { id: 2, image: 'https://picsum.photos/id/500/200/200', name: '品牌 2' },
        { id: 3, image: 'https://picsum.photos/id/600/200/200', name: '品牌 3' },
        { id: 4, image: 'https://picsum.photos/id/700/200/200', name: '品牌 4' },
        { id: 5, image: 'https://picsum.photos/id/800/200/200', name: '品牌 5' },
      ],
      swiperOption: {
        autoplay: {
          delay: 3000,
        },
        loop: true,
        slidesPerView: 4,
        spaceBetween: 30,
      },
    };
  },
};
</script>

ログイン後にコピー

このブランド推奨コンポーネントでは、Vue のカルーセルプラグインとアニメーション効果を使用してブランドを表示します。 CSS を呼び出してスタイルを美しくすることができます。

売れ筋商品コンポーネントのデザイン

売れ筋商品は、Tmall ホームページのもう 1 つの重要な要素です。売れ筋商品の一部をご紹介します。 Vue を使用して、これらの売れ筋商品を表示できます。

まず、Vue で HotList.vue という名前の売れ筋製品コンポーネントを作成する必要があります。このコンポーネントでは、Vue のデータバインディングを使用して商品表示と CSS を実装してページを美しくすることができます。以下は簡単な例です:

<template>
  <div class="hot-list">
    <h2>热卖商品</h2>
    <ul>
      <li v-for="item in items" :key="item.id">
        <a :href="item.link">
          <img :src="item.image" alt="">
          <span class="name">{{ item.name }}</span>
          <span class="price">{{ item.price }}</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['items'],
};
</script>

<style scoped>
.hot-list {
  margin-bottom: 20px;
}

.hot-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.hot-list li {
  width: calc(33.33% - 10px);
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.hot-list a {
  display: block;
  text-align: center;
}

.hot-list img {
  display: block;
  width: 100%;
  height: auto;
}

.hot-list .name {
  display: block;
  padding: 10px;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.hot-list .price {
  display: block;
  padding: 10px;
  color: #f40;
}
</style>

ログイン後にコピー

この売れ筋製品コンポーネントでは、Vue のデータバインディングを使用して売れ筋製品のリストを表示します。 props 属性を通じて、各製品の名前、画像、価格、リンクなどの情報を渡すことができます。 Flexbox レイアウトと CSS スタイルを使用して、ベストセラー製品リストの表示を美しくすることもできます。

设计新品上市组件

新品上市是天猫首页的另一个重要元素。它展示了一些新推出的商品。我们可以使用 Vue 来实现这些新品的展示。

首先，我们需要在 Vue 中创建一个新品上市组件，命名为 NewList.vue。在这个组件中，我们可以使用 Vue 的数据绑定来实现商品展示，使用 CSS 来美化页面。下面是一个简单的示例：

<template>
  <div class="new-list">
    <h2>新品上市</h2>
    <ul>
      <li v-for="item in items" :key="item.id">
        <a :href="item.link">
          <img :src="item.image" alt="">
          <span class="name">{{ item.name }}</span>
          <span class="price">{{ item.price }}</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['items'],
};
</script>

<style scoped>
.new-list {
  margin-bottom: 20px;
}

.new-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.new-list li {
  width: calc(33.33% - 10px);
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.new-list a {
  display: block;
  text-align: center;
}

.new-list img {
  display: block;
  width: 100%;
  height: auto;
}

.new-list .name {
  display: block;
  padding: 10px;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.new-list .price {
  display: block;
  padding: 10px;
  color: #f40;
}
</style>

ログイン後にコピー

在这个新品上市组件中，我们使用了 Vue 的数据绑定来实现新品列表的展示。我们可以通过 props 属性来传递每个商品的名称、图片、价格和链接等信息。我们也可以使用 Flexbox 布局和 CSS 样式来美化新品列表的展示效果。

创建 Vue-router

最后，我们需要创建 Vue-router 来实现页面路由的功能。在 Vue-router 中，我们需要为每个页面组件创建一个路由，并为每个路由指定一个 URL。我们可以将所有组件的路由都放在一个单独的文件中，命名为 router.js。下面是一个简单的示例：

import Vue from 'vue';
import VueRouter from 'vue-router';

import AppLayout from './components/AppLayout.vue';
import Carousel from './components/Carousel.vue';
import ProductList from './components/ProductList.vue';
import BrandSlider from './components/BrandSlider.vue';
import HotList from './components/HotList.vue';
import NewList from './components/NewList.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: AppLayout },
  { path: '/carousel', component: Carousel },
  { path: '/product-list', component: ProductList },
  { path: '/brand-slider', component: BrandSlider },
  { path: '/hot-list', component: HotList },
  { path: '/new-list', component: NewList },
];

export default new VueRouter({
  routes,
});

ログイン後にコピー

在这个文件中，我们为每个页面组件创建了一个路由，并为每个路由指定了一个 URL。在最后一行中，我们使用了 export default 来导出整个 VueRouter。

整合所有组件

现在，我们已经完成了所有页面组件和路由组件的创建。最后，我们需要将它们整合在一起，形成一个完整的 Vue 应用。在主要的 Vue 实例中，我们需要引入所有组件和路由组件，以及用 created 钩子函数来初始化我们的数据。下面是一个简单的示例：

<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/carousel">轮播图</router-link>
    <router-link to="/product-list">商品分类</router-link>
    <router-link to="/brand-slider">品牌推荐</router-link>
    <router-link to="/hot-list">热卖商品</router-link>

ログイン後にコピー

以上がVue を使用して Tmall のホームページに似たページデザインを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。