小满Vue3第三十六章（Vue如何开发移动端）

编辑：rootadmin

推荐整理分享小满Vue3第三十六章（Vue如何开发移动端），希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

视频教程Vue3 + vite + Ts + pinia + 实战 + 源码 +全栈_哔哩哔哩_bilibili

如果使用npm init vue@latest 报错

error when starting dev server: Error: Cannot find module 'node:path'

nodejs 升级为16版本就好了

开发移动端最主要的就是适配各种手机，为此我研究了一套解决方案

在之前我们用的是rem 根据HTML font-size 去做缩放

现在有了更好用的vw vh

vw 视口的最大宽度，1vw等于视口宽度的百分之一

vh 视口的最大高度，1vh等于视口高度的百分之一

1.安装依赖

npm install postcss-px-to-viewport -D

因为vite中已经内联了postcss，所以并不需要额外的创建 postcss.config.js文件

vite.config.ts

import { fileURLToPath, URL } from 'url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueJsx from '@vitejs/plugin-vue-jsx'import postcsspxtoviewport from "postcss-px-to-viewport" //插件// https://vitejs.dev/config/export default defineConfig({ plugins: [vue(), vueJsx()], css: { postcss: { plugins: [ postcsspxtoviewport({ unitToConvert: 'px', // 要转化的单位 viewportWidth: 750, // UI设计稿的宽度 unitPrecision: 6, // 转换后的精度，即小数点位数 propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换 viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名， minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换 mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false replace: true, // 是否转换后直接更换属性值 landscape: false // 是否处理横屏情况 }) ] } }, resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }})

如果你用的vite 是 ts 他这个插件并没有提供

本文链接地址:https://www.jiuchutong.com/zhishi/290851.html 转载请保留说明！

上一篇：【今日清明】哀悼为抗击新冠肺炎牺牲的烈士和逝世的同胞 (© Luca Flor/Shutterstock)(清明哀思)

下一篇：两只玩耍的北极熊，加拿大丘吉尔镇 (© Cheryl Ramalho/Getty Images)(两只小北极熊)