vue3 写一个手机页面 示范代码
时间: 2024-09-06 18:05:24 浏览: 26
在 Vue 3 中,创建一个响应式的手机页面通常涉及到使用 Vue CLI 构建项目,并利用 Vue Router 和响应式设计技术。这里是一个简单的例子,展示如何创建一个基本的单页应用(SPA),包括导航、内容区和一个适合手机布局的视图:
```vue
<template>
<div id="app">
<!-- 导航栏 -->
<header class="navbar">
<router-link to="/" exact>首页</router-link>
<router-link to="/details">详情</router-link>
</header>
<!-- 主要内容区域 -->
<main>
<router-view></router-view>
</main>
<!-- 媒体查询示例,仅在手机上显示侧边栏 -->
<aside v-if="$isMobile" class="sidebar">
<h4>侧边栏</h4>
<!-- 根据需要添加更多内容 -->
</aside>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
data() {
return {
isMobile: ref(window.innerWidth < 768), // 使用媒体查询检测是否为手机
};
},
created() {
window.addEventListener('resize', this.updateIsMobile);
},
beforeDestroy() {
window.removeEventListener('resize', this.updateIsMobile);
},
methods: {
updateIsMobile() {
this.isMobile.value = window.innerWidth < 768;
},
},
}
</script>
<style scoped>
@media (max-width: 767px) {
.navbar {
display: none;
}
main {
padding-left: 75px; /* 添加侧边栏宽度 */
}
aside.sidebar {
display: block;
width: 75px;
}
}
</style>
```
在这个示例中,我们使用了 Vue 的响应式数据 `ref` 来跟踪窗口大小,当窗口调整大小时更新 `isMobile` 的值。然后在 CSS 中,通过媒体查询 `@media (max-width: 767px)` 确保在手机屏幕上侧边栏会被显示。