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 }) ] }...
1、安装postcss-pxtorem插件 1 npm install postcss-pxtorem 2、新增postcss.config.js的文件, 1 2 3 4 5 6 7 8 module.exports = { plugins: { "postcss-pxtorem": { rootValue: 20,//跟基准 propList: ["*"], }, }, }; && html下写入公共样式 html { font-size: 16px; } @media screen an...
项目情况:我做的项目都是Vue3.2(setup语法) + Vite + TS ,一个H5 项目,一个PC前台,还有PC后台管理项目,后管项目主要是业务和逻辑,遇到的技术问题不多。 1、H5项目 1.1 自适应屏幕宽度 H5项目UI用的是vant-ui,首先说一下H5项目的屏幕适配问题,可以借助postcss插件,安装postcss-px-to-viewport依赖,npm install...
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...
本文档源码: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文件,并随便初始化一下组件内容。
vue3-osx一款原创自研的vite5.x+vue3+pinia2+arcodesign+sortablejs等技术构建的webOS网页版桌面OS管理系统模板新解决方案。 vite-macos项目支持windows/macos两种桌面、支持自定义桌面栅格布局、可拖拽图标、多屏分页管理、自定义桌面壁纸主题、毛玻璃虚化背景等功能。
在Vue3+Vite项目中,使用PostCSS-pxtorem和amfe-flexible实现自适应,你需要按照以下步骤进行操作: 安装依赖:npm install postcss-pxtorem amfe-flexible --save-dev2.在vite.config.ts文件中添加以下内容: imp…
修改vite.config.ts 中得公共样式路径,如下: 此时,我们在 public.scss 中定义comm_bg 作为每个页面得公共背景类,如下: .comm_bg { width: auto; height: 100%; padding: 29px; background: #ffffff; border-radius: 14px; } 2.3 layout 布局
特点:这是一个PostCSS插件,可以将px单位转换为视口单位(vw、vh或vmin),从而实现移动端自适应布局。 使用场景:在移动端开发中,使用视口单位进行布局和样式设置,可以确保元素随着屏幕尺寸的变化而自适应。 安装与配置(以Vite为例): bash npm install postcss-px-to-viewport -D 在vite.config.js文件中进行配置: ...
后台系统基于 Hyperf 框架开发。企业级架构分层,轻松支撑创业公司及个人前期发展使用,使用少量的服务器资源媲美静态语言的性能。 前端使用Vue3 + Vite4 + Pinia + Arco,一端适配PC、移动端、平板 如果觉着还不错的话,就请点个 ⭐star 支持一下吧,这将是对我最大的支持和鼓励! 在使用 MineAdmin 前请认真阅读...