使用vue3加ts仿造京东首页写一个页面,使用代码示例。

非常感谢您的提问。以下是使用Vue3和TypeScript仿造京东首页的示例代码：

<template>
<div class="jd-homepage">
<header>
<div class="jd-header">
<div class="jd-logo">
<img src="./assets/logo.png" alt="京东">
</div>
<div class="jd-search">
<input type="text" placeholder="搜索">
<button>搜索</button>
</div>
<div class="jd-cart">
<a href="#">购物车</a>
</div>
</div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">生活</a></li>
</ul>
</nav>
</header>
<main>
<div class="jd-banner">
<img src="./assets/banner.jpg" alt="京东">
</div>
<div class="jd-recommend">
<h2>为你推荐</h2>
<ul>
<li v-for="item in recommendList" :key="item.id">
<a :href="item.link">
<img :src="item.image" :alt="item.title">
<p>{{ item.title }}</p>
<span>{{ item.price }}</span>
</a>
</li>
</ul>
</div>
</main>
<footer>
<p>京东商城 © 2021</p>
</footer>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface RecommendItem {
id: number;
title: string;
image: string;
price: string;
link: string;
}

export default defineComponent({
name: 'JdHomepage',
data() {
return {
recommendList: [
{
id: 1,
title: '小米10',
image: './assets/recommend-1.jpg',
price: '2999元',
link: '#'
},
{
id: 2,
title: '华为Mate40',
image: './assets/recommend-2.jpg',
price: '4999元',
link: '#'
},
{
id: 3,
title: 'Apple iPhone 12',
image: './assets/recommend-3.jpg',
price: '6799元',
link: '#'
},
{
id: 4,
title: 'ThinkPad X1 Carbon',
image: './assets/recommend-4.jpg',
price: '9999元',
link: '#'
},
{
id: 5,
title: '海尔冰箱',
image: './assets/recommend-5.jpg',
price: '2999元',
link: '#'
},
{
id: 6,
title: '美的空调',
image: './assets/recommend-6.jpg',
price: '3999元',
link: '#'
}
] as RecommendItem[]
};
}
});
</script>

<style scoped>
.jd-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: #f5f5f5;
}

.jd-logo img {
height: 40px;
}

.jd-search {
flex: 1;
margin: 20px;
}

.jd-search input {
width: 100%;
height: 40px;
padding: 10px;
border: none;
border-radius: 20px;
background-color: #f5f5f5;
}

.jd-search button {
height: 40px;
padding: 20px;
border: none;
border-radius: 20px;
background-color: #ff670;
color: #fff;
font-size: 14px;
cursor: pointer;
}

.jd-cart a {
display: inline-block;
height: 40px;
line-height: 40px;
padding: 20px;
border: none;
border-radius: 20px;
background-color: #ff670;
color: #fff;
font-size: 14px;
text-decoration: none;
}

nav {
display: flex;
justify-content: center;
background-color: #fff;
}

nav ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: ;
padding: ;
}

nav li {
margin: 20px;
}

nav a {
display: inline-block;
height: 60px;
line-height: 60px;
padding: 20px;
color: #333;
font-size: 16px;
text-decoration: none;
}

nav a:hover {
color: #ff670;
}

.jd-banner img {
width: 100%;
}

.jd-recommend {
padding: 20px;
}

.jd-recommend h2 {
margin: 20px;
font-size: 18px;
font-weight: normal;
}

.jd-recommend ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
margin: ;
padding: ;
}

.jd-recommend li {
width: calc(50% - 10px);
margin-bottom: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 10px rgba(, , , .1);
}

.jd-recommend li a {
display: block;
padding: 20px;
color: #333;
text-decoration: none;
}

.jd-recommend li img {
width: 100%;
margin-bottom: 10px;
}

.jd-recommend li p {
margin: 10px;
font-size: 14px;
line-height: 1.5;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.jd-recommend li span {
display: block;
margin: 10px;
font-size: 16px;
font-weight: bold;
color: #ff670;
}
</style>