ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue - 搭建 webapp 自适应项目-使用 vant 组件库 并 可自动调节大小

2022-01-05 05:32:00  阅读:187  来源: 互联网

标签:vue vant js 组件 webapp postcss pxtorem


1.创建个vue 项目,这里不详细写怎么创建,参考 vue - 指令创建 vue工程 - 岑惜 - 博客园 (cnblogs.com) https://www.cnblogs.com/c2g5201314/p/15660810.html

使用vue2.0  

 

2.分别执行指令

安装 vant 
npm i vant -S
安装按需引入vant差插件

npm i babel-plugin-import -D

安装 px转rem 插件 【不要太高,可能导致报错,指定版本安装】

npm install postcss-pxtorem@5.1.1 -D

3.配置

找到母版文件 ,修改 meta 标签 ,

      <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

 

 

 在main.js 配置

import 'amfe-flexible'

 

 

 

 

 在 babel.config.js 添加

  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]

 

 根目录创建  .postcssrc.js 文件

添加内容

module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: ['Android >= 4.0', 'iOS >= 8']
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}

 

 在 vue.config.js  文件 添加

const pxtorem = require('postcss-pxtorem')
  css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    pxtorem({
                        rootValue: 37.5,
                        propList: ['*'],
                        // 该项仅在使用 Circle 组件时需要
                        // 原因参见 https://github.com/youzan/vant/issues/1948
                        selectorBlackList: ['van-circle__layer']
                    })
                ]
            }
        }
    }

 

 现在配置好了

3.测试

在页面引入个组件 【按需引入】

 

 

浏览器效果

 

 调大屏幕 ,可以发现组件会根据屏幕变化而变化

 

 

有一点需要注意:

行样式不会自动将px转rem ,自定义组件时,注意使用rem单位
如

 


 

 

 

标签:vue,vant,js,组件,webapp,postcss,pxtorem
来源: https://www.cnblogs.com/c2g5201314/p/15765248.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有