vue3移动端

1.手机端使用rem

1.下载依赖

npm i postcss-mobile-forever

2.vite.config.ts中写入

<script setup lang="ts">
    import viewport from 'postcss-mobile-forever'

    css: {
            // 此代码为适配移动端
            postcss: {
                plugins: [
                    viewport({
                        appSelector: '#app', // 页面最外层选择器
                        viewportWidth: 375, // 视窗的宽度 对应设计稿的宽度
                        maxDisplayWidth: 600, // 视口单位最大宽度
                        rootContainingBlockSelectorList: [
                        'van-tabbar',
                        'van-popup',
                        ], // 包含块是根元素的选择器列表
                        border: true, // 在页面外层展示边框吗
                    }),
                ],
            },
        },
</script>

2.进入新页面后退回 要停留在上次页面位置

<script setup lang="ts">
    function createMemoryHistory() {
        const history = {}
        return {
            savePosition(key, position) {
            history[key] = position
            },
            getPosition(key) {
            return history[key]
            },
        }
    }
    const history = createMemoryHistory()

    const router = createRouter({
        scrollBehavior(to, from, savedPosition) {
            // savedPosition 会在你使用浏览器前进或后退按钮时候生效
            // savedPosition: 会记录滚动条的坐标，点击"后退/前进" 时的记录值(x:?,y:?)
            if (savedPosition) {
                return savedPosition //只有返回上一步会触发
            }
            else if (history.getPosition(to.path)) {
                return history.getPosition(to.path) //针对下方四个路由切换
            }
            else {
                return { left: 0, top: 0 }
            // behavior: 'smooth'
            }
        },
    })

    router.afterEach((to, from) => {
        history.savePosition(from.path, { left: window.scrollX, top: window.scrollY })
        NProgress.done()
    })
</script>

3.PostCss插件——autoprefixer

<script setup lang="ts">
// vite.config.ts
import autoprefixer from 'autoprefixer'

export default ({ mode }: ConfigEnv): UserConfig => {
  return {
    css: {
      postcss: {
        plugins: [
          autoprefixer(),
        ],
      },
    },
  }
}
// 瞧一瞧Autoprefixer 的效果
// Autoprefixer处理前css代码
// display: flex;
// Autoprefixer处理后css代码
// display: -webkit-box;
// display: -ms-flexbox;
// display: flex;
</script>