diff --git a/site/src/vueDocs/customize-theme-variable.en-US.md b/site/src/vueDocs/customize-theme-variable.en-US.md index 1a6901b42..09a7e5085 100644 --- a/site/src/vueDocs/customize-theme-variable.en-US.md +++ b/site/src/vueDocs/customize-theme-variable.en-US.md @@ -44,19 +44,18 @@ CSS Variable use `--ant` prefix by default. When exist multiple antd style file Modify `prefixCls` on the root of ConfigProvider: -```tsx -import { ConfigProvider } from 'ant-design-vue'; - -export default () => ( - - - -); +```html + ``` Also need call the static function to modify `prefixCls`: ```ts +import { ConfigProvider } from 'ant-design-vue'; ConfigProvider.config({ prefixCls: 'custom', theme: { diff --git a/site/src/vueDocs/customize-theme-variable.zh-CN.md b/site/src/vueDocs/customize-theme-variable.zh-CN.md index 90d244460..e02a5876f 100644 --- a/site/src/vueDocs/customize-theme-variable.zh-CN.md +++ b/site/src/vueDocs/customize-theme-variable.zh-CN.md @@ -44,19 +44,18 @@ ConfigProvider.config({ 通过 ConfigProvider 在顶层修改 `prefixCls`: -```tsx -import { ConfigProvider } from 'ant-design-vue'; - -export default () => ( - - - -); +```html + ``` 通过静态方法设置主题色以及对应 `prefixCls`: ```ts +import { ConfigProvider } from 'ant-design-vue'; ConfigProvider.config({ prefixCls: 'custom', theme: { diff --git a/site/src/vueDocs/getting-started.en-US.md b/site/src/vueDocs/getting-started.en-US.md index 68cb5296e..2ae1c8bbe 100644 --- a/site/src/vueDocs/getting-started.en-US.md +++ b/site/src/vueDocs/getting-started.en-US.md @@ -34,11 +34,17 @@ And, setup your vue project configuration. ### 3. Use antd's Components +#### Install + ```bash $ npm i --save ant-design-vue@next ``` -**Fully import** +#### Component Registration + +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: + +**Global Registration All Components** ```jsx import { createApp } from 'vue'; @@ -53,7 +59,7 @@ app.use(Antd).mount('#app'); The above imports Antd entirely. Note that CSS file needs to be imported separately. -**Only import the components you need** +**Global Registration Some Components** ```jsx import { createApp } from 'vue'; @@ -68,7 +74,26 @@ app.use(Button).mount('#app'); app.config.globalProperties.$message = message; ``` -> All the components in antd are listed in the sidebar. +**Local Registration** + +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. + +```html + + +``` ### 4. Component list @@ -78,12 +103,6 @@ app.config.globalProperties.$message = message; 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. -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. - -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. - -> Please avoid using both the babel and shim methods at the same time. - ## Import on Demand 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 ## Customization - [Customize Theme](/docs/vue/customize-theme) - -## Tips - -- You can use any `npm` modules. diff --git a/site/src/vueDocs/getting-started.zh-CN.md b/site/src/vueDocs/getting-started.zh-CN.md index edffd1536..1d89a5116 100644 --- a/site/src/vueDocs/getting-started.zh-CN.md +++ b/site/src/vueDocs/getting-started.zh-CN.md @@ -36,11 +36,17 @@ $ vue create antd-demo ### 3. 使用组件 +#### 安装 + ```bash $ npm i --save ant-design-vue@next ``` -**完整引入** +#### 注册 + +如果使用 Vue 默认的模板语法,需要注册组件后方可使用,有如下三种方式注册组件: + +**全局完整注册** ```jsx import { createApp } from 'vue'; @@ -53,9 +59,9 @@ const app = createApp(App); app.use(Antd).mount('#app'); ``` -以上代码便完成了 Antd 的引入。需要注意的是,样式文件需要单独引入。 +以上代码便完成了 Antd 的全局注册。需要注意的是,样式文件需要单独引入。 -**局部导入组件** +**全局部分注册** ```jsx import { createApp } from 'vue'; @@ -70,7 +76,26 @@ app.use(Button).mount('#app'); app.config.globalProperties.$message = message; ``` -> 你可以在左侧菜单选用更多组件。 +**局部注册组件** + +此种方式需要分别注册组件子组件,如 Button、ButtonGroup,并且注册后仅在当前组件中有效。所以我们推荐使用上述两种方式。 + +```html + + +``` ## 兼容性 @@ -78,12 +103,6 @@ Ant Design Vue 2.x+ 支持所有的现代浏览器。 如果需要支持 IE9+,你可以使用 Ant Design Vue 1.x & Vue 2.x。 -对于 IE 系列浏览器,需要提供 [es5-shim](https://github.com/es-shims/es5-shim) 和 [es6-shim](https://github.com/paulmillr/es6-shim) 等 Polyfills 的支持。 - -如果你使用了 babel,强烈推荐使用 [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) 和 [babel-plugin-transform-runtime](https://babeljs.io/docs/plugins/transform-runtime/) 来替代以上两个 shim。 - -> 避免同时使用 babel 和 shim 两种兼容方法,以规避 [#6512](https://github.com/ant-design/ant-design/issues/6512) 中所遇问题 - ## 按需加载 如果你仅需要加载使用的组件,可以通过以下的写法来按需加载组件。 @@ -113,8 +132,3 @@ import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es ## 配置主题和字体 - [改变主题](/docs/vue/customize-theme-cn) - -## 小贴士 - -- 你可以享用 `npm` 生态圈里的所有模块。 -- 虽然 Vue 官方推荐模板编写组件,不过对于复杂组件,[jsx](https://github.com/vueComponent/jsx)未必不是一个更好的选择。