1.vant、PostCSS适配配置

最新推荐文章于 2024-06-30 11:39:58 发布
原创 最新推荐文章于 2024-06-30 11:39:58 发布 · 576 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#es6 #前端 #css3

本文介绍了如何在非脚手架项目中引入Vant组件库，包括添加样式和JS文件的步骤。同时，提供了PostCSS的配置教程，通过安装`postcss-px-to-viewport`插件并设置配置文件，实现响应式布局的转换。

一：介绍

Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。

非脚手架项目 用以下方法引入vant组件

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css" rel="external nofollow" target="_blank" >

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js" rel="external nofollow" ></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js" rel="external nofollow" ></script>

二：网址

三：PostCSS适配配置

1.安装   cnpm install postcss-px-to-viewport --save-dev

2.在根目录下创建一个postcss.config.js 文件

3.postcss.config.js里面的代码如下

module.exports = {
    plugins: {
      'postcss-px-to-viewport': {
        viewportWidth: 375,
      },
    },
  };

vue中引入vant使用实列
前端程序猿的博客
01-24 877
vue使用vant，详细代码加注释。
玩转Vant的第一天（最详细、保姆级别前端vant教学）
墨杨清竹的博客
05-06 2923
玩转Vant的第一天（最详细、保姆级别前端vant教学）、vant 的引入方法
vant.min.js下载
05-18
vant.min.js
关于vant的rem适配的PostCSS 配置
weixin_43663349的博客
10-12 792
在vant文档里有写Rem布局适配，写不够详细，摸索了一番写下该文章 PostCSS 配置 安装依赖 npm i postcss-pxtorem --save-dev //或者（-D 是--save-dev的简写） npm i postcss-pxtorem -D 在项目根目录中创建postcss.config.js文件 // postcss.config.js module.exports = { //plugins用来配置要使用的相关插件 plugins: { //把px转.
postcss.config.js配置解决vant在移动端上会变小的问题
liaoxianhua888的博客
06-22 1159
postcss.config.js配置解决vant在移动端上会变小的问题
Vant移动端 REM 适配以及.遇见Error: PostCSS plugin postcss-pxtorem requires PostCSS 8的解决方案
m0_56530294的博客
09-13 1166
Vant中使用的是px作为单位，当我们使用rem来适配各类移动端设备尺寸的时候，我们就需要使用到下面的两个工具 postcss-pxtorem是一款postcss插件 用来将单位转化为rem lib-flexible 用来设置rem的基准值 下面我们依次将连个工具配置到项目中完成适配 # yarn add amfe-flexible //或者下面的 npm i amfe-flexible 安装lib-flexible动态的设置我们的基准值 并且在main.js中 引用该组件 impo...
vue3.0 创建项目并引入vant插件适配手机端使用得postcss-pxtorem
艾米的猫儿的博客
12-27 991
创建vue3.项目 vue create 项目名称 引入vant流程 第一步.通过npm安装 npm i vant@next -S 第二步.vant官网给我们提供了进阶用法：具体自行查看官网吧，兄弟姐妹们，在这里简单介绍下移动端适配配置方法： 1.安装postcss-pxtorem npm install postcss-pxtorem --save-dev 2.安装amf-flexible npm i -S amfe-flexible 3.在main中引入amfe-flexible import
nuxt+vant适配问题
weixin_45148145的博客
02-08 829
vant官方给的两种方式： Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。 如果需要使用 rem 单位进行适配，推荐使用以下两个工具： postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位 lib-flexible 用于设置 rem 基准值 我用的第一种。(因为第二种设置，我搞的一团糟，不会用，是我的问题，太垃圾了
精选资源
关于vue利用postcss-pxtorem进行移动端适配的问题
01-19
1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置，而不要用webpack-simple，因为webpack里面很多插件加载器之类的都是给你预配好的，这样在项目构建中就不会遗漏什么。 2.cnpm install postcss-...
postcss Rem 布局适配（PostCSS配置）
259的博客
01-14 1541
postcss Rem 布局适配（PostCSS配置）
vant.min.js/css
06-12
把vant的css和js文件导入html项目，可以在html页面引用vant组件，避免使用连接访问的难以维护的麻烦。
移动端H5应用，使用了postcss-px-to-viewport插件，750设计稿兼容Vant框架
weixin_45849417的博客
06-30 816
目前在搞一个移动端的H5项目，使用的是Vue3+Vant框架。设计稿是750的，而且使用了postcss-px-to-viewport。所以发现使用Vant框架的时候，发现有点问题，好像缩小了，后来百度了一下，是需要设置portcss.config.js。下面是代码：报错时候的配置：使用下面这个。
Vue3 项目初始化(二) 引入vant + sass+ postcss
weixin_41117906的博客
05-10 566
vant + sass+ postcss
移动端---在vant中使用postcss-pxtorem 和lib-flexible 实现rem布局适配
前端与计算机相关知识的分享，博主的qq523235674
02-09 4041
1.postcss（是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位） 1.介绍 PostCSS是一个处理CSS的处理工具，本身功能比较单一，它主要负责解析CSS代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的，例如: ①Autoprefixer插件可以实现自动添加浏览器相关的声明前缀 ②PostCSS Preset Env插件可以让你使用更新的CSS语法特性并实现向下兼容 ③postcss-pxtorem可以实现将px转换为rem 目前P.
vue2 移动端H5 vant 之安装postcss-px-to-viewport插件及配置
cdfdfgrd的博客
06-18 813
vue2 移动端H5 vant 之安装postcss-px-to-viewport插件及配置
使用vant推荐的PostCSS 做rem适配（移动端）
weixin_64812436的博客
12-26 414
（动态设置rem值，并将项目代码的 px 自动转为 rem） （缺点 ：不能将行内样式的 px 转为 rem） 1、配置 lib-flexible 工具 ：动态设置rem基准值 （安装cnpm i 'amfe-flexible'） （在main.js文件中 加载动态设置 rem 基准值） 2、使用 postcss-pxtorem 将 px 转为 rem (下载postcss-pxtorem: cnpm install postcss-pxtorem -D) (配置 post
2021年12月vue+postcss+vant移动端自适应方案
weixin_44903107的博客
12-07 1613
1、安装插件 yarn add postcss-px-to-viewport -D 2、在项目根目录下添加.postcssrc.js文件配置如下 module.exports = { plugins: { autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等 "postcss-px-to-viewport": { unitToConvert: "px", // 要转化的单位 viewportWi
postcss vant组件库 冲突问题
sam的博客
03-14 1156
https://www.cnblogs.com/zhangnan35/p/12682925.html
vue3+vant配置postcss
最新发布
08-06
<think>我们正在处理一个关于Vue3项目配置Vant和PostCSS的问题。根据用户的问题，我们需要提供在Vue3项目中配置Vant并使用PostCSS（特别是postcss-pxtorem）的方法。 步骤概述： 1. 创建Vue3项目（如果尚未创建） 2. 安装Vant 3. 安装PostCSS插件（postcss-pxtorem）和其他可能需要的依赖 4. 配置PostCSS（在vue.config.js中或postcss.config.js中） 5. 配置Vant按需引入（可选，但推荐） 6. 适配移动端（设置viewport或动态设置根字体大小） 根据引用[2]和[3]，我们可以知道在Vue3项目中配置postcss-pxtorem的方法，以及Vant官方推荐的设计稿尺寸为375，因此rootValue通常设置为37.5（因为375/10=37.5）。 具体步骤： 1. 创建Vue3项目（如果已经存在，跳过此步） ```bash vue create my-project ``` 2. 安装Vant ```bash npm install vant@next --save ``` 3. 安装PostCSS插件 ```bash npm install postcss postcss-pxtorem --save-dev ``` 4. 配置PostCSS 在Vue3项目中，可以在`vue.config.js`中配置，也可以使用`postcss.config.js`文件配置。这里以`vue.config.js`为例（如果没有该文件，在项目根目录下创建）。 在`vue.config.js`中添加如下配置： ```javascript module.exports = { css: { loaderOptions: { postcss: { postcssOptions: { plugins: [ require(&#39;postcss-pxtorem&#39;)({ rootValue: 37.5, // 设计稿宽度的1/10，Vant官方使用的是37.5 propList: [&#39;*&#39;], // 需要转换的属性，这里选择全部都进行转换 selectorBlackList: [&#39;.norem&#39;] // 过滤掉.norem-开头的class，不进行rem转换 }) ] } } } } } ``` 注意：在引用[2]中，配置写在`plugins`数组中，但根据Vue CLI文档，在Vue CLI内部已经默认集成了PostCSS，因此可以通过`loaderOptions.postcss`来配置。但是，在Vue CLI 4及以上版本，推荐使用`postcssOptions`对象来配置插件。 5. 配置Vant按需引入（可选） 为了减小包体积，建议按需引入Vant组件。可以使用`unplugin-vue-components`插件。 安装： ```bash npm install unplugin-vue-components -D ``` 然后在`vue.config.js`中配置（或者如果是Vite项目，在vite.config.js中配置）。这里以Vue CLI项目为例，在`vue.config.js`中： ```javascript const { defineConfig } = require(&#39;@vue/cli-service&#39;) const Components = require(&#39;unplugin-vue-components/webpack&#39;) const { VantResolver } = require(&#39;unplugin-vue-components/resolvers&#39;) module.exports = defineConfig({ configureWebpack: { plugins: [ Components({ resolvers: [VantResolver()], }), ], }, // 上面已经配置的css部分也要保留 css: { // ... 同上 } }) ``` 这样在组件中就可以直接使用Vant组件，无需手动引入。 6. 设置视口（viewport）和动态根字体大小（可选） 在`public/index.html`中，设置viewport： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> ``` 为了适配不同屏幕，可以动态设置根字体大小。在`src/main.js`或一个单独的文件中（例如`src/utils/rem.js`）添加： ```javascript // 设置根字体大小函数 const setRootFontSize = () => { const rootValue = 16; // 设计稿基准值，一般设计稿为375，则1rem=16px（因为16*23.4375=375，这里23.4375=375/16） const rootWidth = 375; // 设计稿宽度 const deviceWidth = document.documentElement.clientWidth; document.documentElement.style.fontSize = (deviceWidth * rootValue) / rootWidth + &#39;px&#39;; }; // 初始化执行 setRootFontSize(); // 监听窗口变化 window.addEventListener(&#39;resize&#39;, setRootFontSize); ``` 然后在`main.js`中引入这个文件。 注意：上面的rootValue（16）和rootWidth（375）与postcss-pxtorem中的rootValue（37.5）的关系： 在postcss-pxtorem中，我们设置rootValue为37.5，是因为Vant的设计稿宽度是375，而375/10=37.5（即1rem=37.5px）。但是，我们通过动态设置根字体大小，使得1rem等于设计稿宽度的1/10（即37.5px）？这里需要调整。 实际上，我们动态设置根字体大小的目的是让1rem等于设计稿上的100个设计像素？所以，如果我们设计稿是375，那么希望1rem=37.5px，这样设计稿上100px的元素就可以写2.6667rem（100/37.5≈2.6667）。 而上面动态设置根字体大小的代码中，我们计算出来的根字体大小是：deviceWidth * 16 / 375。如果我们希望1rem等于设计稿上的37.5px，那么我们需要调整动态设置根字体大小的公式。 另一种常见的做法是：将设计稿分为10份，每份为37.5px（设计稿375），那么1rem=37.5px。所以动态设置根字体大小的函数可以这样写： ```javascript function setRem () { const baseSize = 37.5 // 设计稿宽度为375时，1rem等于37.5px const scale = document.documentElement.clientWidth / 375 // 计算当前屏幕宽度与设计稿宽度的比例 document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + &#39;px&#39; // 设置根字体大小，最大缩放为2倍 } ``` 然后在入口文件中调用并监听窗口变化。 但是，注意：在postcss-pxtorem中，我们设置的rootValue也是37.5，这样在编译时，设计稿上的元素尺寸（比如100px）就会被转换成100/37.5=2.6667rem，而2.6667rem在运行时就会根据根字体大小（37.5px * 当前屏幕比例）来计算出实际像素。 因此，我们调整动态设置根字体大小的函数： ```javascript // 在src目录下创建rem.js // 设置基准大小 const baseSize = 37.5 // 注意，这个值要和postcss-pxtorem中的rootValue保持一致 // 设置 rem 函数 function setRem() { // 当前页面宽度相对于375宽的缩放比例，可根据设计稿修改 const scale = document.documentElement.clientWidth / 375 // 设置页面根节点字体大小 document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + &#39;px&#39; } // 初始化 setRem() // 监听窗口变化 window.addEventListener(&#39;resize&#39;, setRem) ``` 然后在`main.js`中引入这个文件：`import &#39;./rem.js&#39;` 这样，我们就完成了整个配置。 注意：如果设计稿不是375，而是750（二倍图），那么需要调整： - 动态设置根字体大小：将375改为750，同时baseSize应该设置为75（因为750/10=75）。 - postcss-pxtorem中的rootValue也设置为75。 总结配置步骤： 1. 安装依赖 2. 配置vue.config.js中的PostCSS插件（postcss-pxtorem） 3. 配置按需引入（可选，但推荐） 4. 设置viewport 5. 动态设置根字体大小（rem.js） 引用说明： - 引用[2]提供了在vue.config.js中配置postcss-pxtorem的方法。 - 引用[3]提到Vue3支持内联的PostCSS配置。 - 引用[5]提供了动态设置根字体大小的思路。 根据上述步骤，用户应该能够成功配置Vant和PostCSS。 注意：由于不同项目结构可能略有不同，请根据实际情况调整。 生成相关问题： 1. 如何验证postcss-pxtorem是否配置成功？ 2. 在Vue3中如何按需引入Vant组件？ 3. 如何解决使用postcss-pxtorem后某些样式不想转换的问题？ 4. 设计稿是750px宽，如何配置？ 5. 使用rem布局时，如何避免字体过大？</think>### Vue3 项目中配置 Vant 和 PostCSS 的方法 在 Vue3 项目中配置 Vant 和 PostCSS 主要分为以下步骤： #### 1. **安装依赖** ```bash # 安装 Vant npm install vant@next # 安装 PostCSS 插件 npm install postcss postcss-pxtorem --save-dev ``` #### 2. **配置 Vant 按需引入** 在 `src/main.js` 或组件中： ```javascript import { createApp } from &#39;vue&#39; import { Button, Toast } from &#39;vant&#39; // 按需引入组件 const app = createApp(App) app.use(Button).use(Toast) // 注册组件 ``` #### 3. **配置 PostCSS** 在项目根目录创建 `postcss.config.js`： ```javascript module.exports = { plugins: { &#39;postcss-pxtorem&#39;: { rootValue: 37.5, // Vant 官方基准值 (375px 设计稿) propList: [&#39;*&#39;], // 转换所有 CSS 属性 selectorBlackList: [], // 选择器忽略名单 minPixelValue: 2 // 最小转换像素值 } } } ``` #### 4. **动态设置根字体大小（可选）** 在 `src/main.js` 中添加： ```javascript // 动态计算 rem 基准值 const setRootFontSize = () => { const docEl = document.documentElement const clientWidth = docEl.clientWidth || 375 docEl.style.fontSize = clientWidth / 10 + &#39;px&#39; // 1rem = 设计稿宽度/10 } window.addEventListener(&#39;resize&#39;, setRootFontSize) setRootFontSize() ``` #### 5. **配置 Viewport（重要）** 在 `public/index.html` 的 `<head>` 中添加： ```html <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> ``` #### 关键配置说明： 1. **rootValue**: - `37.5` 对应 375px 设计稿（Vant 官方推荐）[^2] - 750px 设计稿需设为 `75` 2. **propList**: - `[&#39;*&#39;]` 表示转换所有 CSS 属性 - 排除特定属性：`[&#39;*&#39;, &#39;!border*&#39;]` 3. **selectorBlackList**: - 忽略特定选择器：`[&#39;.norem&#39;]` 会使 `.norem` 开头的类不转换 #### 验证配置： 1. 在组件中写固定像素值： ```css .test-box { width: 375px; /* 应被转换为 10rem */ } ``` 2. 检查浏览器计算样式： - 375px → 应显示为 `10rem`（基于 37.5 的 rootValue） - 实际宽度 = 设备宽度 &times; (375 / rootValue) > 注意：Vue CLI 项目默认支持 PostCSS 配置，无需额外 loader[^3]。如使用 Vite，配置方式相同。 --- ### 常见问题解决方案 1. **Vant 样式未转换**： ```javascript // postcss.config.js selectorBlackList: [&#39;html&#39;] // 避免 html 选择器被转换 ``` 2. **设计稿尺寸适配**： ```javascript // 750px 设计稿配置 rootValue: 75, mediaQuery: true // 允许媒体查询中的 px 转换 ``` 3. **第三方库样式忽略**： ```javascript selectorBlackList: [/^vant-/] // 忽略 vant- 前缀的类 ``` --- ### 相关问题 1. 如何验证 PostCSS 配置是否生效？ 2. Vant 组件样式被意外转换如何处理？ 3. 在 Vue3+Vite 项目中配置 PostCSS 有何不同？ 4. 如何适配不同像素密度的屏幕（如 Retina 屏）？ 5. 使用 `postcss-pxtorem` 时如何排除特定目录的文件？ [^1]: Vant 官方组件库使用说明 [^2]: Vue3 项目中 PostCSS 配置指南 [^3]: Vue3 使用 postcss-pxtorem 实现自适应
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值