antd-mobile-vue3.0 - ant mobile for vue 3.0

(ant mobile for vue 3.0)

Created at: 2021-04-06 09:13:15

Language: TypeScript

URL: https://github.com/wuhao000/antd-mobile-vue3.0

License: Apache-2.0

Vue3.0 is upgraded on the basis of the previously released Antd Mobile Vue . This is the most complete component library ported from Ant Design Mobile to Vue so far.

If you have any questions, you can add a personal WeChat (wuhao1200), welcome to communicate together

View document

antd-mobile-vue

Based on the component library of Vue3, the code is converted from antd-mobile to Vue version, and most of the components of antd-mobile are now available

Exemplary portion of the assembly and has

ant design mobile

official network synchronization

Comparison with antd-mobile components

There antd-mobile

components, the project as of now transplanted

one, to complete the assembly of up to 95%

Compared with the components of ant design mobile

Component name	antd-mobile	antd-mobile-vue	Example migration
Accordion	√	√	√
ActionSheet	√	√	√
ActivityIndicator	√	√	√
Badge	√	√	√
Button	√	√	√
Calendar	√	√	√
Card	√	√	√
Carousel	√	√	√
Checkbox	√	√	√
DatePicker	√	√	√
DatePickerView	√	√	√
Drawer	√	√	√
Flex	√	√	√
Grid	√	√
Icon	√	√	√
ImagePicker	√	√	√
InputItem	√	v	√
List	√	√	√
ListView	√	[none]
Menu	√	√	√
Modal	√	√	√
NavBar	√	√	√
NoticeBar	√	√	√
Pagination	√	√	√
Picker	√	√	√
PickerView	√	√
Popover	√	√	√
Progress	√	√	√
Radio	√	√	√
PullToRefresh	√	√	√
Result	√	√	√
SearchBar	√	√
SegmentedControl	√	√	√
Slider	√	√	√
Range	√	√	√
Stepper	√	√	√
Steps	√	√	√
SwipeAction	√	[none]
Switch	√	√
TabBar	√	√	√
Tabs	√	√	√
Tag	√	√	√
TextareaItem	√	√	√
Toast	√	√	√
WhiteSpace	√	√	√
WingBlank	√	√	√
LocaleProvider	√	[none]

Install

 npm i antd-mobile-vue-next -S

use

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

app.use(AntdMobile)

On-demand introduction

On-demand loading requires assistance

babel-plugin-import

, so that only the required components can be introduced to reduce the size of the project

npm i babel-plugin-import -D

Modify babel.config.js to:

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

Introduce components

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

Development environment start

npm run dev

Pack

npm run build

Publish to npm repository

npm publish