基于 Ant Design 和 Vue 的 企业级 UI 组件库 Ant Design Vue

基于 Ant Design 和 Vue 的 企业级 UI 组件库 Ant Design Vue

MIT
JavaScript 查看源码»
跨平台
2018-10-29
tangjinzhou

Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库,用于开发和服务于企业级中后台产品。

特性

  • 提炼自企业级中后台产品的交互语言和视觉风格。

  • 开箱即用的高质量 Vue 组件。

  • 共享 Ant Design of React 设计工具体系。

支持环境

  • 现代浏览器和 IE9 及以上(需要 polyfills)。

  • 支持服务端渲染。

安装

使用 npm 或 yarn 安装

我们推荐使用 npm 或 yarn 的方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。

$ npm install ant-design-vue --save
$ yarn add ant-design-vue

如果你的网络环境不佳,推荐使用 cnpm

组件库使用了 vue 的新特性slot-scope(2.5.0新增), provide / inject(2.2.0新增)

浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 antd

我们在 npm 发布包内的 ant-design-vue/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。你也可以通过 https://www.jsdelivr.com/package/npm/ant-design-vue 或 UNPKG 进行下载。

强烈不推荐使用已构建文件,这样无法按需加载,而且难以获得底层依赖模块的 bug 快速修复支持。

注意:引入 antd.js 前你需要自行引入 moment

示例

import Vue from 'vue'
import { DatePicker } from 'ant-design-vue';
Vue.component(DatePicker.name, DatePicker)

引入样式:

import 'ant-design-vue/dist/antd.css';  // or 'ant-design-vue/dist/antd.less'

按需加载

下面两种方式都可以只加载用到的组件。

  • 使用 babel-plugin-import(推荐)。

    // .babelrc or babel-loader option
    {
      "plugins": [
        ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
      ]
    }

    注意:webpack 1 无需设置 libraryDirectory

    然后只需从 ant-design-vue 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。

    // babel-plugin-import 会帮助你加载 JS 和 CSS
    import { DatePicker } from 'ant-design-vue';
  • 手动引入

    import DatePicker from 'ant-design-vue/lib/date-picker';  // 加载 JS
    import 'ant-design-vue/lib/date-picker/style/css';        // 加载 CSS
    // import 'ant-design-vue/lib/date-picker/style';         // 加载 LESS

关于 ant-design-vue

众所周知,Ant Design作为一门设计语言面世,经历过多年的迭代和积累,它对UI的设计思想已经成为一套事实标准,受到众多前端开发者及企业的追捧和喜爱,也是React开发者手中的神兵利器。希望ant-design-vue能够让Vue开发者也享受到Ant Design的优秀设计。

ant-design-vue 是 Ant Design 的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致,真正做到了样式0修改,组件API也尽量保持了一致。

Ant Design Vue 致力于提供给程序员愉悦的开发体验。

的码云指数为
超过 的项目
加载中

评论(8)

啥不懂
啥不懂
这个是官方的吗
H
Habit
vue 版的 ant 真心差得远了....可以用俩字形容!
这是一个小号
为什么差得远?
H
Habit
你用用就知道了,react不像react,vue不像vue的,BUG多多
蛋狗屎
蛋狗屎

引用来自“_凤求凰_”的评论

今天被骂惨了吧

引用来自“拒绝诱惑”的评论

为啥被骂?

引用来自“_凤求凰_”的评论

圣诞彩蛋。。。这么出名的事件你不知道?
那不是ant-design-react ?
_凤求凰_
_凤求凰_

引用来自“_凤求凰_”的评论

今天被骂惨了吧

引用来自“拒绝诱惑”的评论

为啥被骂?
圣诞彩蛋。。。这么出名的事件你不知道?
拒绝诱惑
拒绝诱惑

引用来自“_凤求凰_”的评论

今天被骂惨了吧
为啥被骂?
_凤求凰_
_凤求凰_
今天被骂惨了吧

官宣!vue.ant.design 低调上线

官宣!官宣!官宣! 是的,你没看错就是那个 https://vue.ant.design。 至此,Ant Design 已经全面覆盖了 React、Angular、Vue 三大前端框架,向着世界第一好用的 UI 设计语言迈进。 距离 an...

2019/02/18 11:58

没有更多内容

加载失败,请刷新页面

没有更多内容

1
回答
把 ant design vue 集成到 laravel 里之后,用 layout 提示找不到

代码如下: <template> <Layout> <Header>header</Header> <Layout> ...

2019/04/15 09:01

没有更多内容

加载失败,请刷新页面

没有更多内容

使用Ant Design 和Vue,React中后台开发套餐

前言 目前Ant Design 提供 React 和 Vue 两种整合开发框架,开箱即用的中台前端/设计解决方案,可适合中小公司统一后台开发技术栈,本来只是业务信息系统,不要重复造轮子 AntDesign of Rea...

2019/01/23 16:36
4.4K
0
vue 资源

示例 vue开源项目库汇总 mobile ionic vue 的实现 ant design ant-design 官网 vue antd vue antd admin element element 使用中的问题 dynamicform nuxt bootstrap coreui vue shards 组件开...

2018/09/03 08:36
209
0
ant-design-vue组件的三种加载方式

完整引入 main.js中全局引入并注册 import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' Vue.use(Antd) 在页面中不再需要引入注册组件,可以直接使用所有的组件 <tem...

2018/08/16 12:19
4W
0
Ant Design Vue

我对于Vue会更加熟悉一点。Ant Desing是基于Reat来实现的。要不还有一套是Angular的实现。 Ant Design of Vue vueComponent / ant-design-vue......

2018/10/30 10:29
514
0
设计

不会设计没关系!看看这七个实用的网页UI设计小技巧! 参考 侧边栏 element-ui awesome-element find 覆盖element ui样式 element-ui 官方文档页面 换肤方式 ant design ant-design-vue vue-...

2018/08/20 17:39
118
0
vue使用ant-design-vue时按组件加载遇到的问题

一直很喜欢ant-design-vue这一套ui,在使用过成中遇到一些问题。 ant-design-vue文档:https://vue.ant.design/docs/vue/use-with-vue-cli-cn/ 在官方文档中如果要vue/cli3如果要按组件加载,...

2019/05/25 20:04
71
0
一些前端ui框架

如题只是‘一些前端ui框架’,排名不分先后,仅做参考。 兼容ie8+ layui (谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来...

2019/12/10 15:42
31
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部