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
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

47
components, the project as of now transplanted
44
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 instruction
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