Skip to content

Commit ed346d6

Browse files
committed
doc: update doc
1 parent f2e58b6 commit ed346d6

File tree

4 files changed

+71
-44
lines changed

4 files changed

+71
-44
lines changed

site/src/vueDocs/customize-theme-variable.en-US.md

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,19 +44,18 @@ CSS Variable use `--ant` prefix by default. When exist multiple antd style file
4444

4545
Modify `prefixCls` on the root of ConfigProvider:
4646

47-
```tsx
48-
import { ConfigProvider } from 'ant-design-vue';
49-
50-
export default () => (
51-
<ConfigProvider prefixCls="custom">
52-
<MyApp />
53-
</ConfigProvider>
54-
);
47+
```html
48+
<template>
49+
<a-config-provider prefix-cls="custom">
50+
<my-app />
51+
</a-config-provider>
52+
</template>
5553
```
5654

5755
Also need call the static function to modify `prefixCls`:
5856

5957
```ts
58+
import { ConfigProvider } from 'ant-design-vue';
6059
ConfigProvider.config({
6160
prefixCls: 'custom',
6261
theme: {

site/src/vueDocs/customize-theme-variable.zh-CN.md

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,19 +44,18 @@ ConfigProvider.config({
4444

4545
通过 ConfigProvider 在顶层修改 `prefixCls`
4646

47-
```tsx
48-
import { ConfigProvider } from 'ant-design-vue';
49-
50-
export default () => (
51-
<ConfigProvider prefixCls="custom">
52-
<MyApp />
53-
</ConfigProvider>
54-
);
47+
```html
48+
<template>
49+
<a-config-provider prefix-cls="custom">
50+
<my-app />
51+
</a-config-provider>
52+
</template>
5553
```
5654

5755
通过静态方法设置主题色以及对应 `prefixCls`
5856

5957
```ts
58+
import { ConfigProvider } from 'ant-design-vue';
6059
ConfigProvider.config({
6160
prefixCls: 'custom',
6261
theme: {

site/src/vueDocs/getting-started.en-US.md

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,17 @@ And, setup your vue project configuration.
3434

3535
### 3. Use antd's Components
3636

37+
#### Install
38+
3739
```bash
3840
$ npm i --save ant-design-vue@next
3941
```
4042

41-
**Fully import**
43+
#### Component Registration
44+
45+
If you use Vue's default template syntax, you need to register components before you can use them. There are three ways to register components:
46+
47+
**Global Registration All Components**
4248

4349
```jsx
4450
import { createApp } from 'vue';
@@ -53,7 +59,7 @@ app.use(Antd).mount('#app');
5359

5460
The above imports Antd entirely. Note that CSS file needs to be imported separately.
5561

56-
**Only import the components you need**
62+
**Global Registration Some Components**
5763

5864
```jsx
5965
import { createApp } from 'vue';
@@ -68,7 +74,26 @@ app.use(Button).mount('#app');
6874
app.config.globalProperties.$message = message;
6975
```
7076

71-
> All the components in antd are listed in the sidebar.
77+
**Local Registration**
78+
79+
In this way, component sub-components, such as Button and ButtonGroup, need to be registered separately, and they are only valid in the current component after registration. Therefore, we recommend using the above two methods.
80+
81+
```html
82+
<template>
83+
<a-button>Add</a-button>
84+
</template>
85+
<script>
86+
import { Button } from 'ant-design-vue';
87+
const ButtonGroup = Button.Group;
88+
89+
export default {
90+
components: {
91+
AButton: Button,
92+
AButtonGroup: ButtonGroup,
93+
},
94+
};
95+
</script>
96+
```
7297

7398
### 4. Component list
7499

@@ -78,12 +103,6 @@ app.config.globalProperties.$message = message;
78103

79104
Ant Design Vue 2.x supports all the modern browsers. If you want to use IE9+, you can use Ant Design Vue 1.x & Vue 2.x.
80105

81-
You need to provide [es5-shim](https://github.com/es-shims/es5-shim) and [es6-shim](https://github.com/paulmillr/es6-shim) and other polyfills for IE browsers.
82-
83-
If you are using babel, we strongly recommend using [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) and [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) instead of those two shims.
84-
85-
> Please avoid using both the babel and shim methods at the same time.
86-
87106
## Import on Demand
88107

89108
we can import individual components on demand:
@@ -113,7 +132,3 @@ import 'ant-design-vue/es/message/style/css'; //use ant-design-vue/es instead of
113132
## Customization
114133

115134
- [Customize Theme](/docs/vue/customize-theme)
116-
117-
## Tips
118-
119-
- You can use any `npm` modules.

site/src/vueDocs/getting-started.zh-CN.md

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,17 @@ $ vue create antd-demo
3636

3737
### 3. 使用组件
3838

39+
#### 安装
40+
3941
```bash
4042
$ npm i --save ant-design-vue@next
4143
```
4244

43-
**完整引入**
45+
#### 注册
46+
47+
如果使用 Vue 默认的模板语法,需要注册组件后方可使用,有如下三种方式注册组件:
48+
49+
**全局完整注册**
4450

4551
```jsx
4652
import { createApp } from 'vue';
@@ -53,9 +59,9 @@ const app = createApp(App);
5359
app.use(Antd).mount('#app');
5460
```
5561

56-
以上代码便完成了 Antd 的引入。需要注意的是,样式文件需要单独引入。
62+
以上代码便完成了 Antd 的全局注册。需要注意的是,样式文件需要单独引入。
5763

58-
**局部导入组件**
64+
**全局部分注册**
5965

6066
```jsx
6167
import { createApp } from 'vue';
@@ -70,20 +76,33 @@ app.use(Button).mount('#app');
7076
app.config.globalProperties.$message = message;
7177
```
7278

73-
> 你可以在左侧菜单选用更多组件。
79+
**局部注册组件**
80+
81+
此种方式需要分别注册组件子组件,如 Button、ButtonGroup,并且注册后仅在当前组件中有效。所以我们推荐使用上述两种方式。
82+
83+
```html
84+
<template>
85+
<a-button>Add</a-button>
86+
</template>
87+
<script>
88+
import { Button } from 'ant-design-vue';
89+
const ButtonGroup = Button.Group;
90+
91+
export default {
92+
components: {
93+
AButton: Button,
94+
AButtonGroup: ButtonGroup,
95+
},
96+
};
97+
</script>
98+
```
7499

75100
## 兼容性
76101

77102
Ant Design Vue 2.x+ 支持所有的现代浏览器。
78103

79104
如果需要支持 IE9+,你可以使用 Ant Design Vue 1.x & Vue 2.x。
80105

81-
对于 IE 系列浏览器,需要提供 [es5-shim](https://github.com/es-shims/es5-shim)[es6-shim](https://github.com/paulmillr/es6-shim) 等 Polyfills 的支持。
82-
83-
如果你使用了 babel,强烈推荐使用 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/)[babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) 来替代以上两个 shim。
84-
85-
> 避免同时使用 babel 和 shim 两种兼容方法,以规避 [#6512](https://github.com/ant-design/ant-design/issues/6512) 中所遇问题
86-
87106
## 按需加载
88107

89108
如果你仅需要加载使用的组件,可以通过以下的写法来按需加载组件。
@@ -113,8 +132,3 @@ import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es
113132
## 配置主题和字体
114133

115134
- [改变主题](/docs/vue/customize-theme-cn)
116-
117-
## 小贴士
118-
119-
- 你可以享用 `npm` 生态圈里的所有模块。
120-
- 虽然 Vue 官方推荐模板编写组件,不过对于复杂组件,[jsx](https://github.com/vueComponent/jsx)未必不是一个更好的选择。

0 commit comments

Comments
 (0)