Bagaimana untuk menggunakan Vue untuk melaksanakan halaman pesanan katering seperti Meituan?

Vue.js ialah rangka kerja JavaScript popular yang biasa digunakan untuk membina aplikasi satu halaman. Meituan ialah platform tempahan katering yang terkenal Reka bentuk halamannya ringkas dan praktikal, dan pengalaman penggunanya bagus. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan halaman pesanan katering seperti Meituan.

1. Bina projek Vue

Mula-mula, anda perlu memasang alat perancah Vue Vue CLI. Anda boleh menggunakan arahan berikut untuk memasang:

npm install -g @vue/cli

Selepas pemasangan, anda boleh menggunakan arahan berikut untuk mencipta projek Vue baharu:

vue create vue-meituan

Selepas mencipta projek, masukkan direktori projek dan mulakan pelayan pembangunan:

cd vue-meituan
npm run serve

Buka http dalam pelayar ://localhost:8080, anda boleh melihat halaman alu-aluan lalai Vue.

2. Reka susun atur halaman

Sebelum melaksanakan halaman tempahan katering seperti Meituan, anda perlu mereka bentuk susun atur dan gaya halaman terlebih dahulu. Anda boleh melakar halaman menggunakan alat seperti Photoshop atau Sketch untuk menentukan maklumat seperti kedudukan dan penampilan setiap komponen pada halaman.

Untuk memudahkan proses di sini, kami terus menggunakan halaman yang telah direka bentuk, yang termasuk bar navigasi atas, senarai produk dan bar menu bawah. Struktur utama halaman adalah seperti berikut:

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

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

3. Laksanakan komponen bar navigasi

Komponen bar navigasi terdiri daripada logo, kotak carian dan menu navigasi. Komponen ini boleh dilaksanakan menggunakan komponen 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>

Atribut data digunakan di sini untuk menyimpan data dan maklumat status menu navigasi, dan item menu dijana secara dinamik melalui arahan v-for dan nilai kunci yang ditentukan sepasang. Dalam kaedah onMenuClick, keadaan pengaktifan item menu akan ditetapkan berdasarkan acara klik.

4. Laksanakan komponen senarai produk

Komponen senarai produk termasuk gambar produk, nama, penerangan, harga, troli beli-belah dan maklumat lain. Komponen ini boleh dilaksanakan menggunakan komponen 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>

Atribut data digunakan di sini untuk menyimpan data dan maklumat status senarai produk, dan item senarai produk dijana secara dinamik melalui arahan v-for dan kunci yang ditentukan- pasangan nilai. Dalam kaedah onCartClick, kuantiti produk akan ditingkatkan mengikut acara klik, dan paparan serta penyembunyian kuantiti akan dikawal melalui arahan v-show.

5. Laksanakan komponen bar menu bawah

Komponen bar menu bawah termasuk fungsi seperti troli beli-belah, daftar keluar dan penyerahan. Komponen ini boleh dilaksanakan menggunakan komponen 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>

Atribut yang dikira digunakan di sini untuk mengira bilangan item dan jumlah keseluruhan, dan arahan v-show digunakan untuk mengawal paparan dan menyembunyikan butang penyelesaian dan penyerahan. .

6. Ringkasan

Melalui langkah di atas, Vue telah berjaya digunakan untuk melaksanakan halaman tempahan katering seperti Meituan. Sepanjang proses, anda perlu menggunakan teknologi dan alatan yang sesuai untuk mereka bentuk reka letak, melukis komponen, menulis kod dan nyahpepijat serta mengoptimumkan halaman untuk mencapai halaman yang cantik, praktikal dan cekap.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan halaman pesanan katering seperti Meituan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!