Vue を使用して Meituan のようなケータリング注文ページを実装するにはどうすればよいですか?

Vue.js は、シングルページ アプリケーションの構築によく使用される人気の JavaScript フレームワークです。 Meituan は有名なケータリング注文プラットフォームで、ページのデザインはシンプルで実用的で、ユーザー エクスペリエンスも優れています。この記事では、Vue を使用して Meituan 風のケータリング注文ページを実装する方法を紹介します。

1. Vue プロジェクトのビルド

まず、Vue のスキャフォールディング ツール Vue CLI をインストールする必要があります。次のコマンドを使用してインストールできます:

npm install -g @vue/cli

インストール後、次のコマンドを使用して新しい Vue プロジェクトを作成できます:

vue create vue-meituan

プロジェクトの作成後、プロジェクト ディレクトリに入って開始します開発サーバー:

cd vue-meituan
npm run serve

ブラウザで http://localhost:8080 を開くと、Vue のデフォルトのようこそページが表示されます。

2. ページ レイアウトのデザイン

美団ケータリングの模倣注文ページを実装する前に、最初にページのレイアウトとスタイルをデザインする必要があります。 Photoshop や Sketch などのツールを使用してページをスケッチし、ページ上の各コンポーネントの位置や外観などの情報を決定できます。

ここでのプロセスを簡素化するために、上部のナビゲーション バー、製品リスト、下部のメニュー バーを含む、すでに設計されたページを直接使用します。ページの主な構造は次のとおりです。

<template>
  <div class="app">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <!-- ... -->
    </div>
    <!-- 商品列表 -->
    <div class="product-list">
      <!-- ... -->
    </div>
    <!-- 菜单栏 -->
    <div class="menu-bar">
      <!-- ... -->
    </div>
  </div>
</template>

<style>
  /* 样式 */
</style>

3. ナビゲーション バー コンポーネントの実装

ナビゲーション バー コンポーネントは、ロゴ、検索ボックス、およびナビゲーション メニューで構成されます。このコンポーネントは、Vue コンポーネントを使用して実装できます。

<template>
  <div class="nav-bar">
    <!-- logo -->
    <div class="logo">
      <img src="logo.png" alt="美团">
    </div>
    <!-- 搜索框 -->
    <div class="search-box">
      <i class="iconfont icon-search"></i>
      <input type="text" placeholder="搜索商家、商品">
    </div>
    <!-- 导航菜单 -->
    <div class="menu">
      <ul>
        <li v-for="(item, index) in menuItems"
          :key="index"
          :class="{active: item.active}"
          @click="onMenuClick(index)">
          {{ item.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {name: '点餐', active: true},
        {name: '评价', active: false},
        {name: '商家', active: false},
        {name: '我的', active: false},
      ],
    }
  },
  methods: {
    onMenuClick(index) {
      this.menuItems.forEach((item, i) => {
        item.active = i === index;
      });
    }
  }
};
</script>

<style>
  /* 样式 */
</style>

data 属性は、ナビゲーション メニューのデータとステータス情報を保存するためにここで使用され、メニュー項目は v-for ディレクティブと指定されたキーと値のペア。 onMenuClick メソッドでは、クリック イベントに基づいてメニュー項目のアクティブ化状態が設定されます。

4. 製品リスト コンポーネントの実装

製品リスト コンポーネントには、製品の写真、名前、説明、価格、ショッピング カート、その他の情報が含まれます。このコンポーネントは、Vue コンポーネントを使用して実装できます。

<template>
  <div class="product-list">
    <div v-for="(product, index) in products"
      :key="index"
      class="product-item">
      <div class="product-image">
        <img :src="product.image" :alt="product.name">
      </div>
      <div class="product-content">
        <h3 class="product-name">{{ product.name }}</h3>
        <p class="product-desc">{{ product.desc }}</p>
        <div class="product-price">{{ product.price }} 元</div>
        <div class="product-action">
          <div class="cart-btn"
            :class="{active: product.count > 0}"
            @click="onCartClick(product)">
            <i class="iconfont icon-gouwuche"></i>
          </div>
          <div class="count"
            v-show="product.count > 0">
            {{ product.count }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          image: 'product-1.png',
          name: '烤鸭',
          desc: '烤鸭又称烤北京鸭，是中国传统名菜之一。',
          price: 58,
          count: 0,
        },
        // ...
      ]
    }
  },
  methods: {
    onCartClick(product) {
      product.count++;
    }
  }
};
</script>

<style>
  /* 样式 */
</style>

data 属性は、製品リストのデータとステータス情報を保存するためにここで使用され、製品リストの項目は v-for ディレクティブと指定されたキーと値のペア。 onCartClickメソッドでは、クリックイベントに応じて商品の数量を増加させ、v-show命令で数量の表示・非表示を制御します。

5. 下部メニュー バー コンポーネントの実装

下部メニュー バー コンポーネントには、ショッピング カート、チェックアウト、送信機能が含まれています。このコンポーネントは、Vue コンポーネントを使用して実装できます。

<template>
  <div class="menu-bar">
    <!-- 购物车 -->
    <div class="cart">
      <div class="cart-icon">
        <i class="iconfont icon-gouwuche"></i>
      </div>
      <div class="cart-count" v-show="totalCount > 0">
        {{ totalCount }}
      </div>
    </div>
    <!-- 总金额 -->
    <div class="total-price">
      合计 {{ totalPrice }} 元
    </div>
    <!-- 结算和提交 -->
    <div class="checkout">
      <div class="checkout-btn" v-show="totalPrice > 0">
        去结算
      </div>
      <div class="submit-btn" v-show="totalPrice > 0">
        提交订单
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    totalCount() {
      let count = 0;
      this.products.forEach(product => {
        count += product.count;
      });
      return count;
    },
    totalPrice() {
      let price = 0;
      this.products.forEach(product => {
        price += product.count * product.price;
      });
      return price;
    },
  }
};
</script>

<style>
  /* 样式 */
</style>

ここでは、計算された属性を使用してアイテムの数と合計金額を計算し、v-show 命令を使用してアイテムの表示と非表示を制御します。決済ボタンと送信ボタン。

6. 概要

上記の手順により、Vue を使用して Meituan のようなケータリング注文ページを実装することができました。プロセス全体を通じて、適切なテクノロジとツールを使用して、レイアウトの設計、コンポーネントの描画、コードの作成、ページのデバッグと最適化を行い、美しく実用的で効率的なページを実現する必要があります。

以上がVue を使用して Meituan のようなケータリング注文ページを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。