現(xiàn)在のインターネット時(shí)代では、電子商取引 Web サイトが人々の買(mǎi)い物の主な場(chǎng)所となっています。 Suning.comは中國(guó)では有名なECサイトで、そのページデザインも注目を集めています。 Vue は、近年非常に人気のあるフロントエンド フレームワークであり、Suning.com のようなページ デザインを?qū)g裝する際に非常に役立つ役割を果たします。この記事では、Vue を使用して Suning.com を模倣したページ デザインを?qū)g裝する方法を紹介します。

1. 基本環(huán)境の構(gòu)築
   Vue を使用してページ デザインを開(kāi)始する前に、まず Vue 開(kāi)発環(huán)境をセットアップする必要があります。この手順では、Node.js と Vue CLI をインストールする必要があります。インストール後、次のコマンドを入力して、新しい Vue プロジェクトを作成できます。

   vue create suning

   このうち、「suning」パラメータはプロジェクトの名前で、必要に応じて変更できます。このコマンドを?qū)g行した後、ターミナルに次のコマンドを入力して開(kāi)発サーバーを起動(dòng)する必要があります:

   npm run serve

   これにより、ローカル ブラウザでプロジェクトの効果を確認(rèn)できます。

2. ホームページのページ レイアウトをデザインする
   2 番目のステップは、Suning.com ホームページのページ レイアウトをデザインすることです。 HTML、CSS、JavaScript などのテクノロジは、既製の UI フレームワークだけでなく、実裝プロセスでも使用できます。ここでは、ページデザインに Element UI を使用することを選択します。 Element UI のインストールが完了したら、main.js ファイルに Element UI のコンポーネント ライブラリを?qū)毪扦蓼埂?

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

   これにより、Vue プロジェクトで Element UI のコンポーネントを使用できるようになります。

3. 製品分類(lèi)ナビゲーションの追加
   Suning.com ホームページの左側(cè)に製品分類(lèi)ナビゲーションがあり、ナビゲーションをクリックすると、必要な製品をすぐに見(jiàn)つけることができます。 Vue でこの機(jī)能を?qū)g裝するには、el-menu コンポーネントを使用してナビゲーション メニューを?qū)g裝できます。コードは次のとおりです:

   <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: '電視專(zhuān)區(qū)'},
            {id: 2, title: '空調(diào)專(zhuān)區(qū)'}
          ]
        },
        {
          title: '電腦',
          children: [
            {id: 3, title: '筆記本電腦'},
            {id: 4, title: '平板電腦'}
          ]
        },
        {
          title: '家居',
          children: [
            {id: 5, title: '空氣凈化器'},
            {id: 6, title: '椅子'}
          ]
        }
      ],
      defaultOpen: ['0']
    }
     }
   }
   </script>

   このコードを通じて、ページに製品カテゴリ ナビゲーションを?qū)g裝できます。

4. 製品リストの追加
   Suning.com のホームページの中央部分は製品リストで、Suning.com の人気製品と推奨製品が表示されます。 el-card コンポーネントを使用して、Vue で製品を表示できます。具體的なコードは次のとおりです:

   <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: '蘋(píng)果 12 Pro Max 5G手機(jī)',
          price: '9,999'
        },
        {
          img: 'https://img11.360buyimg.com/n1/jfs/t1/194988/38/1376/76847/60bb139fEd71d624d/f0a866bc9adaf065.jpg',
          badge: '限時(shí)特惠',
          title: 'ThinkPad X1 Carbon 2021第九代英特爾酷睿i5 14英寸輕薄便捷商務(wù)筆記本電腦（1200P IPS/16G/SSD512G/WIFI6/藍(lán)牙5.2/Firewire/HDMI/Type-C/Win10 Pro）',
          price: '9,099'
        }
      ]
    }
     }
   }
   </script>

   このコードにより、ページ上に製品リストを表示できます。

5. カルーセル畫(huà)像を追加する
   Suning.com ホームページの上部には、Suning.com の優(yōu)待活動(dòng)やその他の情報(bào)を表示するカルーセル畫(huà)像があります。 el-carousel コンポーネントを使用して、Vue でカルーセル チャートを?qū)g裝できます。コードは次のとおりです。

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

   このコードを通じて、ページ上でカルーセル畫(huà)像の効果を?qū)g現(xiàn)できます。

上記の 5 つの手順により、基本的な Suning.com ページの模倣を?qū)g現(xiàn)できます。もちろん、特定のページのデザインも、お客様のニーズに合わせてさまざまな細(xì)かい調(diào)整や修正が必要になるため、実際の開(kāi)発ではさらに検討と実踐を行う必要があります。

以上がVue を使用して Suning.com を模倣したページ デザインを?qū)g裝するにはどうすればよいですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。