初探H5踩坑记之mandMobile

**初探H5踩坑记之mandMobile使用小记** 

mandMobile是滴滴开源的专门面向金融场景的Vue移动端UI组件库（非金融类也可以用），最近我司正在孵化一个金融类产品，本人准备使用。

**前言** 

最近在做一个移动端项目，需要使用到一个UI组件库，经过一番比较，选择了mandMobile。mandMobile是滴滴开源的专门面向金融场景的Vue移动端UI组件库，功能齐全，而且开源免费，非常适合我们的项目。

但是，在使用mandMobile的过程中，也遇到了不少坑，在这里给大家分享一下，希望能够帮助大家避免踩坑。

**一、安装问题** 

按照官方文档的步骤进行安装，在引入组件库的时候出现了报错，提示缺少依赖。这是因为官方文档没有提到需要先安装依赖，所以需要手动安装。

npm install --save mand-mobile

安装完成后，再引入组件库就可以正常使用了。

import mandMobile from 'mand-mobile';

Vue.use(mandMobile);

**二、样式问题** 

mandMobile的样式是基于LESS的，在项目中使用需要先引入LESS文件。

@import "~mand-mobile/lib/mand-mobile.less";

另外，还需要在项目中引入mandMobile的字体文件。

@font-face {
font-family: 'mand-mobile';
src: url('~mand-mobile/lib/fonts/mand-mobile.ttf') format('truetype');
}

**三、组件使用问题** 

mandMobile提供了丰富的组件，但是有些组件的使用方法与官方文档的不符，这里给大家列举几个常见的例子。

1. Button组件

Button组件的type属性有两种值，分别是primary和default。但是，在官方文档中，并没有提到default值，而是直接将primary值作为默认值。这导致初次使用者很容易误解，以为Button组件只有primary一种类型。

2. Cell组件

Cell组件的href属性可以指定一个链接，当用户点击Cell组件时，会跳转到该链接。但是，在官方文档中，并没有提到href属性，而是直接将to属性作为默认值。这导致初次使用者很容易误解，以为Cell组件只能用于路由跳转。

3. List组件

List组件可以包含多个Cell组件，但是，在官方文档中，并没有提到Cell组件是List组件的子组件。这导致初次使用者很容易误解，以为Cell组件只能单独使用。

**四、踩坑总结** 

通过以上几个例子，我们可以看到，mandMobile的官方文档存在一些问题，这些问题很容易导致初次使用者踩坑。为了避免踩坑，初次使用者在使用mandMobile时，一定要仔细阅读官方文档，并结合实际项目进行调试。

**五、建议** 

1. 在使用mandMobile之前，一定要仔细阅读官方文档，并结合实际项目进行调试。
2. 如果在使用过程中遇到问题，可以查阅官方文档，也可以在GitHub上提交issue。
3. mandMobile是一个开源项目，欢迎大家积极贡献代码和文档。

**六、后续更新** 

本小记会持续更新，记录使用中的各种问题和解决方案。希望能够帮助初次使用mandMobile的人员，减少踩坑的可能。