vue3 项目笔记

修改第三方组件样式
如果有变量则修改变量，没有则修改类样式 通过 :deep(类名）修改

 :deep(.home){
    width: 150px;
   }

隐藏底部的tabbar栏,某些页面跳转之后不用显示底部tabbar
方法一： 通过路由的 meta 参数添加一个布尔值，拿到当前活跃路由，通过布尔值判断是否显示

 {
            path: '/city',
            component: () => import('@/views/city/city.vue'),
            meta: {
                isTabBar: true
            }
        }

<template>
  <div>
    <router-view></router-view>
    <tab-bar  v-if="!route.meta.isTabBar"/>
  </div>
</template>
<script setup>
import { useRoute } from "vue-router";
import tabBar from "./components/tab-bar/tabbar.vue";
const route = useRoute();
</script>

方法二：通过设置高度遮挡 tabbar，在公共的css 设置样式，在需要使用的页面引用

css

.to-page{
    height: 100vh;
    position: relative;
    z-index: 9;
    background-color: #fff;
    overflow-y: auto;
}

vue

 <div class="to-page">
        city
  </div>

安装vant

npm install vant

按需引入组件

npm i @vant/auto-import-resolver unplugin-vue-components -D

使用 直接拿vant 示例代码，无需再引入 列如按钮

<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>