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

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

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: 75.0,
              propList: ['*']
            })
          ]
        }
      }
    }
}

这段配置就算是css的预加载配置，rootValue 75.0的值其实就是代表ui设计稿的750px的像素，引用的时候css直接写宽750px就相当于100％，它会自动根据屏幕进行计算成rem，无需对原测量值进行REM的换算。

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

import 'amfe-flexible';

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

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

猜你喜欢