diff --git a/site/src/vueDocs/introduce.en-US.md b/site/src/vueDocs/introduce.en-US.md index 771985c88..e91f54c9d 100644 --- a/site/src/vueDocs/introduce.en-US.md +++ b/site/src/vueDocs/introduce.en-US.md @@ -40,7 +40,7 @@ Following the Ant Design specification, we developed a Vue UI library `antd` tha - Stable: [![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue) -You can subscribe to this feed for new version notifications: https://github.com/vueComponent/ant-design-vue/releases.atom +You can subscribe to this feed for new version notifications: ## Installation @@ -98,6 +98,41 @@ import 'ant-design-vue/dist/reset.css'; `ant-design-vue` supports ES modules tree shaking by default. +### Automatically import components on demand + +#### [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) + +If you're using 'Vite', we recommend using 'unplugin-vue-components' + +```bash +$ npm install unplugin-vue-components -D +``` + +```js +// vite.config.js +import { 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 + }), + ], + }), + ], +}); +``` + +You can then import 'ant-design-vue' components directly in your code, and the plugin will automatically convert your code to 'import {Button} from 'ant-design-vue''. + +```jsx +import { Button } from 'ant-design-vue'; +``` + ## Links - [Home Page](https://www.antdv.com/) @@ -122,7 +157,7 @@ As we all know, Ant Design, as a design language, has gone through many years of The ant-design-vue is the Vue implementation of Ant Design. The style of the component is kept in sync with Ant Design. The html structure and css style of the component are also consistent. The style 0 modification is really achieved, and the component API is kept as consistent as possible. -Ant Design Vue is committed to providing programmers with a ** pleasant ** development experience. +Ant Design Vue is committed to providing programmers with a **pleasant** development experience. ## THANK YOU diff --git a/site/src/vueDocs/introduce.zh-CN.md b/site/src/vueDocs/introduce.zh-CN.md index 8b231d653..be41e1216 100644 --- a/site/src/vueDocs/introduce.zh-CN.md +++ b/site/src/vueDocs/introduce.zh-CN.md @@ -40,7 +40,7 @@ - 稳定版:[![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue) -你可以订阅:https://github.com/vueComponent/ant-design-vue/releases.atom 来获得稳定版发布的通知。 +你可以订阅: 来获得稳定版发布的通知。 ## 安装 @@ -98,6 +98,41 @@ import 'ant-design-vue/dist/reset.css'; `ant-design-vue` 默认支持基于 ES modules 的 tree shaking。 +### 自动按需引入组件 + +#### [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) + +如果你使用的是 `Vite` ,我们推荐使用 `unplugin-vue-components` + +```bash +$ npm install unplugin-vue-components -D +``` + +```js +// vite.config.js +import { 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 + }), + ], + }), + ], +}); +``` + +然后你可以在代码中直接引入 `ant-design-vue` 的组件,插件会自动将代码转化为 `import { Button } from 'ant-design-vue'` 的形式。 + +```jsx +import { Button } from 'ant-design-vue'; +``` + ## 链接 - [首页](https://www.antdv.com/)