vite+vue3+element-plus项目ps改rem

最新推荐文章于 2024-05-15 17:06:41 发布
最新推荐文章于 2024-05-15 17:06:41 发布
阅读量1.2k 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HurryUpp/article/details/124491017
版权
  1. 安装postcss-pxtorem： npm i postcss-pxtorem -D
  2. 与package.json同级目录创建postcss.config.js文件
module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8",
                "last 10 versions", // 所有主流浏览器最近10版本用
            ],
            grid: true,
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*'],
            unitPrecision: 5
        }
    }
}
  1. 安装 amfe-flexible: npm i amfe-flexible -D
  2. main.js中引入: import ‘amfe-flexible/index.js’
小识谭记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
rem+vue3+pinia+element-plus实现同时改变多窗口的字体大小
Qin_jiangshan的博客
02-02 487
【代码】rem+vue3+pinia+element-plus实现同时改变多窗口的字体大小。
vue3.0中使用postcss-pxtorem的具体方法
12-13
postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。 前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。 1.安装依赖 npm install postcss-pxtorem -D 2.设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件） module.exports = { plugins: { 'autoprefixer': {
vue使用postcss-pxtorem实现自适应
最新发布
Pure_White520的博客
05-15 306
组件也需要根据实际进行字体转换，在。创建一个js文件，引入。
Vue3+Vite 利用postcss-pxtorem移动端适配
Armof的博客
06-08 2558
【代码】Vue3+Vite 利用postcss-pxtorem移动端适配。
vue3+vite安装postcss-pxtorem
qq_43600406的博客
01-13 2342
vue3+vite安装postcss-pxtorem
vue3.0+vite 使用 postcss-pxtorem 实现移动自适应（px转rem）
热门推荐
CSDN for recording problems
02-23 1万+
下载 postcss-pxtorem npm i postcss-pxtorem -D 与package.json同级目录创建postcss.config.js文件 module.exports = { plugins: { autoprefixer: { overrideBrowserslist: [ "Android 4.1", "iOS 7.1", .
vite使用postcss-pxtorem让移动端兼容pc端
qq_38732157的博客
03-11 1603
运行后查看样式，px都被转为了rem。vite.config.ts 文件。
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【标题】"基于vite+vue3+pinia+element-plus+ts后台管理系统"是一个现代的前端开发框架，用于构建高效、可扩展的企业级后台管理界面。这个项目整合了多种前沿的技术，旨在提供一个功能全面、性能优异的解决方案，...
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin:party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + ...
vue3 适配 postcss-pxtorem
m0_59994452的博客
11-27 1056
基于项目需要兼容笔记本的2k屏，和1080p的屏 所以需要使用到 postcss-pxtorem插件 将px 转成rem以达到兼容多个分辨率的需求。2、在main.ts中引入amfe-flexible。3、在vite.config.ts加入如下代码。5、好像内联样式不管用，1、先安装这两个插件。
vite项目配置postcss-plugin-px2rem、lib-flexible postcss-pxtorem
weixin_40283749的博客
09-19 1951
【代码】vite项目配置postcss-plugin-px2rem、lib-flexible postcss-pxtorem。
[vite] 带看文档配置postcss-pxtorem
Madman528的博客
04-25 1008
npm:他说这是PostCSS 插件，可从像素单位生成 rem 单位。既然是插件,看vite先配置好这样上面提到PostCSS 是个插件(图一),vite官网写着插件要用数组格式点进看看参考一下文档。
Vite中使用flexable和postcss-pxtorem进行移动端适配
weixin_43554584的博客
11-15 6242
学会用这两个移动端适配将会变得非常简单。
vue3.0中使用postcss-pxtorem
飞翔的熊blabla
02-18 2112
postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。 前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。 1.安装依赖 npm install postcss-pxtorem -D 2.设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件） ...
vue3 使用 postcss-pxtorem 实现自适应
不怕麻烦的鹿丸的博客
02-20 2432
if(/%/ig.test(px)) { // 有百分号%，特殊处理return px} else {// 144 为设计图尺寸1440除以10。
Vue3、vite项目页面自适应配置（postcss-plugin-px2rem、amfe-flexible）
qq_45859670的博客
11-15 9970
vite 天生就支持对css文件的直接处理关于预处理器☀️目前，在工程化开发中，使用最多的应该就是Less、Sass和Stylus。☀️首先，还是介绍一下它们吧。它们有个统一的名字——css预处理器。☀️何为CSS预处理器？应该就是一种可以将你根据它的规则写出来的格式转成css的东西(还是讲的通俗一点)。☀️它们的出现可以说是恰逢其时，解决了css的一些缺憾：1、语法不够强大，不能够嵌套书写，不利于模块化开发。
如何创建vite + vue3+ element-plus项目
07-13
创建 Vite + Vue3 + Element Plus 项目的步骤如下： 1. 确保已经安装了 Node.js 和 npm。 2. 打开终端或命令行工具，创建一个新的项目文件夹，并进入该文件夹。 3. 执行以下命令初始化一个新的 Vue 项目： ``` npm init @vitejs/app ``` 4. 在初始化过程中，你会被要求选择一个模板。选择 Vue 3 并按回车键确认。 5. 完成初始化后，进入项目文件夹，并安装 Element Plus： ``` cd your-project-name npm install element-plus ``` 6. 创建一个新的 Vue 组件，例如 `HelloWorld.vue`，并在其中引入 Element Plus 组件： ```vue <template> <div> <el-button type="primary">Hello World</el-button> </div> </template> <script> import { ElButton } from 'element-plus'; export default { components: { ElButton } } </script> ``` 7. 在 `main.js` 中引入 Element Plus 的样式和组件库： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import 'element-plus/dist/index.css'; createApp(App).mount('#app'); ``` 8. 在 `App.vue` 中使用你刚刚创建的组件： ```vue <template> <div id="app"> <HelloWorld /> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue'; export default { components: { HelloWorld } } </script> ``` 9. 运行以下命令启动开发服务器： ``` npm run dev ``` 10. 打开浏览器，在地址栏中输入 `http://localhost:3000`，即可看到运行中的 Vite + Vue3 + Element Plus 项目。 这样，你就成功创建了一个 Vite + Vue3 + Element Plus 项目。你可以根据自己的需求继续开发和定制化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值