Bagaimana untuk menggunakan Vue untuk melaksanakan reka bentuk halaman yang meniru Suning.com?

Dalam era Internet sekarang, laman web e-dagang telah menjadi tempat utama orang ramai membeli-belah. Suning.com ialah tapak web e-dagang yang terkenal di China, dan reka bentuk halamannya juga telah menarik perhatian ramai. Vue, sebagai rangka kerja bahagian hadapan yang sangat popular dalam beberapa tahun kebelakangan ini, boleh memainkan peranan yang sangat membantu dalam melaksanakan reka bentuk halaman seperti Suning.com. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan reka bentuk halaman yang meniru Suning.com.

1. Membina persekitaran asas
   Sebelum anda mula menggunakan Vue untuk reka bentuk halaman, anda perlu menyediakan persekitaran pembangunan Vue. Langkah ini memerlukan Node.js dan Vue CLI dipasang. Selepas pemasangan, anda boleh mencipta projek Vue baharu dengan memasukkan arahan berikut:

   vue create suning

   Antaranya, parameter "suning" ialah nama projek, yang boleh diubah mengikut keperluan anda. Selepas melaksanakan arahan ini, anda perlu memasukkan arahan berikut dalam terminal untuk memulakan pelayan pembangunan:

   npm run serve

   Dengan cara ini, anda boleh melihat kesan projek dalam penyemak imbas tempatan.

2. Reka bentuk susun atur halaman utama
   Langkah kedua ialah mereka bentuk susun atur halaman laman utama Suning.com. Teknologi seperti HTML, CSS dan JavaScript boleh digunakan semasa proses pelaksanaan, serta beberapa rangka kerja UI sedia dibuat. Di sini kami memilih untuk menggunakan UI Elemen untuk reka bentuk halaman. Selepas melengkapkan pemasangan UI Elemen, anda boleh memperkenalkan perpustakaan komponen UI Elemen dalam fail main.js:

   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   import App from './App.vue'
   
   Vue.use(ElementUI)
   
   Vue.config.productionTip = false
   
   new Vue({
     render: h => h(App),
   }).$mount('#app')

   Dengan cara ini, anda boleh menggunakan komponen UI Elemen dalam projek Vue.

3. Tambah navigasi klasifikasi produk
   Terdapat navigasi pengelasan produk di sebelah kiri halaman utama Suning.com Anda boleh mencari produk yang anda perlukan dengan cepat dengan mengklik pada navigasi. Untuk melaksanakan fungsi ini dalam Vue, anda boleh menggunakan komponen el-menu untuk melaksanakan menu navigasi Kod adalah seperti berikut:

   <template>
     <el-menu
    class="menu"
    default-active="1"
    :default-openeds="defaultOpen"
    mode="vertical"
    :unique-opened="true"
    background-color="#f5f5f5"
    text-color="#333"
    active-text-color="#409EFF">
    <template v-for="(menu, index) in menus">
      <el-submenu :index="index + ''" v-if="menu.children">
        <template slot="title">{{ menu.title }}</template>
        <el-menu-item v-for="item in menu.children" :index="item.id + ''">{{ item.title }}</el-menu-item>
      </el-submenu>
      <el-menu-item :index="index + ''" v-else>{{ menu.title }}</el-menu-item>
    </template>
     </el-menu>
   </template>
   
   <script>
   export default {
     name: 'CategoryMenu',
     data() {
    return {
      menus: [
        {
          title: '电器',
          children: [
            {id: 1, title: '电视专区'},
            {id: 2, title: '空调专区'}
          ]
        },
        {
          title: '电脑',
          children: [
            {id: 3, title: '笔记本电脑'},
            {id: 4, title: '平板电脑'}
          ]
        },
        {
          title: '家居',
          children: [
            {id: 5, title: '空气净化器'},
            {id: 6, title: '椅子'}
          ]
        }
      ],
      defaultOpen: ['0']
    }
     }
   }
   </script>

   Dengan kod ini, anda boleh melaksanakan navigasi kategori produk pada halaman.

4. Tambah senarai produk
   Bahagian tengah halaman utama Suning.com ialah senarai produk, yang memaparkan produk popular Suning.com dan produk yang disyorkan. Anda boleh menggunakan komponen el-card untuk memaparkan produk dalam Vue Kod khusus adalah seperti berikut:

   <template>
     <div class="card-group">
    <div class="card-item" v-for="(goods, index) in goodsList" :key="index">
      <el-card shadow="hover" :body-style="{ padding: '0' }">
        <div class="img-top">
          <img class="goods-img lazy"  src="/static/imghwm/default1.png"  data-src="goods.img"  : alt="">
          <div class="badge">{{ goods.badge }}</div>
        </div>
        <div class="card-content">
          <div class="goods-title">{{ goods.title }}</div>
          <div class="goods-price">¥ {{ goods.price }}</div>
        </div>
      </el-card>
    </div>
     </div>
   </template>
   
   <script>
   export default {
     name: 'GoodsList',
     data() {
    return {
      goodsList: [
        {
          img: 'https://img11.360buyimg.com/n1/s450x450_jfs/t1/190108/22/5224/211303/60b6fad9Ecdb7e91c/a5130aa84ff90ca2.jpg',
          badge: '新品',
          title: '苹果 12 Pro Max 5G手机',
          price: '9,999'
        },
        {
          img: 'https://img11.360buyimg.com/n1/jfs/t1/194988/38/1376/76847/60bb139fEd71d624d/f0a866bc9adaf065.jpg',
          badge: '限时特惠',
          title: 'ThinkPad X1 Carbon 2021第九代英特尔酷睿i5 14英寸轻薄便捷商务笔记本电脑（1200P IPS/16G/SSD512G/WIFI6/蓝牙5.2/Firewire/HDMI/Type-C/Win10 Pro）',
          price: '9,099'
        }
      ]
    }
     }
   }
   </script>

   Dengan kod ini, anda boleh memaparkan senarai produk pada halaman.

5. Tambah imej karusel
   Terdapat imej karusel di bahagian atas halaman utama Suning.com untuk memaparkan diskaun Suning.com dan maklumat lain. Anda boleh menggunakan komponen el-karousel untuk melaksanakan carta karusel dalam Vue. Kodnya adalah seperti berikut:

   <template>
     <div class="car-wrapper">
    <el-carousel :interval="5000">
      <el-carousel-item v-for="(item, index) in list" :key="index">
        <img class="carousel-img lazy"  src="/static/imghwm/default1.png"  data-src="item"  : alt="">
      </el-carousel-item>
    </el-carousel>
     </div>
   </template>
   
   <script>
   export default {
     name: 'Carousel',
     data() {
    return {
      list: [
        'https://img12.360buyimg.com/n1/s450x450_jfs/t1/194542/38/1447/106319/60bb0d79E1b974153/2716d54e09fae6c9.jpg',
        'https://img11.360buyimg.com/n1/s450x450_jfs/t1/185345/30/12228/46824/60ba7a03Ea621f0c3/69be67a5b22ab9a2.jpg',
        'https://img13.360buyimg.com/n1/s450x450_jfs/t1/195886/12/9789/127049/60bb1fbfEee8fdad1/c3813e65f07f5d22.jpg',
        'https://img11.360buyimg.com/n1/s450x450_jfs/t1/180831/19/12683/84724/60b8cdc5E558f58f8/c91924a8b19ce4e7.jpg',
      ]
    }
     }
   }
   </script>

   Melalui kod ini, anda boleh mencapai kesan imej karusel pada halaman.

Melalui lima langkah di atas, anda boleh merealisasikan halaman tiruan asas Suning.com. Sudah tentu, reka bentuk halaman khusus juga perlu diselaraskan dan diubah suai dalam pelbagai butiran mengikut keperluan anda sendiri, yang memerlukan kami menjalankan lebih banyak penerokaan dan amalan dalam pembangunan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan reka bentuk halaman yang meniru Suning.com?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!