移动端项目(第十九课)Vite+Vant组件环境配置

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
      {
        path:'/',
        redirect:'/home'
      },
      {
        path:'/home',
        component:()=>import("@/pages/home/home.vue")
      },
      {
        path:'/favor',
        component:()=>import("@/pages/favor/favor.vue")
      },
      {
        path:'/info',
        component:()=>import("@/pages/info/info.vue")
      },
      {
        path:'/order',
        component:()=>import("@/pages/order/order.vue")
      },
      }
  ]
})
export default router

<template>
  <div class="favor">
    <h3>我是第二个页面</h3>
  </div>
</template>
<script setup>
</script>
<style scoped>
</style>
<template>
  <div class="info">
   <h3>我是第三个页面</h3>
  </div>
</template>
<script setup>
</script>
<style scoped>
</style>
<template>
  <div class="order">
    <h3>我是第四个页面</h3>
  </div>
</template>
<script setup>
</script>
<style scoped>
</style>

<template>
  <div class="nav-tab">
    <!-- 文字标签 -->
    <div class="title">星辰旅途</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.nav-tab{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 0;
  font-size: 16px;
  color: var(--color-all);
  font-weight: 800;
}
</style>

:root{
  --color-all:#ff9954;
  --line-color: #faf8f9;
  --theme-linear-gradient: linear-gradient(90deg, #fa8c1d, #fcaf3f);
}
body{
  font-size: 14px;
  /* font-family: serif; */
}
/* 隐藏tabbar */
.top-page{
  position: relative;
  z-index: 9;
  height: 100vh;
  background-color: #fff;
  overflow-y: auto;
}

body,html,h1,h2,h3,ul,li {
  padding: 0;
  margin: 0;
}
ul,li{
  list-style: none;
}
a{
  text-decoration: none;
  color: #333;
}
img{
  vertical-align: top;
}

@import "./common.css";
@import "./reset.css";

  <!-- 3 使用的四子组件引入的样式是城市的信息 -->
    <van-swipe class="my-swipe" :autoplay="4000" indicator-color="red">
      <van-swipe-item>
        <img class="image" src="@/assets/img/home/img/1 (1).jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item>
        <img class="image" src="@/assets/img/home/img/1 (2).jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item>
        <img class="image" src="@/assets/img/home/img/1 (3).jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item>
        <img class="image" src="@/assets/img/home/img/1 (4).jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item>
        <img class="image" src="@/assets/img/home/img/1 (1).jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item>
        <img class="image" src="@/assets/img/home/img/1 (5).jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item>
        <img class="image" src="@/assets/img/home/img/1 (6).jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item>
        <img class="image" src="@/assets/img/home/img/1 (7).jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item>
        <img class="image" src="@/assets/img/home/img/1 (8).jpg" alt=""
      /></van-swipe-item>
    </van-swipe>