• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

wuhao000/antd-mobile-vue: ant design mobile/antd mobile的vue实现

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

wuhao000/antd-mobile-vue

开源软件地址(OpenSource Url):

https://github.com/wuhao000/antd-mobile-vue

开源编程语言(OpenSource Language):

JavaScript 80.9%

开源软件介绍(OpenSource Introduction):

如有问题可添加个人微信(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引入

<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/<version>/antdm.umd.min.js.gz"></script>

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

开发环境启动

npm run dev 

创建组件

npm run create <name> <cn-name> <type> 
  • 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>
  • name:要删除的组件名称

发布到npm仓库

npm publish



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap