From f56658cd302fa443adc199d0c9c778c402371556 Mon Sep 17 00:00:00 2001 From: CCherry07 <2405693142@qq.com> Date: Sun, 7 May 2023 14:03:05 +0800 Subject: [PATCH 1/4] docs(introduce): update docs --- site/src/vueDocs/introduce.en-US.md | 66 +++++++++++++++++++++++++++-- site/src/vueDocs/introduce.zh-CN.md | 64 ++++++++++++++++++++++++++-- 2 files changed, 123 insertions(+), 7 deletions(-) diff --git a/site/src/vueDocs/introduce.en-US.md b/site/src/vueDocs/introduce.en-US.md index 771985c882..11031d4bb8 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 @@ -49,11 +49,11 @@ You can subscribe to this feed for new version notifications: https://github.com **We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling. ```bash -$ npm install ant-design-vue@4.x --save +npm install ant-design-vue@4.x --save ``` ```bash -$ yarn add ant-design-vue@4.x +yarn add ant-design-vue@4.x ``` If you are in a bad network environment，you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm). @@ -98,6 +98,64 @@ import 'ant-design-vue/dist/reset.css'; `ant-design-vue` supports ES modules tree shaking by default. +### Automatically import components on demand + +#### [babel-plugin-import](https://github.com/umijs/babel-plugin-import) + +Instead of manually importing each component in 'main.js',' babel-plugin-import 'provides automatic on-demand component loading. Due to technical tweaks, deprecated 'less' in favor of 'CSS-in-JS' to better support dynamic themes. Therefore, there is no need to configure 'style: true'. + +```bash +npm install babel-plugin-import --save-dev +``` + +```js +// babel.config.js +module.exports = { + plugins: [ + [ + 'import', + { + libraryName: 'ant-design-vue', + libraryDirectory: 'es', + }, + ], + ], +}; +``` + +#### [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''. + +```js +import { Button } from 'ant-design-vue'; +``` + ## Links - [Home Page](https://www.antdv.com/) @@ -122,7 +180,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 8b231d653e..fa17c60db5 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 来获得稳定版发布的通知。 +你可以订阅： 来获得稳定版发布的通知。 ## 安装 @@ -49,11 +49,11 @@ **我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 ```bash -$ npm install ant-design-vue@4.x --save +npm install ant-design-vue@4.x --save ``` ```bash -$ yarn add ant-design-vue@4.x +yarn add ant-design-vue@4.x ``` 如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。 @@ -98,6 +98,64 @@ import 'ant-design-vue/dist/reset.css'; `ant-design-vue` 默认支持基于 ES modules 的 tree shaking。 +### 自动按需引入组件 + +#### [babel-plugin-import](https://github.com/umijs/babel-plugin-import) + +`babel-plugin-import` 提供了自动按需加载组件，完全颠覆了以往需要在 `main.js` 中手动引入每个组件的方式。由于技术调整,弃用 `less`，采用`CSS-in-JS`，更好地支持动态主题。因此，无需配置 `style: true`。 + +```bash +npm install babel-plugin-import --save-dev +``` + +```js +// babel.config.js +module.exports = { + plugins: [ + [ + 'import', + { + libraryName: 'ant-design-vue', + libraryDirectory: 'es', + }, + ], + ], +}; +``` + +#### [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'` 的形式。 + +```js +import { Button } from 'ant-design-vue'; +``` + ## 链接 - [首页](https://www.antdv.com/) From 518b6ece5b31ead8b163b5c1b1bb3080fde190fa Mon Sep 17 00:00:00 2001 From: CCherry07 <2405693142@qq.com> Date: Sun, 7 May 2023 14:25:30 +0800 Subject: [PATCH 2/4] docs(introduce): add Dollar --- site/src/vueDocs/introduce.en-US.md | 10 +++++----- site/src/vueDocs/introduce.zh-CN.md | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/site/src/vueDocs/introduce.en-US.md b/site/src/vueDocs/introduce.en-US.md index 11031d4bb8..cb9c6a7d33 100644 --- a/site/src/vueDocs/introduce.en-US.md +++ b/site/src/vueDocs/introduce.en-US.md @@ -49,11 +49,11 @@ You can subscribe to this feed for new version notifications: Date: Sun, 7 May 2023 20:36:12 +0800 Subject: [PATCH 3/4] Update introduce.zh-CN.md --- site/src/vueDocs/introduce.zh-CN.md | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/site/src/vueDocs/introduce.zh-CN.md b/site/src/vueDocs/introduce.zh-CN.md index 8cefee2be9..be41e1216e 100644 --- a/site/src/vueDocs/introduce.zh-CN.md +++ b/site/src/vueDocs/introduce.zh-CN.md @@ -100,29 +100,6 @@ import 'ant-design-vue/dist/reset.css'; ### 自动按需引入组件 -#### [babel-plugin-import](https://github.com/umijs/babel-plugin-import) - -`babel-plugin-import` 提供了自动按需加载组件，完全颠覆了以往需要在 `main.js` 中手动引入每个组件的方式。由于技术调整,弃用 `less`，采用`CSS-in-JS`，更好地支持动态主题。因此，无需配置 `style: true`。 - -```bash -$ npm install babel-plugin-import --save-dev -``` - -```js -// babel.config.js -module.exports = { - plugins: [ - [ - 'import', - { - libraryName: 'ant-design-vue', - libraryDirectory: 'es', - }, - ], - ], -}; -``` - #### [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 如果你使用的是 `Vite` ，我们推荐使用 `unplugin-vue-components` From b6d13fba569c15f6b06461c1dfcbdcfccd96709a Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sun, 7 May 2023 20:36:48 +0800 Subject: [PATCH 4/4] Update introduce.en-US.md --- site/src/vueDocs/introduce.en-US.md | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/site/src/vueDocs/introduce.en-US.md b/site/src/vueDocs/introduce.en-US.md index cb9c6a7d33..e91f54c9df 100644 --- a/site/src/vueDocs/introduce.en-US.md +++ b/site/src/vueDocs/introduce.en-US.md @@ -100,29 +100,6 @@ import 'ant-design-vue/dist/reset.css'; ### Automatically import components on demand -#### [babel-plugin-import](https://github.com/umijs/babel-plugin-import) - -Instead of manually importing each component in 'main.js',' babel-plugin-import 'provides automatic on-demand component loading. Due to technical tweaks, deprecated 'less' in favor of 'CSS-in-JS' to better support dynamic themes. Therefore, there is no need to configure 'style: true'. - -```bash -$ npm install babel-plugin-import --save-dev -``` - -```js -// babel.config.js -module.exports = { - plugins: [ - [ - 'import', - { - libraryName: 'ant-design-vue', - libraryDirectory: 'es', - }, - ], - ], -}; -``` - #### [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) If you're using 'Vite', we recommend using 'unplugin-vue-components'