Wie implementiert man mit Vue ein Seitendesign, das Suning.com imitiert?

Im aktuellen Internetzeitalter sind E-Commerce-Websites zum wichtigsten Ort für Menschen zum Einkaufen geworden. Suning.com ist eine bekannte E-Commerce-Website in China, deren Seitendesign ebenfalls viel Aufmerksamkeit erregt hat. Vue kann als in den letzten Jahren sehr beliebtes Front-End-Framework eine sehr hilfreiche Rolle bei der Implementierung eines Suning.com-ähnlichen Seitendesigns spielen. In diesem Artikel wird erläutert, wie Sie mit Vue ein Seitendesign implementieren, das Suning.com imitiert.

1. Aufbau einer Basisumgebung
   Bevor Sie Vue für die Seitengestaltung verwenden, müssen Sie eine Vue-Entwicklungsumgebung einrichten. Für diesen Schritt müssen Node.js und Vue CLI installiert sein. Nach der Installation können Sie ein neues Vue-Projekt erstellen, indem Sie den folgenden Befehl eingeben:

   vue create suning

   Darunter ist der Parameter „suning“ der Name des Projekts, der je nach Bedarf geändert werden kann. Nachdem Sie diesen Befehl ausgeführt haben, müssen Sie im Terminal den folgenden Befehl eingeben, um den Entwicklungsserver zu starten:

   npm run serve

   Auf diese Weise können Sie die Auswirkungen des Projekts im lokalen Browser anzeigen.

2. Entwerfen Sie das Seitenlayout der Homepage.
   Der zweite Schritt besteht darin, das Seitenlayout der Suning.com-Homepage zu entwerfen. Während des Implementierungsprozesses können Technologien wie HTML, CSS und JavaScript sowie einige vorgefertigte UI-Frameworks verwendet werden. Hier entscheiden wir uns für die Verwendung der Element-Benutzeroberfläche für die Seitengestaltung. Nach Abschluss der Installation von Element UI können Sie die Element UI-Komponentenbibliothek in der Datei main.js einführen:

   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')

   Auf diese Weise können Sie die Element UI-Komponenten im Vue-Projekt verwenden.

3. Produktklassifizierungsnavigation hinzufügen
   Auf der linken Seite der Suning.com-Homepage befindet sich eine Produktklassifizierungsnavigation. Sie können die benötigten Produkte schnell finden, indem Sie auf die Navigation klicken. Um diese Funktion in Vue zu implementieren, können Sie die el-menu-Komponente verwenden, um das Navigationsmenü zu implementieren. Der Code lautet wie folgt:

   <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>

   Mit diesem Code können Sie eine Produktkategorienavigation auf der Seite implementieren.

4. Produktliste hinzufügen
   Der mittlere Teil der Homepage von Suning.com ist die Produktliste, in der die beliebten und empfohlenen Produkte von Suning.com angezeigt werden. Sie können die el-card-Komponente verwenden, um Produkte in Vue anzuzeigen. Der spezifische Code lautet wie folgt:

   <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>

   Mit diesem Code können Sie die Produktliste auf der Seite anzeigen.

5. Ein Karussellbild hinzufügen
   Oben auf der Suning.com-Homepage befindet sich ein Karussellbild, um die Werbeaktionen und andere Informationen von Suning.com anzuzeigen. Sie können die el-carousel-Komponente verwenden, um Karusselldiagramme in Vue zu implementieren. Der Code lautet wie folgt:

   <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>

   Mit diesem Code können Sie den Effekt von Karussellbildern auf der Seite erzielen.

Durch die oben genannten fünf Schritte können Sie eine einfache Imitation der Suning.com-Seite erstellen. Natürlich muss auch das spezifische Seitendesign in verschiedenen Details an Ihre eigenen Bedürfnisse angepasst und modifiziert werden, was von uns mehr Erkundung und Übung in der tatsächlichen Entwicklung erfordert.

Das obige ist der detaillierte Inhalt vonWie implementiert man mit Vue ein Seitendesign, das Suning.com imitiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!