vue-cli3+vant ui组件快速开发自适应移动端应用

桃扇骨 2022-04-16 02:26 449阅读 0赞

当我建好**VUE-CLI3**的脚手架之后，我们来接着选择一个合适的UI框架来进行实战开发，还不会搭建？---> [点击][Link 1]

[https://youzan.github.io/vant/\#/zh-CN/quickstart][https_youzan.github.io_vant_zh-CN_quickstart]    这个的英文**VANT**的开发文档，感觉在移动端算是功能还算不错的一个UI框架，功能性的东西挺多的，而且也支持国际化。

一般情况下如果全部应用CDN或者直接全局使用，直接根据文档就行，我这里重点讲一下这个UI的框架**按需引入**以及**REM适配**（官网也有提到，只不过有点模糊，新手入门要研究一会，我只是阐述重点，以提高效率），下面开始：

第一步不用说照着官网进行安装，NPM或者是yarn，都是可以的

npm i vant -S
    
    or
    
    yarn and vant

安装之后

我们在babel.config.js中进行配置插件：

module.exports = {
      presets: [
        '@vue/app'
      ],
      plugins: [
        ['import', {
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true
        }, 'vant']
      ]
    }

这样就可以直接使用了，我这里在main.js中做下示范：

LS（按钮和弹窗组件）：

import Vue from 'vue'
    import { Button,Popup } from 'vant';
    Vue.use(Button).use(Popup);

结构中：

<van-popup v-model="show" position="top" :overlay="true">
    <van-button disabled type="primary">禁用状态</van-button>

其实看到这，没什么难度，主要注意插件的配置的位置写法就行了，但是这个ui库的单位都是以px为单位的，在移动端适配都有点麻烦了，既然是移动端肯定有解决方案的嘛，按照官方的说法需要我们去在装两个插件（PS：这两个插件平时都可以用，能直接把PX转成对应的REM布局，也挺方便的）：

npm i postcss-pxtorem -S
    npm i amfe-flexible -S

然后继续，根据VUE-CLI3提供的新配置方法，在**VUE-config.js**中对CSS做配置：

const autoprefixer = require('autoprefixer');
    const pxtorem = require('postcss-pxtorem');
    module.exports = {
        css:{
          // modules:false,
          // extract:true,
          sourceMap:false,
          loaderOptions: {
            postcss: {
              plugins: [
                autoprefixer(),
                pxtorem({
                  rootValue: 37.5,
                  propList: ['*']
                })
              ]
            }
          }
        }
    }

这段配置就算是css的预加载配置，**rootValue **  75.0的值其实就是代表ui设计稿的750px的像素，引用的时候css直接写宽750px就相当于100％，它会自动根据屏幕进行计算成rem，无需对原测量值进行REM的换算（这里推荐37.5，结合2x的设计图开发，因为vant的组件你会发现37.5更为适合）。

只配置这一个还不够，只做到这一步是没法自适应的，因为它本身没有对html的font-size进行计算，基本不会变化，我们找到入口文件**main.js**，引入以下代码即可：

import 'amfe-flexible';

这样就能实现该UI框架的REM自适应了，而且全局也不用去配置REM的布局，直接安照UI设计稿750px写像素单位。开发更加高效。

[Link 1]: https://blog.csdn.net/qq_40513881/article/details/84103427
[https_youzan.github.io_vant_zh-CN_quickstart]: https://youzan.github.io/vant/#/zh-CN/quickstart