Comment utiliser Vue pour implémenter une conception de page imitant Suning.com ?

À l'ère actuelle d'Internet, les sites de commerce électronique sont devenus le principal lieu de shopping. Suning.com est un site Web de commerce électronique bien connu en Chine, et la conception de ses pages a également attiré beaucoup d'attention. En tant que framework frontal très populaire ces dernières années, Vue peut jouer un rôle très utile dans la mise en œuvre d'une conception de pages de type Suning.com. Cet article explique comment utiliser Vue pour implémenter une conception de page imitant Suning.com.

1. Créer un environnement de base
   Avant de commencer à utiliser Vue pour la conception de pages, vous devez configurer un environnement de développement Vue. Cette étape nécessite l'installation de Node.js et Vue CLI. Après l'installation, vous pouvez créer un nouveau projet Vue en entrant la commande suivante :

   vue create suning

   Copier après la connexion

   Parmi elles, le paramètre "suning" est le nom du projet, qui peut être modifié selon vos besoins. Après avoir exécuté cette commande, vous devez entrer la commande suivante dans le terminal pour démarrer le serveur de développement :

   npm run serve

   Copier après la connexion

   De cette façon, vous pouvez visualiser l'effet du projet dans le navigateur local.

2. Concevoir la mise en page de la page d'accueil
   La deuxième étape consiste à concevoir la mise en page de la page d'accueil de Suning.com. Des technologies telles que HTML, CSS et JavaScript peuvent être utilisées pendant le processus de mise en œuvre, ainsi que certains cadres d'interface utilisateur prêts à l'emploi. Ici, nous choisissons d'utiliser Element UI pour la conception de pages. Après avoir terminé l'installation d'Element UI, vous pouvez introduire la bibliothèque de composants Element UI dans le fichier 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')

   Copier après la connexion

   De cette façon, vous pouvez utiliser les composants Element UI dans le projet Vue.

3. Ajouter une navigation de classification des produits
   Il y a une navigation de classification des produits sur le côté gauche de la page d'accueil de Suning.com. Vous pouvez trouver rapidement les produits dont vous avez besoin en cliquant sur la navigation. Pour implémenter cette fonction dans Vue, vous pouvez utiliser le composant el-menu pour implémenter le menu de navigation. Le code est le suivant :

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

   Copier après la connexion

   Avec ce code, vous pouvez implémenter une navigation par catégorie de produits sur la page.

4. Ajouter une liste de produits
   La partie centrale de la page d'accueil de Suning.com est la liste des produits, qui affiche les produits populaires et les produits recommandés de Suning.com. Vous pouvez utiliser le composant el-card pour afficher les produits dans Vue. Le code spécifique est le suivant :

   <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 :src="goods.img" class="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>

   Copier après la connexion

   Avec ce code, vous pouvez afficher la liste des produits sur la page.

5. Ajouter une image carrousel
   Il y a une image carrousel en haut de la page d'accueil de Suning.com pour afficher les réductions de Suning.com et d'autres informations. Vous pouvez utiliser le composant el-carousel pour implémenter des graphiques carrousel dans Vue. Le code est le suivant :

   <template>
     <div class="car-wrapper">
    <el-carousel :interval="5000">
      <el-carousel-item v-for="(item, index) in list" :key="index">
        <img :src="item" class="carousel-img" 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>

   Copier après la connexion

   Grâce à ce code, vous pouvez obtenir l'effet d'images carrousel sur la page.

Grâce aux cinq étapes ci-dessus, vous pouvez réaliser une imitation de base de la page Suning.com. Bien entendu, la conception spécifique de la page doit également être ajustée et modifiée dans divers détails en fonction de vos propres besoins, ce qui nous oblige à mener davantage d'exploration et de pratique dans le développement réel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!