vueComponent · tangjinzhou · Apr 21, 2023 · Apr 15, 2023 · Apr 15, 2023 · Apr 16, 2023
diff --git a/site/src/router/index.js b/site/src/router/index.js
@@ -116,6 +116,16 @@ const routes = [
         meta: { enTitle: 'Dynamic Theme (Experimental)', title: '动态主题', category: 'docs' },
         component: () => import('../vueDocs/customize-theme-variable.en-US.md'),
       },
+      {
+        path: 'vue/replace-date-cn',
+        meta: { enTitle: 'Custom Date Library', title: '自定义时间库', category: 'docs' },
+        component: () => import('../vueDocs/replace-date.zh-CN.md'),
+      },
+      {
+        path: 'vue/replace-date',
+        meta: { enTitle: 'Custom Date Library', title: '自定义时间库', category: 'docs' },
+        component: () => import('../vueDocs/replace-date.en-US.md'),
+      },
       {
         path: 'vue/migration-v2-cn',
         meta: { enTitle: 'V1 to V2', title: '从 v1 到 v2', category: 'docs' },
@@ -137,14 +147,14 @@ const routes = [
         component: () => import('../vueDocs/migration-v3.en-US.md'),
       },
       {
-        path: 'vue/replace-date-cn',
-        meta: { enTitle: 'Custom Date Library', title: '自定义时间库', category: 'docs' },
-        component: () => import('../vueDocs/replace-date.zh-CN.md'),
+        path: 'vue/migration-v4-cn',
+        meta: { enTitle: 'V3 to V4', title: '从 V3 到 V4', category: 'docs' },
+        component: () => import('../vueDocs/migration-v4.zh-CN.md'),
       },
       {
-        path: 'vue/replace-date',
-        meta: { enTitle: 'Custom Date Library', title: '自定义时间库', category: 'docs' },
-        component: () => import('../vueDocs/replace-date.en-US.md'),
+        path: 'vue/migration-v4',
+        meta: { enTitle: 'V3 to V4', title: '从 V3 到 V4', category: 'docs' },
+        component: () => import('../vueDocs/migration-v4.en-US.md'),
       },
       {
         path: 'vue/i18n-cn',

diff --git a/site/src/vueDocs/getting-started.en-US.md b/site/src/vueDocs/getting-started.en-US.md
@@ -37,7 +37,7 @@ And, setup your vue project configuration.
 #### Install
 
 ```bash
-$ npm i --save ant-design-vue
+$ npm i --save ant-design-vue@4.x
 ```
 
 #### Component Registration
@@ -50,7 +50,7 @@ If you use Vue's default template syntax, you need to register components before
 import { createApp } from 'vue';
 import Antd from 'ant-design-vue';
 import App from './App';
-import 'ant-design-vue/dist/antd.css';
+import 'ant-design-vue/dist/reset.css';
 
 const app = createApp(App);
 
@@ -99,35 +99,9 @@ In this way, component sub-components, such as Button and ButtonGroup, need to b
 
 [Component list](https://github.com/vueComponent/ant-design-vue/blob/main/components/components.ts)
 
-## Compatibility
-
-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.
-
 ## Import on Demand
 
-we can import individual components on demand:
-
-```jsx
-import Button from 'ant-design-vue/lib/button';
-import 'ant-design-vue/lib/button/style'; // or ant-design-vue/lib/button/style/css for css format file
-```
-
-We strongly recommend using [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), which can convert the following code to the 'ant-design-vue/lib/xxx' way:
-
-```jsx
-import { Button } from 'ant-design-vue';
-```
-
-And this plugin can load styles too, read [usage](https://github.com/ant-design/babel-plugin-import#usage) for more details.
-
-> FYI, babel-plugin-import's `style` option will importing some global reset styles, don't use it if you don't need those styles. You can import styles manually via `import 'ant-design-vue/dist/antd.css'` and override the global reset styles.
-
-If you use Vite, you can use [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) to load on demand. However, this plugin can only deal with components. Others such as message should be loaded manually:
-
-```ts
-import { message } from 'ant-design-vue';
-import 'ant-design-vue/es/message/style/css'; //use ant-design-vue/es instead of ant-design-vue/lib
-```
+`ant-design-vue` supports tree shaking of ES modules, so using `import { Button } from 'ant-design-vue';` would drop js code you didn't use.
 
 ## Customization
 

diff --git a/site/src/vueDocs/getting-started.zh-CN.md b/site/src/vueDocs/getting-started.zh-CN.md
@@ -39,7 +39,7 @@ $ vue create antd-demo
 #### 安装
 
 ```bash
-$ npm i --save ant-design-vue
+$ npm i --save ant-design-vue@4.x
 ```
 
 #### 注册
@@ -52,7 +52,7 @@ $ npm i --save ant-design-vue
 import { createApp } from 'vue';
 import Antd from 'ant-design-vue';
 import App from './App';
-import 'ant-design-vue/dist/antd.css';
+import 'ant-design-vue/dist/reset.css';
 
 const app = createApp(App);
 
@@ -97,37 +97,9 @@ app.config.globalProperties.$message = message;
 </script>
 ```
 
-## 兼容性
-
-Ant Design Vue 2.x+ 支持所有的现代浏览器。
-
-如果需要支持 IE9+，你可以使用 Ant Design Vue 1.x & Vue 2.x。
-
 ## 按需加载
 
-如果你仅需要加载使用的组件，可以通过以下的写法来按需加载组件。
-
-```jsx
-import Button from 'ant-design-vue/lib/button';
-import 'ant-design-vue/lib/button/style'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
-```
-
-如果你使用了 babel，那么可以使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 来进行按需加载，加入这个插件后。你可以仍然这么写：
-
-```jsx
-import { Button } from 'ant-design-vue';
-```
-
-插件会帮你转换成 `ant-design-vue/lib/xxx` 的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。
-
-> 注意，babel-plugin-import 的 `style` 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 `import 'ant-design-vue/dist/antd.css` 手动引入，并覆盖全局样式。
-
-如果你使用的 Vite，你可以使用 [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) 来进行按需加载。但是此插件无法处理非组件模块，如 message，这种组件需要手动加载：
-
-```ts
-import { message } from 'ant-design-vue';
-import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es 而非 ant-design-vue/lib
-```
+`ant-design-vue` 默认支持基于 ES modules 的 tree shaking，直接引入 `import { Button } from 'ant-design-vue';` 就会有按需加载的效果。
 
 ## 配置主题和字体
 

diff --git 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: 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 --save
+$ npm install ant-design-vue@4.x --save
 ```
 
 ```bash
-$ yarn add ant-design-vue
+$ 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).
@@ -62,11 +62,11 @@ If you are in a bad network environment，you can try other registries and tools
 
 Add `script` and `link` tags in your browser and use the global variable `antd`.
 
-We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `ant-design-vue/dist` in antd's npm package. You can also download these files directly from [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/ant-design-vue/badge)](https://www.jsdelivr.com/package/npm/ant-design-vue) or [unpkg](https://unpkg.com/ant-design-vue/dist/).
+We provide `antd.js` `antd.min.js` and `reset.css` under `ant-design-vue/dist` in antd's npm package. You can also download these files directly from [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/ant-design-vue/badge)](https://www.jsdelivr.com/package/npm/ant-design-vue) or [unpkg](https://unpkg.com/ant-design-vue/dist/).
 
 > **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using.
 
-> Note: you should import [dayjs](https://day.js.org/) and dayjs plugins before using antd.js.
+> Note: you should import `vue`, [dayjs](https://day.js.org/) and dayjs plugins before using `antd.js`.
 
 Like:
 
@@ -78,6 +78,7 @@ Like:
 <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
 <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
 <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
+<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
 ```
 
 ## Usage
@@ -90,55 +91,12 @@ app.use(DatePicker);
 And import stylesheets manually:
 
 ```jsx
-import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
+import 'ant-design-vue/dist/reset.css';
 ```
 
-### Use modularized antd
+### Use modularized ant-design-vue
 
-- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
-
-  ```jsx
-  // .babelrc or babel-loader option
-  {
-    "plugins": [
-      ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
-    ]
-  }
-  ```
-
-  > Note: Don't set `libraryDirectory` if you are using webpack 1.
-
-  This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.
-
-  ```jsx
-  // import js and css modularly, parsed by babel-plugin-import
-  import { DatePicker } from 'ant-design-vue';
-  ```
-
-- Manually import
-
-  ```jsx
-  import DatePicker from 'ant-design-vue/lib/date-picker'; // for js
-  import 'ant-design-vue/lib/date-picker/style/css'; // for css
-  // import 'ant-design-vue/lib/date-picker/style';         // that will import less
-  ```
-
-- For Vite
-
-  ```js
-  // vite.config.js
-  import Components from 'unplugin-vue-components/vite';
-  import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
-
-  export default {
-    plugins: [
-      /* ... */
-      Components({
-        resolvers: [AntDesignVueResolver()],
-      }),
-    ],
-  };
-  ```
+`ant-design-vue` supports ES modules tree shaking by default.
 
 ## Links
 
@@ -154,7 +112,7 @@ import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
 
 ## Contributing
 
-If you'd like to help us improve antd, just create a [Pull Request](https://github.com/vueComponent/ant-design-vue/pulls). Feel free to report bugs and issues [here](https://vuecomponent.github.io/issue-helper/).
+If you'd like to help us improve ant-design-vue, just create a [Pull Request](https://github.com/vueComponent/ant-design-vue/pulls). Feel free to report bugs and issues [here](https://vuecomponent.github.io/issue-helper/).
 
 > If you're new to posting issues, we ask that you read [_How To Ask Questions The Smart Way_](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you!
 

diff --git a/site/src/vueDocs/introduce.zh-CN.md b/site/src/vueDocs/introduce.zh-CN.md
@@ -49,11 +49,11 @@
 **我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。
 
 ```bash
-$ npm install ant-design-vue --save
+$ npm install ant-design-vue@4.x --save
 ```
 
 ```bash
-$ yarn add ant-design-vue
+$ yarn add ant-design-vue@4.x
 ```
 
 如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
@@ -62,11 +62,11 @@ $ yarn add ant-design-vue
 
 在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `antd`。
 
-我们在 npm 发布包内的 `ant-design-vue/dist` 目录下提供了 `antd.js` `antd.css` 以及 `antd.min.js` `antd.min.css`。你也可以通过 [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/ant-design-vue/badge)](https://www.jsdelivr.com/package/npm/ant-design-vue) 或 [UNPKG](https://unpkg.com/ant-design-vue/dist/) 进行下载。
+我们在 npm 发布包内的 `ant-design-vue/dist` 目录下提供了 `antd.js`、`antd.min.js` 和 `reset.css`。你也可以通过 [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/ant-design-vue/badge)](https://www.jsdelivr.com/package/npm/ant-design-vue) 或 [UNPKG](https://unpkg.com/ant-design-vue/dist/) 进行下载。
 
 > **强烈不推荐使用已构建文件**，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。
 
-> 注意：引入 antd.js 前你需要自行引入 [dayjs](https://day.js.org/) 及其相关插件。
+> 注意：引入 `antd.js` 前你需要自行引入 `vue`、[`dayjs`](https://day.js.org/) 及其相关插件。
 
 如：
 
@@ -78,6 +78,7 @@ $ yarn add ant-design-vue
 <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
 <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
 <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
+<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
 ```
 
 ## 示例
@@ -90,57 +91,12 @@ app.use(DatePicker);
 引入样式：
 
 ```jsx
-import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
+import 'ant-design-vue/dist/reset.css';
 ```
 
 ### 按需加载
 
-下面两种方式都可以只加载用到的组件。
-
-- 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)（推荐）。
-
-  ```jsx
-  // .babelrc or babel-loader option
-  {
-    "plugins": [
-      ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
-    ]
-  }
-  ```
-
-  > 注意：webpack 1 无需设置 `libraryDirectory`。
-
-  然后只需从 ant-design-vue 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。
-
-  ```jsx
-  // babel-plugin-import 会帮助你加载 JS 和 CSS
-  import { DatePicker } from 'ant-design-vue';
-  ```
-
-- 手动引入
-
-  ```jsx
-  import DatePicker from 'ant-design-vue/lib/date-picker'; // 加载 JS
-  import 'ant-design-vue/lib/date-picker/style/css'; // 加载 CSS
-  // import 'ant-design-vue/lib/date-picker/style';         // 加载 LESS
-  ```
-
-- Vite 按需
-
-  ```js
-  // vite.config.js
-  import Components from 'unplugin-vue-components/vite';
-  import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
-
-  export default {
-    plugins: [
-      /* ... */
-      Components({
-        resolvers: [AntDesignVueResolver()],
-      }),
-    ],
-  };
-  ```
+`ant-design-vue` 默认支持基于 ES modules 的 tree shaking。
 
 ## 链接