当我建好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: 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写像素单位。开发更加高效。