这是我参与8月更文挑战的第5天，活动详情查看： 8月更文挑战” 。
近期需要开发h5端项目，基于Vue Cli4 构建的项目（已引入vue、vue-router和vuex）。
关于移动端UI库的选择
技术方案调研时备选了mint-ui、cube-ui和Vant三个移动端的UI库。
mint-ui
是饿了么团队开发的基于vue.js的移动端UI库。查看GitHub该项目维护更新的日期停留在2018年。近几年好像都没有维护和更新，担心组件遇到问题很难被解决。所以暂时决定不使用了。
cube-ui
cube-ui 是基于 Vue.js 实现的精致移动端组件库。由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。
Vant
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。提供非常友好的API开发文档及可视化页面。商城类的项目时可优选。
最终经过体验和查看各自官方文档，决定选用Vant。接下来开始介绍使用Vant的整个流程。
安装
通过 npm 安装
根据vue的版本选择对应的方式，该项目用的是vue 2.x
# Vue 2 项目，安装 Vant 2：
npm i vant -S
# Vue 3 项目，安装 Vant 3：
npm i vant@next -S
通过脚手架安装
在新项目中使用 Vant时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目并安装 Vant。
# 安装 Vue Cli
npm install -g @vue/cli
# 创建一个项目
vue create xxxxx
# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui
如图所示，点击
依赖 -> 安装依赖，搜索vant找到之后添加安装依赖，等待几分钟安装完成。之后我们在package.json文件可以看到已经成功添加。
使用
方式一：自动按需引入组件 (推荐)
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。我们选择此方式。
# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
方式二：手动按需引入组件
在不使用插件的情况下，可以手动引入需要的组件。
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
方式三：引入所有组件
Vant 支持一次性引入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
友情提醒：配置按需引入后，将不允许直接导入所有组件。
关于适配
既然是移动端的项目，适配肯定是必然的，下面介绍常用的两种适配方案。
方案一：rem适配方案
需要用到lib-flexible+postcss-pxtorem两个工具，lib-flexible是阿里手淘系开源的一个库，用于设置 rem 基准值。postcss-pxtorem是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位。
- 我们先把它们安装到项目的开发环境中：
npm i -D lib-flexible postcss-pxtorem
- 在项目根目录下添加
postcss.config.js文件，配置如下
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
};
配置完成，便可以开始使用。
查阅资料时，看到lib-flexible的github说到：由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方。 所以，接下来介绍第二种方案，项目中使用的也是第二种方案。
方案二：viewpor
postcss-px-to-viewport它将px转换成视口单位vw，vw本质上还是一种百分比单位，100vw即等于100%。
- 我们先把它安装到项目的开发环境中：
npm i postcss-px-to-viewport -D
- 在项目根目录下添加
postcss.config.js文件，配置如下
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375
}
}
};
配置完成，便可以开始使用。
兼容第三方UI库
用了vant组件库，官网也有给出配置，但是是基于375px的设计稿去做的，实际项目的设计稿是750px，为了达到理想的效果可以自己计算都除以2，或者实际项目UI也是以375px为准，显然这样不太友好。。。
1. 解决方案一
在配置中，将基准值设为750px,设置exclude忽略node_modules目录。
module.exports = {
plugins: {
autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
"postcss-px-to-viewport": {
unitToConvert: "px", // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
landscape: false // 是否处理横屏情况
}
}
};
2. 解决方案二
动态设置基准值
const path = require('path');
module.exports = ({ file }) => {
const designWidth = file.dirname.includes(path.join('node_modules', '_vant')) ? 375 : 750;
return {
plugins: {
autoprefixer: {},
"postcss-px-to-viewport": {
unitToConvert: "px",
viewportWidth: designWidth,
unitPrecision: 6,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: ["wrap"],
minPixelValue: 1,
mediaQuery: true,
exclude: [],
landscape: false
}
}
}
}
友情提醒：这里使用path.join('node_modules', '_vant')是因为适应不同的操作系统，在mac下结果为
node_modules/_vant，而在windows下结果为node_modules\_vant
友情提醒：最开始使用的是
file.dirname.includes(path.join('node_modules', 'vant'))发现并没有成功的动态设置viewportWidth，经过打印得知是_vant,我安装的版本是 "vant": "^2.12.26"，不知道是不是因为版本不同导致的，目前没有验证，有心的小伙伴可以去验证下哈~
附
关于项目所选用的的UI库和适配方案，需要根据自身项目情况和开发者习惯去衡量来决定做出最优的选择。
