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

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

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 致力于提供给程序员愉悦的开发体验。

加载中

评论(0)

暂无评论

暂无资讯

暂无问答

Ant Design Vue

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

10/30 10:29
28
0
ant-design-vue组件的三种加载方式

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

08/16 12:19
1K
0
设计

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

08/20 17:39
28
0
写了个控台UI同事说像刚毕业写的,我说其实我还没人家刚毕业的写的好呢!!!

工作中台基础UI 项目介绍 SeedWorkbenchUi 简洁的中台UI,vuejs 开发,组件化,模块化 快速预览 先来波图 预览 预览地址 预览部署在 Github Page ,如果您访问时由于网络原因卡在载入界面或者...

09/19 18:05
7
0
关于前端工程化开发的框架资料汇总

1.2015前端框架何去何从 2.迷你MVVM框架 avalonjs 入门教程 3.全面理解虚拟DOM,实现虚拟DOM 4.Web前端框架与类库的思考 5.前端工程 6.FIS3 是面向前端的工程构建工具 7.2016我的心路历程:从...

2016/10/29 09:58
47
0
vue-cli3设置iview自定义主题

vue-cli3将webpack的配置都简化了,如果需要进行一些配置,需要在vue.config.js中进行配置。 iview的自定义主题使用的是less的变量覆盖,需要自定义一个less文件去覆盖iview原始的变量值。 ...

vue 资源

示例 vue开源项目库汇总 ant design element dynamicform nuxt doodoo 商城 bootstrap coreui vue 组件开发 开发组件及文档 Vue Custom Element......

09/03 08:36
16
0
移动端常用的 UI 库

一、【H5通用UI】 WeUI Star:19743 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 FrozenUI(QQ) St...

09/07 18:05
14
0
前端最受欢迎的 UI 框架

bootstrap: 由 twitter 出品的 UI 框架。经过多年的发展,社区构建出了一个强大的生态,以及各种各样的插件,基本上你所需要的都能找到。框架主要以 css 为主,js 为辅,js 组件部分依赖 jq...

09/27 19:00
2
0
全球最知名开源项目大汇总(按采用的开发语言分类)

汇总 Java: Web框架: Spring Hibernate MyBatis SpringBoot 分布式服务治理: Dubbo Zookeeper 数据源管理: Druid Jedis C3P0 分布式文件系统: Hadoop 大数据处理: ElasticSearch HBase Storm...

08/31 11:23
47
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部