vue实现app首页
Vue 实现 App 首页
项目初始化
使用 Vue CLI 或 Vite 创建项目，安装必要依赖。推荐使用 Vue 3 组合式 API 开发。
npm create vue@latest my-app
cd my-app
npm install基础结构设计
首页通常包含导航栏、轮播图、功能入口、内容列表和底部栏。通过组件化方式拆分功能模块。
<template>
<div class="home-page">
<app-header />
<banner-carousel />
<quick-access />
<content-list />
<app-footer />
</div>
</template>导航栏实现
使用固定定位实现顶部导航栏，包含 Logo、搜索框和用户入口。
<template>
<header class="app-header">
<div class="logo">AppName</div>
<search-bar />
<user-avatar />
</header>
</template>
<style scoped>
.app-header {
position: fixed;
top: 0;
width: 100%;
background: white;
z-index: 100;
}
</style>轮播图组件
使用 Swiper 插件实现自动轮播效果，支持手势滑动。
npm install swiper<template>
<swiper
:autoplay="{ delay: 3000 }"
:pagination="{ clickable: true }"
>
<swiper-slide v-for="item in banners" :key="item.id">
<img :src="item.image" />
</swiper-slide>
</swiper>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
</script>功能入口网格
使用 CSS Grid 布局实现均匀分布的功能图标入口。
<template>
<div class="quick-access">
<div v-for="item in quickItems" :key="item.id" class="access-item">
<img :src="item.icon" />
<span>{{ item.name }}</span>
</div>
</div>
</template>
<style scoped>
.quick-access {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
</style>内容列表展示
实现带下拉刷新的瀑布流列表，使用 Intersection Observer 实现懒加载。
<template>
<div class="content-list">
<div
v-for="item in listData"
:key="item.id"
class="list-item"
>
<content-card :data="item" />
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
const listData = ref([])
const loading = ref(false)
async function loadMore() {
if (loading.value) return
loading.value = true
// 获取数据逻辑
loading.value = false
}
onMounted(() => {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
loadMore()
}
})
observer.observe(document.querySelector('.load-more'))
})
</script>样式优化
使用 CSS 变量管理主题色，确保移动端适配。
:root {
--primary-color: #42b983;
--text-color: #2c3e50;
}
@media (max-width: 768px) {
.content-list {
padding: 0 10px;
}
}状态管理
复杂场景可使用 Pinia 管理全局状态，如用户信息、主题偏好等。
npm install pinia// stores/user.js
export const useUserStore = defineStore('user', {
state: () => ({
token: null,
profile: {}
})
})性能优化
实现路由懒加载、组件异步加载和关键资源预加载。
const ContentList = defineAsyncComponent(() =>
import('./components/ContentList.vue')
)注意事项
- 使用 rem 或 vw/vh 单位确保多设备适配
- 实现 300ms 点击延迟解决方案
- 添加骨架屏提升加载体验
- 注意 iOS 安全区域适配
- 考虑实现离线缓存策略
