Vue版本的ant-design移动组件库来啦

时间 2019-11-08

原文原文链接

我的比较喜欢ant-design的风格和设计理念，但限于公司前端框架主要是Vue，因此一直没用起来。在今年初，私人开发的ant-design-vue被官方承认，vue的桌面端终于可使用ant-design，然而在找了一圈以后发现移动端没有任何ant-design-mobile的vue移植版本，因此打算本身动手开发。javascript

这几个月一直在开发公司移动管理系统，因此在开发的过程当中持续的移植了antd-mobile的许多组件，目前已经移植了80%的组件，覆盖了绝大部分经常使用的组件。css

整体来讲，大部分组件的移植难度不是很大，剩余的组件没有移植主要缘由是项目中并未用到，因此没有动力，若是有人须要其余组件，能够在在文章或github上留言，我会尽快响应。html

Github项目地址前端

与antd-mobile的组件对比vue

antd-mobile 共有 47个组件，本项目截至如今移植了37个java

组件名称	antd-mobile	antd-mobile-vue
Accordion	√	√
ActionSheet	√	√
ActivityIndicator	√	√
Badge	√	√
Button	√	√
Calendar	√	√
Card	√	√
Carousel	√	√
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)
复制代码

按需引入

非CDN方式引入目前只支持TypeScriptgit

按需加载须要借助babel-plugin-import, 这样就能够只引入须要的组件，以减少项目体积github

npm i babel-plugin-import -D
复制代码

将babel.config.js修改成：shell

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

引入组件npm

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

cdn引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<link rel="stylesheet" href="https://public-file.aegis-info.com/antd-mobile-vue/0.3.0/antdm.css.gz">
<script src="https://public-file.aegis-info.com/antd-mobile-vue/0.3.0/antdm.umd.min.js.gz"></script>
复制代码

Github项目地址