amv
antd-mobile-vue-next
npm i antd-mobile-vue-next
amv

antd-mobile-vue-next

ant mobile for vue 3.0

by wuhao

0.0.1-63 (see all)License:Apache-2.0TypeScript:Built-In
npm i antd-mobile-vue-next
Readme

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

如有问题可添加个人微信(wuhao1200),欢迎共同交流

查看文档

antd-mobile-vue

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

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

与antd-mobile的组件对比

antd-mobile 共有 47个组件,本项目截至现在移植了44个, 组件完成度达到95%

与ant design mobile的组件比较

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

安装

 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

Downloads/wk

68

GitHub Stars

19

LAST COMMIT

10mos ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
0.0.1-63
latest
7mos ago
No alternatives found
No tutorials found
Add a tutorial