antd-mobile-vue 的Vue3版本来了

出于对ant-design风格的喜爱，此前我曾将ant-design-mobile移植到vue上，形成了antd-mobile-vue，目前看来仍是vue上唯一移植ant-design-mobile较为完整的组件库，因为看到也有一部分人在使用，而且现在vue3的普遍程度也越来越高，因此决定对其进行vue3的适配

antd-mobile-vue是什么

antd-mobile-vue是基于ant-design-mobile移植的vue版本的移动端组件库

项目地址

vue3版本 github.com/wuhao000/an…

vue2版本 github.com/wuhao000/an…

移植的完整度如何

ant-design-mobile 有47个组件，antd-mobile-vue移植了44个

此次升级做了什么

• antd-mobile-vue的所有组件（除chart外）全部完成升级
• 使用vite进行开发

如何使用

安装

 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
  }
});

注意事项

• 原来使用v-model进行双向绑定的现在全部使用v-model:value

与ant design mobile的组件比较

组件名称	antd-mobile	antd-mobile-vue	示例移植	说明
Accordion	√	√	√
ActionSheet	√	√	√
ActivityIndicator	√	√	√
Badge	√	√	√
Button	√	√	√
Calendar	√	√	√
Card	√	√	√
Carousel	√	√	√
Checkbox	√	√	√
DatePicker	√	√	√
DatePickerView	√	√	√
Drawer	√	√	√
Flex	√	√	√
Grid	√	√
Icon	√	√	√
ImagePicker	√	√	√
InputItem	√	v	√
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	√	[无]