在此前发布的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