首先,我们需要安装相关的插件: 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...
npm i postcss-px-to-viewport--save-dev 2.在vite.config.ts中添加配置 第一种配置: import pxtovw from 'postcss-px-to-viewport'const loder_pxtovw = pxtovw({//这里是设计稿宽度 自己修改viewportWidth: 1920, viewportUnit: 'vw'})exportdefaultdefineConfig({ plugins: [vue()],css: { postcss: ...
启动Vite开发服务器,并检查生成的CSS文件,你应该会看到原来的px单位已经被转换为vw单位。 通过上述步骤,你已经成功在Vue 3+Vite项目中集成了postcss-px-to-viewport插件,并实现了px到viewport单位的自动转换。
npm i postcss-px-to-viewport --save-dev 1. 2.在vite.config.ts中添加配置 第一种配置: import pxtovw from 'postcss-px-to-viewport' const loder_pxtovw = pxtovw({ //这里是设计稿宽度 自己修改 viewportWidth: 1920, viewportUnit: 'vw' }) export default defineConfig({ plugins: [vue()], ...
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',viewportWidth:file...
postcss-px-to-viewport-8-plugin(将px单位转换为rem) 开始配置: 第一步、安装amfe-flexible插件 cnpm install amfe-flexible--save 第二步、在main.js中导入 import{ createApp }from'vue'import'./style.css'importAppfrom'./App.vue'import'amfe-flexible'createApp(App).mount('#app') ...
设置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...
安装完 postcss-px-to-viewport 插件后,按照之前vue-cli项目的方式,src目录下新建 postcss.config.js 文件并进行规则配置。运行起来并未报错,但是发现px并...
3.配置vite.config.js里的process.env 4.配置H5端的页面兼容性插件,postcss及postcss-px-to-viewport vite用的人也越来越多了,vue3的好用程度和性能提升程度自然也不必多说,但是vite的缺点就是目前插件有点太少了,所以我这里会汇聚一些我找的所有插件在加上我做的一些优化,喜欢的一定要收藏啊。
项目情况:我做的项目都是Vue3.2(setup语法) + Vite + TS ,一个H5 项目,一个PC前台,还有PC后台管理项目,后管项目主要是业务和逻辑,遇到的技术问题不多。 1、H5项目 1.1 自适应屏幕宽度 H5项目UI用的是vant-ui,首先说一下H5项目的屏幕适配问题,可以借助postcss插件,安装postcss-px-to-viewport依赖,npm install...