### Install Ant Design Vue

Source: https://www.antdv.com/docs/vue/getting-started

Command to install the ant-design-vue package.

```bash
$ npm i --save ant-design-vue@4.x
```

--------------------------------

### Initialize Project with Vue CLI

Source: https://www.antdv.com/docs/vue/getting-started

Commands to install Vue CLI globally and create a new project.

```bash
$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

$ vue create antd-demo
```

--------------------------------

### Initialize Project with Vite

Source: https://www.antdv.com/docs/vue/getting-started

Command to create a new project using Vite.

```bash
$ npm create vite@latest
```

--------------------------------

### Global Registration All Components

Source: https://www.antdv.com/docs/vue/getting-started

Example of globally registering all Ant Design Vue components and their styles.

```javascript
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App);

app.use(Antd).mount('#app');
```

--------------------------------

### Initialize Project with Rsbuild

Source: https://www.antdv.com/docs/vue/getting-started

Command to create a new project using Rsbuild.

```bash
$ npm create rsbuild@latest
```

--------------------------------

### SSR Static Style Extraction Example

Source: https://www.antdv.com/docs/vue/ssr-extract-ssr-cn

This example demonstrates how to create a cache, render components to extract styles, and then get the style content.

```javascript
const cache = createCache();

// HTML Content
renderToString(
  <StyleProvider cache={cache}>
    <Button />
    <Switch />
    <Input />
    {/* Rest antd components */}
  </StyleProvider>,
);

// Style Content
const styleText = extractStyle(cache);
```

--------------------------------

### Installation using yarn

Source: https://www.antdv.com/docs

Install ant-design-vue version 4.x using yarn.

```bash
$ yarn add ant-design-vue@4.x
```

--------------------------------

### Installation using npm

Source: https://www.antdv.com/docs

Install ant-design-vue version 4.x using npm.

```bash
$ npm install ant-design-vue@4.x --save
```

--------------------------------

### Install unplugin-vue-components

Source: https://www.antdv.com/docs

Install unplugin-vue-components for on-demand component import.

```bash
$ npm install unplugin-vue-components -D
```

--------------------------------

### Global Registration Some Components

Source: https://www.antdv.com/docs/vue/getting-started

Example of globally registering specific Ant Design Vue components and making message API available.

```javascript
import { createApp } from 'vue';
import { Button, message } from 'ant-design-vue';
import App from './App';

const app = createApp(App);

/* Automatically register components under Button, such as Button.Group */
app.use(Button).mount('#app');

app.config.globalProperties.$message = message;
```

--------------------------------

### Component Refactoring Example

Source: https://www.antdv.com/docs/vue/migration-v3

Demonstrates refactoring of Ant Design Vue components, specifically `a-input` within `a-form-item` and `a-form-item-rest`.

```html
<a-input name="a"></a-input>
<a-form-item-rest><a-input name="b"></a-input></a-form-item-rest>
</a-form-item>
```

--------------------------------

### Custom Form Component Example

Source: https://www.antdv.com/docs/vue/migration-v3

Example of a custom component that injects Form.Item context to handle multiple form items.

```vue
<script>
  // custom component
  import { Form } from 'ant-design-vue';
  export default {
    name: 'custom-name',
    setup() {
      const formItemContext = Form.useInjectFormItemContext();
    },
  };
</script>


```

```vue
<a-form-item>
  <custom-com>
    <a-input name="a"></a-input>
    <a-input name="b"></a-input>
  </custom-com>
</a-form-item>


```

--------------------------------

### Install ant-design-vue v4

Source: https://www.antdv.com/docs/vue/migration-v4-cn

Command to install the latest version of ant-design-vue.

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

```

--------------------------------

### Example of on-demand import

Source: https://www.antdv.com/docs

Example of importing an Ant Design Vue component directly after configuring unplugin-vue-components.

```javascript
import { Button } from 'ant-design-vue';
```

--------------------------------

### Local Registration

Source: https://www.antdv.com/docs/vue/getting-started

Example of locally registering Ant Design Vue Button and Button.Group components within a Vue component.

```vue
<template>
  <a-button>Add</a-button>
</template>
<script>
  import { Button } from 'ant-design-vue';
  const ButtonGroup = Button.Group;

  export default {
    components: {
      AButton: Button,
      AButtonGroup: ButtonGroup,
    },
  };
</script>
```

--------------------------------

### Combining Algorithms

Source: https://www.antdv.com/docs/vue/customize-theme-cn

Example of combining multiple algorithms, such as `darkAlgorithm` and `compactAlgorithm`, to create a theme with combined characteristics.

```javascript
import { theme } from 'ant-design-vue';

const { darkAlgorithm, compactAlgorithm } = theme;

const theme = {
  algorithm: [darkAlgorithm, compactAlgorithm],
};

```

--------------------------------

### Map Token Example

Source: https://www.antdv.com/docs/vue/customize-theme-cn

Shows an example of overriding a Map Token, `colorPrimaryBg`, for theme customization.

```javascript
const theme = {
  token: {
    colorPrimaryBg: '#e6f7ff',
  },
};

```

--------------------------------

### v2 validateFields with Promise

Source: https://www.antdv.com/docs/vue/migration-v2-cn

Example of form validation using Promises in v2.x.

```javascript
// v2
validateFields().then(values => {
  // Do something with value
});
```

--------------------------------

### v1 validateFields with callback

Source: https://www.antdv.com/docs/vue/migration-v2-cn

Example of form validation using a callback in v1.x.

```javascript
// v1
validateFields((err, value) => {
  if (!err) {
    // Do something with value
  }
});
```

--------------------------------

### Component popup controlled visible API unified

Source: https://www.antdv.com/docs/vue/migration-v4-cn

Example demonstrating the unified `open` API for controlled visibility of component popups.

```vue
<template>
-- <a-modal :visible="visible">content</a-modal>
++ <a-modal :open="visible">content</a-modal>

-- <a-tag :visible="visible">tag</a-tag>
++ <a-tag v-if="visible">tag</a-tag>

  <a-table
    :data="[]"
    :columns="[
      {
        title: 'Name',
        dataIndex: 'name',
--      filterDropdownVisible: visible,
++      filterDropdownOpen: visible,
      },
    ]"
  />

-- <a-slider :tooltipVisible="visible" />
++ <a-slider :tooltip="{ open: visible }" />
</template>

<script setup>
import { ref } from 'vue';

const visible = ref(true);
</script>

```

--------------------------------

### Component popup classname API unified

Source: https://www.antdv.com/docs/vue/migration-v4-cn

Example showing the unified `popupClassName` API for component popups.

```vue
<template>
  <a-select
--  dropdownClassName="my-select-popup"
++  popupClassName="my-select-popup"
  />
</template>

```

--------------------------------

### Seed Token Example

Source: https://www.antdv.com/docs/vue/customize-theme-cn

Demonstrates how to modify the `colorPrimary` Seed Token to change the theme color.

```javascript
const theme = {
  token: {
    colorPrimary: '#1890ff',
  },
};

```

--------------------------------

### Configuring Theme in ConfigProvider

Source: https://www.antdv.com/docs/vue/customize-theme-cn

Example of how to configure the theme by passing a `theme` object to `a-config-provider` to change the primary color.

```vue
<template>
  <a-config-provider
    :theme="{
      token: {
        colorPrimary: '#00b96b',
      },
    }">
    <a-button />
  </a-config-provider>
</template>

```

--------------------------------

### Using extractStyle Utility

Source: https://www.antdv.com/docs/vue/ssr-extract-ssr-cn

This snippet shows how to import and use the `extractStyle` utility to get all Ant Design component styles, excluding popup components, and then write them to a file.

```javascript
import { extractStyle } from 'ant-design-vue/lib/_util/static-style-extract';
import fs from 'fs';

// `extractStyle` containers all the antd component
// excludes popup like component which is no need in ssr: Modal, message, notification, etc.
const css = extractStyle();

fs.writeFile(...);
```

--------------------------------

### Webpack config for less migration

Source: https://www.antdv.com/docs/vue/migration-v4-cn

Webpack configuration example for migrating less variables to v3 using a compatibility package.

```javascript
const { theme } = require('ant-design-vue/lib');
const convertLegacyToken = require('ant-design-vue/lib/theme/convertLegacyToken');

const { defaultAlgorithm, defaultSeed } = theme;

const mapToken = defaultAlgorithm(defaultSeed);
const v3Token = convertLegacyToken(mapToken);

// Webpack Config
module.exports = {
  // ... other config
  loader: 'less-loader',
  options: {
    lessOptions: {
      modifyVars: v3Token,
    },
  },
};

```

--------------------------------

### Using Design Tokens with `useToken` Hook

Source: https://www.antdv.com/docs/vue/customize-theme-cn

Example of using the `useToken` hook to access current theme Design Tokens and apply them to component styles, like setting the background color of a button.

```vue
<template>
  <a-button :style="{ backgroundColor: token.colorPrimary }">Button</a-button>
</template>

<script setup>
  import { theme } from 'ant-design-vue';
  const { useToken } = theme;
  const { token } = useToken();
</script>

```

--------------------------------

### New Icon Usage (v2.x)

Source: https://www.antdv.com/docs/vue/migration-v2-cn

Illustrates the recommended way to use icons in v2.x with on-demand import.

```html
<template>
  <smile-outlined />
  <a-button>
    <template #icon><smile-outlined /></template>
  </a-button>
</template>
<script>
  import SmileOutlined from '@ant-design/icons-vue/SmileOutlined';
  export default {
    components: {
      SmileOutlined,
    },
  };
</script>
```

--------------------------------

### Using Preset Algorithms

Source: https://www.antdv.com/docs/vue/customize-theme-cn

Demonstrates how to switch between preset algorithms like `darkAlgorithm` by modifying the `algorithm` property in the `theme` object within `a-config-provider`.

```vue
<template>
  <a-config-provider
    :theme="{
      algorithm: theme.darkAlgorithm,
    }">
    <a-button />
  </a-config-provider>
</template>

<script setup>
  import { theme } from 'ant-design-vue';
</script>

```

--------------------------------

### Remove babel-plugin-import

Source: https://www.antdv.com/docs/vue/migration-v4-cn

Example of removing `babel-plugin-import` from package.json and .babelrc.

```json
"plugins": [
-- ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "lib"}, "ant-design-vue"],
]

```

--------------------------------

### Extracting Styles with Mixed Themes

Source: https://www.antdv.com/docs/vue/ssr-extract-ssr-cn

Demonstrates how to extract styles when using mixed themes by providing a function to `extractStyle` that wraps components in `ConfigProvider` with different themes.

```javascript
// `node` is the components set we prepared
const css = extractStyle(node => (
  <>
    <ConfigProvider theme={theme1}>{node}</ConfigProvider>
    <ConfigProvider theme={theme2}>{node}</ConfigProvider>
    <ConfigProvider theme={theme3}>{node}</ConfigProvider>
  </>
));
```

--------------------------------

### Old Icon Usage

Source: https://www.antdv.com/docs/vue/migration-v2-cn

Demonstrates the deprecated way of using icons in v1.x.

```html
<a-icon type="smile" />
<a-button icon="smile" />
```

--------------------------------

### Basic Usage

Source: https://www.antdv.com/docs

Import and use the DatePicker component and its stylesheets.

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

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

--------------------------------

### Customize Design Token

Source: https://www.antdv.com/docs/vue/customize-theme

Example of customizing the primary color using the `theme.token.colorPrimary` property within `a-config-provider`.

```vue
<template>
  <a-config-provider
    :theme="{
      token: {
        colorPrimary: '#00b96b',
      },
    }"
  >
    <a-button />
  </a-config-provider>
</template>

```

--------------------------------

### Alias Token Example

Source: https://www.antdv.com/docs/vue/customize-theme-cn

Illustrates overriding an Alias Token, `colorLink`, for specific component style control.

```javascript
const theme = {
  token: {
    colorLink: '#1890ff',
  },
};

```

--------------------------------

### Import in Browser

Source: https://www.antdv.com/docs

Import necessary dayjs scripts and plugins before using antd.js.

```html
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>

```