Skip to content

Commit fd8af23

Browse files
docs(introduce): update docs (#6539)
* docs(introduce): update docs * docs(introduce): add Dollar * Update introduce.zh-CN.md * Update introduce.en-US.md --------- Co-authored-by: tangjinzhou <[email protected]>
1 parent 9fdc297 commit fd8af23

File tree

2 files changed

+73
-3
lines changed

2 files changed

+73
-3
lines changed

site/src/vueDocs/introduce.en-US.md

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ Following the Ant Design specification, we developed a Vue UI library `antd` tha
4040

4141
- Stable: [![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue)
4242

43-
You can subscribe to this feed for new version notifications: https://github.com/vueComponent/ant-design-vue/releases.atom
43+
You can subscribe to this feed for new version notifications: <https://github.com/vueComponent/ant-design-vue/releases.atom>
4444

4545
## Installation
4646

@@ -98,6 +98,41 @@ import 'ant-design-vue/dist/reset.css';
9898

9999
`ant-design-vue` supports ES modules tree shaking by default.
100100

101+
### Automatically import components on demand
102+
103+
#### [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
104+
105+
If you're using 'Vite', we recommend using 'unplugin-vue-components'
106+
107+
```bash
108+
$ npm install unplugin-vue-components -D
109+
```
110+
111+
```js
112+
// vite.config.js
113+
import { defineConfig } from 'vite';
114+
import Components from 'unplugin-vue-components/vite';
115+
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
116+
export default defineConfig({
117+
plugins: [
118+
// ...
119+
Components({
120+
resolvers: [
121+
AntDesignVueResolver({
122+
importStyle: false, // css in js
123+
}),
124+
],
125+
}),
126+
],
127+
});
128+
```
129+
130+
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''.
131+
132+
```jsx
133+
import { Button } from 'ant-design-vue';
134+
```
135+
101136
## Links
102137

103138
- [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
122157

123158
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.
124159

125-
Ant Design Vue is committed to providing programmers with a ** pleasant ** development experience.
160+
Ant Design Vue is committed to providing programmers with a **pleasant** development experience.
126161

127162
## THANK YOU
128163

site/src/vueDocs/introduce.zh-CN.md

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040

4141
- 稳定版:[![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue)
4242

43-
你可以订阅:https://github.com/vueComponent/ant-design-vue/releases.atom 来获得稳定版发布的通知。
43+
你可以订阅:<https://github.com/vueComponent/ant-design-vue/releases.atom> 来获得稳定版发布的通知。
4444

4545
## 安装
4646

@@ -98,6 +98,41 @@ import 'ant-design-vue/dist/reset.css';
9898

9999
`ant-design-vue` 默认支持基于 ES modules 的 tree shaking。
100100

101+
### 自动按需引入组件
102+
103+
#### [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
104+
105+
如果你使用的是 `Vite` ,我们推荐使用 `unplugin-vue-components`
106+
107+
```bash
108+
$ npm install unplugin-vue-components -D
109+
```
110+
111+
```js
112+
// vite.config.js
113+
import { defineConfig } from 'vite';
114+
import Components from 'unplugin-vue-components/vite';
115+
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
116+
export default defineConfig({
117+
plugins: [
118+
// ...
119+
Components({
120+
resolvers: [
121+
AntDesignVueResolver({
122+
importStyle: false, // css in js
123+
}),
124+
],
125+
}),
126+
],
127+
});
128+
```
129+
130+
然后你可以在代码中直接引入 `ant-design-vue` 的组件,插件会自动将代码转化为 `import { Button } from 'ant-design-vue'` 的形式。
131+
132+
```jsx
133+
import { Button } from 'ant-design-vue';
134+
```
135+
101136
## 链接
102137

103138
- [首页](https://www.antdv.com/)

0 commit comments

Comments
 (0)