在此前发布的Antd Mobile Vue的基础上进行了vue3.0的升级
这是目前为止Ant Design Mobile移植到Vue最完整的组件库
新增部分v5组件移植

如有问题可添加个人微信（wuhao1200），欢迎共同交流

查看文档

antd-mobile-vue

基于 Vue3 的组件库，代码由antd-mobile转为Vue版本，目前已具备antd-mobile的绝大部分组件

部分组件的示例已和 ant design mobile 官网同步

与antd-mobile的组件对比

antd-mobile 共有 47个组件，本项目截至现在移植了44个, 组件完成度达到95%
antd-mobile V5 共有 58个组件(不含ConfigProvider)，本项目截至现在移植了51个, 组件完成度达到88%

与ant design mobile的组件比较

组件名称	antd-mobile	antd-mobile-vue	示例移植	说明
Accordion	√	√	√
ActionSheet	√	√	√
ActivityIndicator	√	√	√
Badge	√	√	√
Button	√	√	√
Calendar	√	√	√
Card	√	√	√
Carousel	√	√	√
Checkbox	√	√	√
DatePicker	√	√	√
DatePickerView	√	√	√
Drawer	√	√	√
Empty	√	√	√
Flex	√	√	√
Grid	√	√
Icon	√	√	√
ImagePicker	√		√
InfiniteScroll	√	v	√
InputItem	√	v	√
List	√	√	√
ListView	√	[无]
Loading	√	√	√
Mask	√	√	√
Menu	√	√	√
Modal	√	√	√
NavBar	√	√	√
NoticeBar	√	√	√
Pagination	√	√	√
Picker	√	√	√
PickerView	√	√
Popover	√	√	√
Progress	√	√	√
Radio	√	√	√
PullToRefresh	√	√	√
Result	√	√	√
SearchBar	√	√
SegmentedControl	√	√	√
Space	√	√	√
Slider	√	√	√
Range	√	√	√
Stepper	√	√	√
Steps	√	√	√
SwipeAction	√	√
Switch	√	√
TabBar	√	√	√
Tabs	√	√	√
Tag	√	√	√
TextareaItem	√	√	√
Toast	√	√	√
WhiteSpace	√	√	√
WingBlank	√	√	√
LocaleProvider	√	[无]
AutoCenter		√
CapsuleTabs		√
Cascader		√
CascaderView		√
Dropdown		√
Ellipsis		√
FloatingBubble		√
ErrorBlock		√
FloatingPanel		√
Image		√
ImageViewer		√
ImageUploader		√
IndexBar		√
JumboTabs		√
NumberKeyboard		√
PasscodeInput		√
ProgressCircle		√
SafeArea		√
Selector		√
Skeleton		√
SideBar		√
Swiper		√
TreeSelect		√
VirtualInput		√
WaterMark		√

安装

  npm i antd-mobile-vue-next -S

使用

 import AntdMobile from 'antd-mobile-vue-next'

app.use(AntdMobile)

按需引入

按需加载需要借助babel-plugin-import, 这样就可以只引入需要的组件，以减小项目体积

 npm i babel-plugin-import -D

将babel.config.js修改为：

 module.exports = {
  presets: ['@vue/app'],
  plugins: [
    [
      'import',
      {
        libraryName: 'antd-mobile-vue-next',
        libraryDirectory: 'es',
        style: true
      },
      'antd-mobile-vue-next'
    ]
  ]
};

引入组件

 import { Alert } from "antd-mobile-vue-next";
defineComponent({
components: {
[Alert.name]: Alert
}
});

开发环境启动

 npm run dev 

打包

 npm run build

发布到npm仓库

 npm publish