ホームページ > 記事 > ウェブフロントエンド > Vue を使用して Suning.com を模倣したページデザインを実装するにはどうすればよいですか?

Vue を使用して Suning.com を模倣したページデザインを実装するにはどうすればよいですか?

王林オリジナル: 2023-06-25 09:13:391481ブラウズ

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

基本環境の構築
Vue を使用してページデザインを開始する前に、まず Vue 開発環境をセットアップする必要があります。この手順では、Node.js と Vue CLI をインストールする必要があります。インストール後、次のコマンドを入力して、新しい Vue プロジェクトを作成できます。
```
vue create suning
```
このうち、「suning」パラメータはプロジェクトの名前で、必要に応じて変更できます。このコマンドを実行した後、ターミナルに次のコマンドを入力して開発サーバーを起動する必要があります:
```
npm run serve
```
これにより、ローカルブラウザでプロジェクトの効果を確認できます。
ホームページのページレイアウトをデザインする
2 番目のステップは、Suning.com ホームページのページレイアウトをデザインすることです。 HTML、CSS、JavaScript などのテクノロジは、既製の UI フレームワークだけでなく、実装プロセスでも使用できます。ここでは、ページデザインに Element UI を使用することを選択します。 Element UI のインストールが完了したら、main.js ファイルに Element UI のコンポーネントライブラリを導入できます。
```
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 のコンポーネントを使用できるようになります。

製品分類ナビゲーションの追加
Suning.com ホームページの左側に製品分類ナビゲーションがあり、ナビゲーションをクリックすると、必要な製品をすぐに見つけることができます。 Vue でこの機能を実装するには、el-menu コンポーネントを使用してナビゲーションメニューを実装できます。コードは次のとおりです:

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

このコードを通じて、ページに製品カテゴリナビゲーションを実装できます。

製品リストの追加
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: '苹果 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>

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

カルーセル画像を追加する
Suning.com ホームページの上部には、Suning.com の優待活動やその他の情報を表示するカルーセル画像があります。 el-carousel コンポーネントを使用して、Vue でカルーセルチャートを実装できます。コードは次のとおりです。

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

このコードを通じて、ページ上でカルーセル画像の効果を実現できます。

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

以上がVue を使用して Suning.com を模倣したページデザインを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript node.js css html 前端框架 JS ui

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Vue を使用してマルチレベルナビゲーションメニューを実装するにはどうすればよいですか?次の記事：Vue を使用してマルチレベルナビゲーションメニューを実装するにはどうすればよいですか?

続きを見る

Vue を使用して Suning.com を模倣したページ デザインを実装するにはどうすればよいですか?

関連記事

Vue を使用して Suning.com を模倣したページデザインを実装するにはどうすればよいですか?