欢迎光临
我们一直在努力

Vue 自动按需引入 vantUI 及移动端项目适配

文章目录

使用vue-cli4创建一个vue项目

因为vantUI使用的是less预处理器,配置时建议选择此处理器。

安装vantUI,按需引入

安装vantUI

npm i vant -S

按需引入

babel-plugin-import是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

npm i babel-plugin-import -D

通过vue-cli4创建项目的时候,由于内部集成了babel,在项目的根目录有babel.config.js文件,在此文件添加配置。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

main.js引入vantUI组件

因为每个组件都需要使用Vue.use()注册,可以直接使用Array遍历,因为使用了babel-plugin-import插件,按需引入的方式,所以可以不需要写每个组件的style。

import {Button,RadioGroup, Radio} from 'vant'

[Button,RadioGroup,Radio].forEach(e=>{
  Vue.use(e)
})

在项目中及直接用对应的组件即可。配置好UI库后不建议直接使用。如果是移动端项目,建议 先做移动端项目适配!

基于 vue-cli3 的 vue 移动端样式适配

简介

  • lib-flexible 为页面自动添加meta标签,根据屏幕分辨率大小的不同,调整根元素html的font-size的值从而达到每个元素宽高自适应变化,以适配不同的屏幕。
  • postcss-px2rem 会将px转换为rem。

安装

npm install lib-flexible --save
npm install postcss-px2rem --save-dev

lib-flexible

由于 lib-flexible 过于陈旧,因此在我们使用之前需要修改其代码配置。

if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    // 在下面判断条件中添加 || isAndroid 选项,因为现在安卓也有高清屏
    if (isIPhone || isAndroid) {
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        dpr = 1;
    }
    scale = 1 / dpr;
}

修改好配置后我们把这个flexible.js文件单独拉出来,然后在main.js中引入就可以了。要注意在index.html中不能含有meta name="viewport" 标签,否则flexible将不起作用。

postcss-px2rem

vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多,将一些默认配置进行了更好更严密,让开发变得更高效的封装。

px2rem的配置放在vue-cli3项目根目录下的vue.config.js中(如果找不到,就自己创建一个)。

具体配置如下

module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5
              })
            ]
          }
        }
    },
}

配置好后,就可以优雅的进行移动端项目开发了。要注意remUnit的配置,我们只需要设置为设计图的1/10即可。

赞(0) 打赏
未经允许不得转载:散人研 » Vue 自动按需引入 vantUI 及移动端项目适配
分享到: 更多 (0)

评论 抢沙发

5 + 9 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏