ant-design vue 能用么-木庄网络博客

本文摘自PHP中文网，作者藏色散人，侵删。

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

本文操作环境：windows10系统、vue 2.9、thinkpad t480电脑。

推荐：《vue教程》

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

特性

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

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

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

支持环境

现代浏览器和 IE9 及以上（需要 polyfills）。

支持服务端渲染。

安装

使用 npm 或 yarn 安装

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

1 2	`$ 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)

引入样式：

1	`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 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

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

以上就是ant-design vue 能用么的详细内容，更多文章请关注木庄网络博客！