vue3+vite自适应PC端 1、下载包 pnpm add lib-flexible-computer postcss-px2rem px2rem-loader -D 2、在main.ts里引入 import "lib-flexible-computer"; 3、在vite.config.ts写入 import px2rem from "postcss-px2rem" css: { postcss: { plugins: [ px2rem({ remUnit:192 }) ] }...
在Vue3+Vite项目中,使用PostCSS-pxtorem和amfe-flexible实现自适应,你需要按照以下步骤进行操作: 安装依赖: npm install postcss-pxtorem amfe-flexible --save-dev 2.在vite.config.ts文件中添加以下内容: import postCssPxToRem from "postcss-pxtorem"; ... css: { postcss: { plugins: [ postCssPxToRem({ ...
postcss-px-to-viewport做前端自适应,适用于pc和移动 注意⚠️: 1、直接在dom元素上使用 style 是不会被转换的 2、用类选择器、id选择器等才会被转换 3、element-ui、vant-ui 等UI组件库 默认会被转换 1.下载 postcss-px-to-viewport 插件
postcss-px-to-viewport做前端自适应,适用于pc和移动 注意⚠️: 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.c...
特点:这是一个PostCSS插件,可以将px单位转换为视口单位(vw、vh或vmin),从而实现移动端自适应布局。 使用场景:在移动端开发中,使用视口单位进行布局和样式设置,可以确保元素随着屏幕尺寸的变化而自适应。 安装与配置(以Vite为例): bash npm install postcss-px-to-viewport -D 在vite.config.js文件中进行配置: ...
修改vite.config.ts 中得公共样式路径,如下: 此时,我们在 public.scss 中定义comm_bg 作为每个页面得公共背景类,如下: .comm_bg { width: auto; height: 100%; padding: 29px; background: #ffffff; border-radius: 14px; } 2.3 layout 布局
项目情况:我做的项目都是Vue3.2(setup语法) + Vite + TS ,一个H5 项目,一个PC前台,还有PC后台管理项目,后管项目主要是业务和逻辑,遇到的技术问题不多。 1、H5项目 1.1 自适应屏幕宽度 H5项目UI用的是vant-ui,首先说一下H5项目的屏幕适配问题,可以借助postcss插件,安装postcss-px-to-viewport依赖,npm install...
vue3+vite项目配置适配H5主要安装一下两个插件: amfe-flexible(主要用于动态设置根元素字体大小(rem),以根据屏幕尺寸进行自适应布局) postcss-px-to-viewport-8-plugin(将px单位转换为rem) 开始配置: 第一步、安装amfe-flexible插件 cnpm install amfe-flexible--save ...
🌈 基于 Vue3.x + ThinkPHP8 + TypeScript + Vite + Pinia + Element Plus 等流行技术栈的后台管理系统,支持常驻内存运行、可视化CRUD代码生成、自带WEB终端、自适应多端、同时提供Web、WebNuxt、Server端、内置全局数据回收站和字段级数据修改保护、自动注册路由、无限子级权限管理等,无需授权即可免费商用,希望...
本文档源码:Lzq811/vite-vue-ts-eslint at vite2+vue3+ts使用vue-router搭建页面框架 (github.com) 1. 安装使用 vue-router@4 install yarn add vue-router@4 # 一定要@4哦,不然会安装3版本导致不兼容vue3 在src下新建pages文件夹,并添加login/index.vue、home/index.vue文件,并随便初始化一下组件内容。