个人比较喜欢ant-design的风格和设计理念，但限于公司前端框架主要是Vue，所以一直没用起来。在今年初，私人开发的ant-design-vue被官方认可，vue的桌面端终于可以使用ant-design，然而在找了一圈之后发现移动端没有任何ant-design-mobile的vue移植版本，所以打算自己动手开发。
这几个月一直在开发公司移动管理系统，所以在开发的过程中持续的移植了antd-mobile的许多组件，目前已经移植了80%的组件，覆盖了绝大部分常用的组件。
总体来说，大部分组件的移植难度不是很大，剩余的组件没有移植主要原因是项目中并未用到，所以没有动力，如果有人需要其他组件，可以在在文章或github上留言，我会尽快响应。
与antd-mobile的组件对比
antd-mobile 共有 <code>47</code>个组件，本项目截至现在移植了<code>37</code>个
| 组件名称 | antd-mobile | antd-mobile-vue | 说明 |
|---|---|---|---|
| Accordion | √ | √ | |
| ActionSheet | √ | √ | |
| ActivityIndicator | √ | √ | |
| Badge | √ | √ | |
| Button | √ | √ | |
| Calendar | √ | √ | |
| Card | √ | √ | |
| Carousel | √ | √ | |
| Checkbox | √ | √ | |
| DatePicker | √ | √ | |
| DatePickerView | √ | ||
| Drawer | √ | √ | |
| Flex | √ | √ | |
| Grid | √ | √ | |
| Icon | √ | √ | |
| ImagePicker | √ | ||
| InputItem | √ | √ | |
| List | √ | √ | |
| ListView | √ | ||
| Menu | √ | √ | |
| Modal | √ | √ | |
| NavBar | √ | √ | |
| NoticeBar | √ | √ | |
| Pagination | √ | √ | |
| Picker | √ | √ | |
| PickerView | √ | √ | |
| Popover | √ | ||
| Progress | √ | ||
| Radio | √ | √ | |
| PullToRefresh | √ | √ | |
| Result | √ | √ | |
| SearchBar | √ | √ | |
| SegmentedControl | √ | ||
| Slider | √ | √ | |
| Range | √ | √ | |
| Stepper | √ | ||
| Steps | √ | √ | |
| SwipeAction | √ | ||
| Switch | √ | √ | |
| TabBar | √ | √ | |
| Tabs | √ | √ | |
| Tag | √ | ||
| TextareaItem | √ | √ | |
| Toast | √ | √ | |
| WhiteSpace | √ | √ | |
| WingBlank | √ | √ | |
| LocaleProvider | √ |
安装
npm i antd-mobile-vue -S
使用
完整引入
import AntdMobile from 'antd-mobile-vue'
Vue.use(AntdMobile)
按需引入
非CDN方式引入目前只支持TypeScript
按需加载需要借助<code>babel-plugin-import</code>, 这样就可以只引入需要的组件，以减小项目体积
npm i babel-plugin-import -D
将babel.config.js修改为：
module.exports = {
presets: ['@vue/app'],
plugins: [
[
'import',
{
libraryName: 'antd-mobile-vue',
libraryDirectory: 'es',
style: true
},
'antd-mobile-vue'
]
]
};
引入组件
import { Alert } from "antd-mobile-vue";
@Component({
components: {
Alert
}
})
cdn引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<link rel="stylesheet" href="https://public-file.aegis-info.com/antd-mobile-vue/0.3.0/antdm.css.gz">
<script src="https://public-file.aegis-info.com/antd-mobile-vue/0.3.0/antdm.umd.min.js.gz"></script>
