官網：https://vue-zone.github.io/docs/
github：https://github.com/vue-zone/vue3-vant-mobile
這是一個開源的vue3+vite的H5模板，多端設備兼容方式為 px -> vw 和 rem
已接入過項目，親測好用，沒有過多配置，拉代碼啓動就能用了。
你可以把它當成一個已經搭好的架子，你只需要往裏面加頁面就好了。
個人使用下來感覺便利的點有以下幾個：
1、內置瀏覽器設備兼容，並且專注於H5模板，PC模式會限制最大寬度，兼容性好
2、無需手動設置路由，內部設置了通過 unplugin-vue-router 插件實現路由自動生成，只需要在pages下新建文件夾，文件夾名稱就是對應的路由。
3、內置了海量icon，可直接使用，預覽如下：https://icon-sets.iconify.design/carbon/page-48.html
4、pinia配置已經寫好了，直接使用
5、tabbar在App.vue文件裏，你可以手動控制tabbar的顯隱
下面是項目實際使用的一些常用技巧

Tabbar創建

配置tabbar標籤欄白名單，比如你的tabbar有三個選項，分別對應上這三個

tabbar的組件，右側你可以自定義tabbar的顯示，可以是寫死的名稱，也可以是國際化

如果是國際化，需要在這裏配置國際化key

一個tabbar，一個navbar，你可以手動控制他們的顯示隱藏，詳情頁可以隱藏掉
隱藏tabbar我這裏封裝了一個行數，可以直接使用，新建一個store，用於存儲全局狀態

import useStateStore from '@/stores/modules/state'
import { storeToRefs } from 'pinia'

const { isDesktop } = storeToRefs(useStateStore())

/**
 * 設置tabbar、navbar的狀態
 * @param {boolean} state 狀態
 */
function setBarState(state: boolean) {
  isDesktop.value = state
}

export default setBarState

<script setup lang='ts'>
import setBarState from '@/utils/setBarState'

setBarState(false);
</script>

對應頁面設置，false隱藏，true顯示
tabbar的路由對應pages下的頁面，首頁路由/直接對應index.vue，其它的就對應指定文件夾下的index.vue，比如："/messages" 路由 對應 page/messages/index.vue
你後續有新頁面直接在pages內新建文件夾即可，路由自動生成，非常方便。

ICON使用

項目內置了vant組件，vant的icon可能並不能完全滿足場景，所以還內置了iconify
網站：https://icon-sets.iconify.design/carbon/page-2.html
頁面使用

<div class="i-carbon:home" />

i-是前綴，必須
carbon:home為具體icon
無法通過模板字符串動態設置(可能？)

詳情頁的返回

有些詳情頁是沒有NavBar的，但是需要返回按鈕，我這裏封裝了一個組件，可以直接使用

<script setup lang='ts'>
const router = useRouter()
function onBack() {
  if (window.history.state.back)
    history.back()
  else
    router.replace('/')
}
</script>

<template>
  <div class="back-box" @click="onBack">
    <div class="i-carbon:undo" />
  </div>
</template>

<style lang="less" scoped>
.back-box {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 15px;
  padding: 6px;
  width: fit-content;
  z-index: 100;
  color: white;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>

具體樣式，你可以根據實際情況調整

const router = useRouter()
function onBack() {
  if (window.history.state.back)
    history.back()
  else
    router.replace('/')
}

主要邏輯是這段，你可以在任何頁面使用這個函數實現返回功能。

滾動條緩存

由於項目採用了頁面緩存，切換頁面的時候滾動條可能不會回到頂部，依舊保持在上個頁面的位置，需要特殊處理

/**
 * 滾動到頂部
 */
export function scrollBehavior() {
  document.getElementById('app').scrollTo({ top: 0 })
}

對應的頁面調用這個函數即可。