Need help with antd-mobile-vue?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

wuhao000
177 Stars 26 Forks Apache License 2.0 93 Commits 21 Opened issues

Description

antd-mobile的vue实现

Services available

!
?

Need anything else?

Contributors list

No Data

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

该项目原本为公司内部项目,现放到github上开源,发布个时候项目名称改为antd-mobile-vue

查看文档

antd-mobile-vue

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

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

与antd-mobile的组件对比

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

另外新增组件

组件名称

用途
Chart 图表组件

与ant design mobile的组件比较

组件名称

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

使用

完整引入

import AntdMobile from 'antd-mobile-vue'
Vue.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',
        libraryDirectory: 'es',
        style: true
      },
      'antd-mobile-vue'
    ]
  ]
};

引入组件

import { Alert } from "antd-mobile-vue";
@Component({
  components: {
    Alert
  }
})

cdn引入


cdn没有打包vue,因此需要独立引入vue的cdn资源

开发环境启动

npm run dev 

创建组件

npm run create    
  • name为组件名称,格式要求如下:
    • 命名统一使用小写单词,多个单词之间以-分隔
    • vue指令或工具类组件按实际作用命名
  • cn-name为组件的中文名称
  • type 可选ui(ui组件)、directive(vue指令)、tool(工具)

自动生成文档

npm run docs

代码检查

npm run lint

生成库文件

npm run lib

打包后的文件可以在html中直接引用

生产环境打包

npm run build

用于部署,如果发布到npm仓库则不需要执行

删除组件

npm run remove 
  • name:要删除的组件名称

发布到npm仓库

npm publish

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.