首先,我们需要安装相关的插件: npm install postcss-px-to-viewport -D 在vite.config.js文件中进行配置 importvuefrom'@vitejs/plugin-vue'// vite.config.tsimport{ defineConfig }from'vite'importAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{ElementPlusRe...
启动Vite开发服务器,并检查生成的CSS文件,你应该会看到原来的px单位已经被转换为vw单位。 通过上述步骤,你已经成功在Vue 3+Vite项目中集成了postcss-px-to-viewport插件,并实现了px到viewport单位的自动转换。
1、直接在dom元素上使用 style 是不会被转换的 2、用类选择器、id选择器等才会被转换 3、element-ui、vant-ui 等UI组件库 默认会被转换 1.下载 postcss-px-to-viewport 插件 npm i postcss-px-to-viewport--save-dev 2.在vite.config.ts中添加配置 ...
1、直接在dom元素上使用 style 是不会被转换的 2、用类选择器、id选择器等才会被转换 3、element-ui、vant-ui 等UI组件库 默认会被转换 1.下载 postcss-px-to-viewport 插件 npm i postcss-px-to-viewport --save-dev 1. 2.在vite.config.ts中添加配置 第一种配置: import pxtovw from 'postcss-px-...
vite.config.js配置 import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpostcsspxtoviewport8pluginfrom'postcss-px-to-viewport-8-plugin';// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),],css:{postcss:{plugins:[postcsspxtoviewport8plugin({unitToConvert:'px...
vue3+vite项目配置适配H5主要安装一下两个插件: amfe-flexible(主要用于动态设置根元素字体大小(rem),以根据屏幕尺寸进行自适应布局) postcss-px-to-viewport-8-plugin(将px单位转换为rem) 开始配置: 第一步、安装amfe-flexible插件 cnpm install amfe-flexible--save ...
🔧 使用Vant组件 安装并配置好Vant和unplugin-vue-components后,你就可以在项目中直接使用Vant组件了。 📱 移动端适配 移动端适配主要关注屏幕大小和分辨率的变化。常见的适配方案包括使用viewport单位(vw, vh)、rem单位配合动态设置html的font-size,或者利用postcss插件进行单位转换。以下是使用postcss-px-to-viewport...
设置viewport截图 2、安装插件: npm install amfe-flexible --save npm install postcss-pxtorem --save 安装老版本报错截图 要安装postcss-pxtorem,不要安装postcss-px2rem-exclude,安装老版本会报错。 3、配置文件: Vite自身已经集成PostCSS,因此无需单独创建PostCSS配置文件,可直接在vite.config.js文件中配置css.pos...
4.配置H5端的页面兼容性插件,postcss及postcss-px-to-viewport vite用的人也越来越多了,vue3的好用程度和性能提升程度自然也不必多说,但是vite的缺点就是目前插件有点太少了,所以我这里会汇聚一些我找的所有插件在加上我做的一些优化,喜欢的一定要收藏啊。
npm install postcss-px-to-viewport 2、做配置:(基于vite.config.js配置) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import postcssPxToViewportfrom'postcss-px-to-viewport' exportdefaultdefineConfig({ plugins: [vue()], css:{ postcss:{