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

特性

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

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

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

版本

稳定版 V4.1.2

安装

使用 npm 或 yarn 安装

npm install ant-design-vue@4.x --save

yarn add ant-design-vue@4.x

浏览器引入

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

注意：引入 antd.js 前你需要自行引入 vue、dayjs 及其相关插件。

<script src="</script>
<script src=" 
<script src=" 
<script src=" 
<script src=" 
<script src=" 
<script src=" 
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>

示例

import { DatePicker } from 'ant-design-vue';
app.use(DatePicker);

引入样式

import 'ant-design-vue/dist/reset.css';

自动按需引入组件

unplugin-vue-components

如果你使用的是 Vite ，我们推荐使用 unplugin-vue-components

npm install unplugin-vue-components -D

// vite.config.jsimport { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
  plugins: [
    // ...
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
    }),
  ],});