vue3+vite+ts vant 移动端rem适配

1、vue3+vite+ts vant 移动端rem适配一、安装px转rem插件npm install postcss-pxtorem npm install amfe-flexible配置main.tsimport amfe-flexible /引入amfe-flexible配置vite.config.tsimport fileURLToPath, URL from node:urlimport defineConfig from viteimport vue from vitejs/plugin-vueimport vueJsx from vitejs/plugin-vue-jsximport postCssPxToRem from postcss-pxtoremimport AutoImport from unplugin-auto-import/viteimport Components from unplugin-vue-components/viteimport VantResolver from vant/auto-import-resolverimport resolve

2、from path/ https:/vitejs.dev/config/export default defineConfig( plugins: vue(), resolve: alias: : fileURLToPath(new URL(./src, import.meta.url) , css: postcss: plugins: postCssPxToRem( / 自适应，pxrem转换 rootValue: 75, propList: *, / 需要转换的属性，这里选择全部都进行转换 ) )二、安装vant,unplugin-vue-components控制台执行命令npm i vantnpm i unplugin-vue-components -D配置vite.config.tsimport fileURLToPath, URL from node:urlimport defineConfig from viteimport vue from vitejs/plugin-vueimport postCssPxToRem from postcss-pxtoremimport

3、Components from unplugin-vue-components/viteimport VantResolver from vant/auto-import-resolverimport resolve from path./ https:/vitejs.dev/config/export default defineConfig( plugins: vue(), ., Components( dts: ./src/components.d.ts, extensions: vue, md, include: /.vue$/, /.vue?vue/, /.md$/, / imports 指定组件所在位置，默认为 src/components; 有需要也可以加上 view 目录 dirs: src/components/, resolvers: VantResolver(), ), resolve: alias: : fileURLToPath(new URL(./src, import.meta.url) , css: ., postcss: plugins: postCs

4、sPxToRem( / 自适应，pxrem转换 rootValue: 75, propList: *, / 需要转换的属性，这里选择全部都进行转换 exclude: (file) = const ignore = node_modules/vant return Boolean(ignore.find(item = file.indexOf(item) != -1) ) ,)三、vant组件内联样式适配处理使用vant的van-swipe轮播图插件时，参数width固定接受string|number类型，单位固定为px,对此适配可通过js获取屏幕宽度，与设计图宽度对比动态写入width。代码如下：/ 获取屏幕尺寸,处理swiper卡片宽度适配const windowWidth = ref(0)const getWindowResize = function () windowWidth.value = window.innerWidthconst swipeItemWidth = computed() = return (windowWidth.value * 120) / 375)getWindowResize()

《vue3+vite+ts vant 移动端rem适配》由会员知***分享，可在线阅读，更多相关《vue3+vite+ts vant 移动端rem适配》请在金锄头文库上搜索。