Merge pull request #9402 from chenjiahan/feature/vite

refactor(@vant/cli): migrate to vite
2025-05-26 00:09:15 +08:00 · 2021-09-07 20:57:20 +08:00 · 2021-09-07 20:57:20 +08:00 · b1aeb4f2f2
commit b1aeb4f2f2
parent d42624a540 89a801b3d7
162 changed files with 9053 additions and 22929 deletions
--- a/.github/workflows/deploy-v3-site.yml
+++ b/.github/workflows/deploy-v3-site.yml
@ -17,8 +17,6 @@ jobs:

      - name: Install dependencies
        uses: bahmutov/npm-install@v1
-        with:
-          working-directory: packages/vant

      - name: Build Site
        run: npm run build:site
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -13,8 +13,6 @@ jobs:

    - name: Install dependencies
      uses: bahmutov/npm-install@v1
-      with:
-        working-directory: packages/vant

    - name: Run linter
      run: npm run lint
@ -29,8 +27,6 @@ jobs:

    - name: Install dependencies
      uses: bahmutov/npm-install@v1
-      with:
-        working-directory: packages/vant

    - name: Run test cases
      run: npm test
@ -50,8 +46,6 @@ jobs:

    - name: Install dependencies
      uses: bahmutov/npm-install@v1
-      with:
-        working-directory: packages/vant

    - name: Build
      run: npm run build
--- a/.gitignore
+++ b/.gitignore
@ -16,5 +16,5 @@ es
 lib
 dist
 vetur
-./site
+**/site-dist
 changelog.generated.md
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"

-cd packages/vant && npx --no-install vant-cli commit-lint ../../$1
+npx --no-install vant-cli commit-lint $1
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"

-cd packages/vant && npx --no-install lint-staged
+npx --no-install lint-staged
--- a/package.json
+++ b/package.json
@ -1,11 +1,23 @@
 {
  "private": true,
+  "workspaces": [
+    "packages/vant",
+    "packages/vant-cli",
+    "packages/vant-eslint-config",
+    "packages/vant-stylelint-config"
+  ],
  "scripts": {
-    "prepare": "husky install",
+    "prepare": "husky install && cd packages/vant-cli && yarn build",
    "dev": "cd packages/vant && yarn dev",
    "lint": "cd packages/vant && yarn lint",
    "test": "cd packages/vant && yarn test",
    "build": "cd packages/vant && yarn build",
    "build:site": "cd packages/vant && yarn build:site"
+  },
+  "lint-staged": {
+    "*.md": "prettier --write",
+    "*.{ts,tsx,js,vue,less}": "prettier --write",
+    "*.{ts,tsx,js,vue}": "eslint --fix",
+    "*.{vue,css,less}": "stylelint --fix"
  }
 }
--- a/packages/create-vant-cli-app/generators/vue2/package.json.tpl
+++ b/packages/create-vant-cli-app/generators/vue2/package.json.tpl
@ -15,7 +15,7 @@
    "build": "vant-cli build",
    "release": "vant-cli release",
    "test:coverage": "open test/coverage/index.html",
-    "build-site": "vant-cli build-site && gh-pages -d site"
+    "build-site": "vant-cli build-site && gh-pages -d site-dist"
  },
  "author": "",
  "license": "MIT",
--- a/packages/create-vant-cli-app/generators/vue3/package.json.tpl
+++ b/packages/create-vant-cli-app/generators/vue3/package.json.tpl
@ -16,7 +16,7 @@
    "prepare": "husky install",
    "release": "vant-cli release",
    "test:coverage": "open test/coverage/index.html",
-    "build-site": "vant-cli build-site && gh-pages -d site"
+    "build-site": "vant-cli build-site && gh-pages -d site-dist"
  },
  "author": "",
  "license": "MIT",
--- a/packages/vant-cli/bin.js
+++ b/packages/vant-cli/bin.js
@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require('./lib/cli');
--- a/packages/vant-cli/changelog.md
+++ b/packages/vant-cli/changelog.md
@ -1,8 +1,29 @@
 # 更新日志

-## v4.0.0
+## v4.0.0-beta.6

-`unreleased`
+### 不兼容更新
+
+- 使用 vite 代替 webpack 进行构建，移除了所有 webpack 相关依赖
+- 站点构建产物的目录由 `site` 调整为 `site-dist`
+- 不再支持 webpack.config.js 配置文件
+- 不再支持 less import 语法中使用波浪号
+- 不再在 demo 文件中自动注册组件
+- 移除 build 命令的 --watch 参数
+- 移除内置的 babel-plugin-import 插件
+- 由于不再使用 html-webpack-plugin, 因此移除了 site.htmlPluginOptions 配置项
+- 为了减少依赖数量，移除了默认安装的 sass 依赖，使用 sass 时需要手动安装：
+
+```bash
+yarn add sass
+```
+
+### Features
+
+- 新增 site.htmlMeta 配置项
+- 新增 ESModule 格式的构建产物，分别为 `lib/[name].es.js` 和 `lib/[name].es.min.js`
+
+### 依赖升级

 对以下依赖进行了大版本升级：

@ -12,15 +33,9 @@
 - postcss v8
 - clean-css v5
 - commander v8
- css-loader v6
 - babel-jest v27
- sass-loader v12
- less-loader v10
 - lint-staged v11
- style-loader v3
 - autoprefixer v10
- postcss-loader v6
- webpack-dev-server v4

 ## v3.11.2

--- a/packages/vant-cli/docs/config.md
+++ b/packages/vant-cli/docs/config.md
@ -4,7 +4,7 @@
  - [vant.config.js](#vantconfigjs)
    - [name](#name)
    - [build.css](#buildcss)
-    - [build.site](#buildsite)
+    - [build.site.publicPath](#buildsitepublicpath)
    - [build.srcDir](#buildsrcdir)
    - [build.namedExport](#buildnamedexport)
    - [site.title](#sitetitle)
@ -16,7 +16,7 @@
    - [site.searchConfig](#sitesearchconfig)
    - [site.hideSimulator](#sitehidesimulator)
    - [site.simulator.url](#sitesimulatorurl)
-  - [Webpack](#webpack)
+    - [site.htmlMeta](#sitehtmlmeta)
  - [Babel](#babel)
    - [默认配置](#-1)
    - [依赖](#-2)
@ -95,14 +95,14 @@ module.exports = {
 };
 ```

-### build.site
+### build.site.publicPath

- Type: `object`
- Default: `{ publicPath: '/' }`
+- Type: `string`
+- Default: `/`

-`site.publicPath`等价于 webpack 的`output.publicPath`配置。
+等价于 vite 的 `build.outDir` 配置。

-一般来说，我们的文档网站会部署在一个域名的子路径上，如 `https://my.github.io/demo-ui/`，这时候`publicPath`需要跟子路径保持一致，即`/demo-ui/`。
+一般来说，我们的文档网站会部署在一个域名的子路径上，如 `https://my.github.io/demo-ui/`，这时候 `publicPath` 需要跟子路径保持一致，即 `/demo-ui/`。

 ```js
 module.exports = {
@ -253,26 +253,12 @@ module.exports = {

 自定义手机模拟器的 iframe URL 地址。

-### site.htmlPluginOptions
+### site.htmlMeta

- Type: `object`
+- Type: `Record<string, string>`
 - Default: `undefined`

-html-webpack-plugin 的配置项，详见 [Options](https://github.com/jantimon/html-webpack-plugin#options)。
-
-## Webpack
-
-通过根目录下的`webpack.config.js`文件可以修改 Webpack 配置，配置内容会通过 [webpack-merge](https://github.com/survivejs/webpack-merge) 合并到最终的配置中。
-
-比如修改 devServer 端口：
-
-```js
-module.exports = {
-  devServer: {
-    port: 9000,
-  },
-};
-```
+配置 HTML 中的 meta 标签，对象的 key 为 name，value 为 content。

 ## Babel

--- a/packages/vant-cli/package.json
+++ b/packages/vant-cli/package.json
@ -1,10 +1,10 @@
 {
  "name": "@vant/cli",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-beta.5",
  "main": "lib/index.js",
  "typings": "lib/index.d.ts",
  "bin": {
-    "vant-cli": "./lib/bin.js"
+    "vant-cli": "./bin.js"
  },
  "engines": {
    "node": ">=12"
@ -15,12 +15,14 @@
  },
  "scripts": {
    "dev": "tsc --watch",
-    "release": "tsc & release-it"
+    "build": "tsc",
+    "release": "yarn build & release-it"
  },
  "files": [
    "lib",
    "site",
    "template",
+    "bin.js",
    "preset.js"
  ],
  "keywords": [
@ -28,72 +30,63 @@
  ],
  "author": "chenjiahan",
  "license": "MIT",
-  "peerDependencies": {
-    "vue": "^3.0.0"
-  },
  "devDependencies": {
    "@types/fs-extra": "^9.0.12",
+    "@types/less": "^3.0.3",
    "@types/lodash": "^4.14.172",
-    "@types/postcss-load-config": "^3.0.1"
+    "@types/postcss-load-config": "^3.0.1",
+    "@vue/compiler-sfc": "3.2.8",
+    "vue": "3.2.8"
  },
  "dependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.4",
    "@babel/preset-typescript": "^7.15.0",
-    "@docsearch/css": "3.0.0-alpha.33",
-    "@docsearch/js": "3.0.0-alpha.33",
+    "@docsearch/css": "3.0.0-alpha.40",
+    "@docsearch/js": "3.0.0-alpha.40",
    "@types/jest": "^27.0.1",
    "@vant/eslint-config": "^3.3.2",
-    "@vant/markdown-loader": "^4.1.1",
    "@vant/markdown-vetur": "^2.2.0",
    "@vant/stylelint-config": "^1.4.2",
    "@vant/touch-emulator": "^1.3.2",
-    "@vue/babel-plugin-jsx": "^1.0.6",
+    "@vitejs/plugin-vue": "^1.6.1",
+    "@vitejs/plugin-vue-jsx": "^1.1.8",
+    "@vue/babel-plugin-jsx": "^1.0.7",
    "@vue/test-utils": "2.0.0-rc.6",
-    "autoprefixer": "^10.3.1",
-    "babel-jest": "^27.0.6",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-import": "^1.13.3",
-    "chokidar": "^3.5.2",
+    "autoprefixer": "^10.3.4",
+    "babel-jest": "^27.1.0",
    "clean-css": "^5.1.5",
    "commander": "^8.1.0",
    "consola": "^2.15.3",
    "conventional-changelog": "^3.1.24",
-    "css-loader": "^6.2.0",
    "eslint": "^7.32.0",
    "fast-glob": "^3.2.7",
-    "fork-ts-checker-webpack-plugin": "^6.3.2",
    "gh-pages": "^3.2.3",
    "hash-sum": "^2.0.0",
-    "html-webpack-plugin": "^5.3.2",
-    "husky": "^7.0.1",
-    "jest": "^27.0.6",
+    "highlight.js": "^11.2.0",
+    "husky": "^7.0.2",
+    "jest": "^27.1.0",
    "jest-canvas-mock": "^2.3.1",
    "jest-serializer-html": "^7.1.0",
    "less": "^4.1.1",
-    "less-loader": "^10.0.1",
    "lint-staged": "^11.1.2",
    "lodash": "^4.17.21",
+    "markdown-it": "^12.2.0",
+    "markdown-it-anchor": "^8.3.0",
    "ora": "^5.4.1",
-    "portfinder": "^1.0.28",
    "postcss": "^8.3.6",
    "postcss-load-config": "^3.1.0",
-    "postcss-loader": "^6.1.1",
    "prettier": "^2.3.2",
    "release-it": "^14.11.5",
-    "sass": "^1.38.0",
-    "sass-loader": "^12.1.0",
-    "style-loader": "^3.2.1",
    "stylelint": "^13.13.1",
+    "transliteration": "^2.2.0",
    "ts-jest": "^27.0.5",
-    "typescript": "^4.3.5",
-    "vue3-jest": "^27.0.0-alpha.2",
-    "vue-loader": "^16.5.0",
+    "typescript": "^4.4.2",
+    "vite": "^2.5.4",
+    "vite-plugin-html": "^2.1.0",
+    "vite-plugin-md": "^0.11.0",
    "vue-router": "^4.0.0",
-    "webpack": "^5.51.1",
-    "webpack-dev-server": "^4.0.0",
-    "webpack-merge": "^5.8.0",
-    "webpackbar": "^5.0.0-3"
+    "vue3-jest": "^27.0.0-alpha.2"
  },
  "release-it": {
    "git": {
--- a/packages/vant-cli/site/desktop/App.vue
+++ b/packages/vant-cli/site/desktop/App.vue
@ -15,7 +15,7 @@
 </template>

 <script>
-import VanDoc from './components';
+import VanDoc from './components/index.vue';
 import { config } from 'site-desktop-shared';
 import { setLang } from '../common/locales';

@ -108,9 +108,9 @@ export default {
        []
      );

-      const current = navItems.find((item) => {
-        return item.path === this.$route.meta.name;
-      });
+      const current = navItems.find(
+        (item) => item.path === this.$route.meta.name
+      );

      if (current && current.title) {
        title = current.title + ' - ' + title;
--- a/packages/vant-cli/site/desktop/components/Content.vue
+++ b/packages/vant-cli/site/desktop/components/Content.vue
@ -23,7 +23,7 @@ export default {
 <style lang="less">
@import '../../common/style/var';

-.card {
+.van-doc-card {
  margin-bottom: 24px;
  padding: 24px;
  background-color: #fff;
@ -211,7 +211,7 @@ export default {
  flex: 1;
  padding: 0 0 75px;

-  > section {
+  .van-doc-markdown-body {
    padding: 24px;
    overflow: hidden;

--- a/packages/vant-cli/site/desktop/components/Header.vue
+++ b/packages/vant-cli/site/desktop/components/Header.vue
@ -64,7 +64,7 @@
 </template>

 <script>
-import SearchInput from './SearchInput';
+import SearchInput from './SearchInput.vue';
 import { packageVersion } from 'site-desktop-shared';

 export default {
--- a/packages/vant-cli/site/desktop/components/Nav.vue
+++ b/packages/vant-cli/site/desktop/components/Nav.vue
@ -22,7 +22,7 @@
 </template>

 <script>
-import NavLink from './NavLink';
+import NavLink from './NavLink.vue';

 export default {
  name: 'VanDocNav',
--- a/packages/vant-cli/site/desktop/components/index.vue
+++ b/packages/vant-cli/site/desktop/components/index.vue
@ -18,11 +18,11 @@
 </template>

 <script>
-import DocNav from './Nav';
-import DocHeader from './Header';
-import DocContent from './Content';
-import DocContainer from './Container';
-import DocSimulator from './Simulator';
+import DocNav from './Nav.vue';
+import DocHeader from './Header.vue';
+import DocContent from './Content.vue';
+import DocContainer from './Container.vue';
+import DocSimulator from './Simulator.vue';

 export default {
  name: 'VanDoc',
--- a/packages/vant-cli/site/desktop/main.js
+++ b/packages/vant-cli/site/desktop/main.js
@ -1,12 +1,10 @@
 import { createApp } from 'vue';
-import { packageEntry } from 'site-desktop-shared';
-import App from './App';
-import DemoPlayground from './components/DemoPlayground';
+import App from './App.vue';
+import DemoPlayground from './components/DemoPlayground.vue';
 import { router } from './router';

 window.app = createApp(App)
  .use(router)
-  .use(packageEntry)
  .component(DemoPlayground.name, DemoPlayground);

 setTimeout(() => {
--- a/packages/vant-cli/site/desktop/index.html
+++ b/packages/vant-cli/site/desktop/index.html
@ -2,30 +2,24 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
-    <meta
-      name="description"
-      content="<%= htmlWebpackPlugin.options.description %>"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="<%= htmlWebpackPlugin.options.logo %>"
-    />
+    <title><%= title %></title>
+    <meta name="description" content="<%= description %>" />
+    <link rel="icon" type="image/png" href="<%= logo %>" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
    />
+    <%- meta %>
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
-    <% if (htmlWebpackPlugin.options.baiduAnalytics) { %>
+    <% if (baiduAnalytics) { %>
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement('script');
        hm.src =
-          'https://hm.baidu.com/hm.js?<%= htmlWebpackPlugin.options.baiduAnalytics.seed %>';
+          'https://hm.baidu.com/hm.js?<%= baiduAnalytics.seed %>';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(hm, s);
      })();
@ -34,5 +28,6 @@
  </head>
  <body ontouchstart>
    <div id="app"></div>
+    <script type="module" src="/desktop/main.js"></script>
  </body>
 </html>
--- a/packages/vant-cli/site/mobile/index.html
+++ b/packages/vant-cli/site/mobile/index.html
@ -2,32 +2,25 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
-    <meta
-      name="description"
-      content="<%= htmlWebpackPlugin.options.description %>"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="<%= htmlWebpackPlugin.options.logo %>"
-    />
+    <title><%- title %></title>
+    <meta name="description" content="<%- description %>" />
+    <link rel="icon" type="image/png" href="<%- logo %>" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
    />
+    <%- meta %>
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
-    <% if (htmlWebpackPlugin.options.baiduAnalytics) { %>
+    <% if (baiduAnalytics) { %>
    <script>
      // avoid to load analytics in iframe
      if (window.top === window) {
        var _hmt = _hmt || [];
-        (function() {
+        (function () {
          var hm = document.createElement('script');
-          hm.src =
-            'https://hm.baidu.com/hm.js?<%= htmlWebpackPlugin.options.baiduAnalytics.seed %>';
+          hm.src = 'https://hm.baidu.com/hm.js?<%- baiduAnalytics.seed %>';
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(hm, s);
        })();
@ -37,5 +30,6 @@
  </head>
  <body ontouchstart>
    <div id="app"></div>
+    <script type="module" src="/mobile/main.js"></script>
  </body>
 </html>
--- a/packages/vant-cli/site/mobile/App.vue
+++ b/packages/vant-cli/site/mobile/App.vue
@ -10,7 +10,7 @@
 </template>

 <script>
-import DemoNav from './components/DemoNav';
+import DemoNav from './components/DemoNav.vue';

 export default {
  components: { DemoNav },
--- a/packages/vant-cli/site/mobile/components/DemoHome.vue
+++ b/packages/vant-cli/site/mobile/components/DemoHome.vue
@ -21,7 +21,7 @@

 <script>
 import { config } from 'site-mobile-shared';
-import DemoHomeNav from './DemoHomeNav';
+import DemoHomeNav from './DemoHomeNav.vue';

 export default {
  components: {
--- a/packages/vant-cli/site/mobile/components/DemoHomeNav.vue
+++ b/packages/vant-cli/site/mobile/components/DemoHomeNav.vue
@ -16,7 +16,7 @@
 </template>

 <script>
-import ArrowRight from './ArrowRight';
+import ArrowRight from './ArrowRight.vue';

 export default {
  components: {
--- a/packages/vant-cli/site/mobile/main.js
+++ b/packages/vant-cli/site/mobile/main.js
@ -1,14 +1,12 @@
 import { createApp } from 'vue';
-import DemoBlock from './components/DemoBlock';
-import DemoSection from './components/DemoSection';
+import DemoBlock from './components/DemoBlock.vue';
+import DemoSection from './components/DemoSection.vue';
 import { router } from './router';
-import { packageEntry } from 'site-mobile-shared';
-import App from './App';
+import App from './App.vue';
 import '@vant/touch-emulator';

 window.app = createApp(App)
  .use(router)
-  .use(packageEntry)
  .component(DemoBlock.name, DemoBlock)
  .component(DemoSection.name, DemoSection);

--- a/packages/vant-cli/site/mobile/router.js
+++ b/packages/vant-cli/site/mobile/router.js
@ -1,6 +1,6 @@
 import { watch, nextTick } from 'vue';
 import { createRouter, createWebHashHistory } from 'vue-router';
-import DemoHome from './components/DemoHome';
+import DemoHome from './components/DemoHome.vue';
 import { decamelize } from '../common';
 import { demos, config } from 'site-mobile-shared';
 import { getLang, setDefaultLang } from '../common/locales';
--- a/packages/vant-cli/src/cli.ts
+++ b/packages/vant-cli/src/cli.ts
@ -1,4 +1,3 @@
-#!/usr/bin/env node
 import { Command } from 'commander';

 import {
@ -18,7 +17,7 @@ const program = new Command();

 program.version(`@vant/cli ${cliVersion}`);

-program.command('dev').description('Run webpack dev server').action(dev);
+program.command('dev').description('Run dev server').action(dev);

 program.command('lint').description('Run eslint and stylelint').action(lint);

@ -53,7 +52,6 @@ program.command('clean').description('Clean all dist files').action(clean);
 program
  .command('build')
  .description('Compile components in production mode')
-  .option('--watch', 'Watch file change')
  .action(build);

 program
--- a/packages/vant-cli/src/commands/build.ts
+++ b/packages/vant-cli/src/commands/build.ts
@ -1,10 +1,9 @@
 import execa from 'execa';
-import chokidar from 'chokidar';
 import { join, relative } from 'path';
 import { remove, copy, readdirSync, existsSync } from 'fs-extra';
 import { clean } from './clean';
 import { CSS_LANG } from '../common/css';
-import { ora, consola, slimPath } from '../common/logger';
+import { ora, consola } from '../common/logger';
 import { installDependencies } from '../common/manager';
 import { compileJs } from '../compiler/compile-js';
 import { compileSfc } from '../compiler/compile-sfc';
@ -181,44 +180,13 @@ async function runBuildTasks() {
  consola.success('Compile successfully');
 }

-function watchFileChange() {
-  consola.info('Watching file changes...');
-
-  chokidar.watch(SRC_DIR).on('change', async (path) => {
-    if (isDemoDir(path) || isTestDir(path)) {
-      return;
-    }
-
-    const spinner = ora('File changed, start compilation...').start();
-    const esPath = path.replace(SRC_DIR, ES_DIR);
-    const libPath = path.replace(SRC_DIR, LIB_DIR);
-
-    try {
-      await copy(path, esPath);
-      await copy(path, libPath);
-      await compileFile(esPath);
-      await compileFile(libPath);
-      await genStyleDepsMap();
-      genComponentStyle({ cache: false });
-      spinner.succeed('Compiled: ' + slimPath(path));
-    } catch (err) {
-      spinner.fail('Compile failed: ' + path);
-      console.log(err);
-    }
-  });
-}
-
-export async function build(cmd: { watch?: boolean } = {}) {
+export async function build() {
  setNodeEnv('production');

  try {
    await clean();
    await installDependencies();
    await runBuildTasks();
-
-    if (cmd.watch) {
-      watchFileChange();
-    }
  } catch (err) {
    consola.error('Build failed');
    process.exit(1);
--- a/packages/vant-cli/src/commands/lint.ts
+++ b/packages/vant-cli/src/commands/lint.ts
@ -1,5 +1,5 @@
 import execa from 'execa';
-import { ora } from '../common/logger';
+import { consola, ora } from '../common/logger';
 import { SCRIPT_EXTS } from '../common/constant';

 type RunCommandMessages = {
@ -17,6 +17,7 @@ function runCommand(

  return new Promise((resolve) => {
    execa(cmd, options, {
+      preferLocal: true,
      env: { FORCE_COLOR: true },
    })
      .then(() => {
@ -25,7 +26,7 @@ function runCommand(
      })
      .catch((err: any) => {
        spinner.fail(messages.failed);
-        console.log(err.stderr || err.stdout);
+        consola.error(err.stderr || err.stdout);
        resolve(false);
      });
  });
--- a/packages/vant-cli/src/common/constant.ts
+++ b/packages/vant-cli/src/common/constant.ts
@ -25,16 +25,16 @@ export const ES_DIR = join(ROOT, 'es');
 export const LIB_DIR = join(ROOT, 'lib');
 export const DOCS_DIR = join(ROOT, 'docs');
 export const VETUR_DIR = join(ROOT, 'vetur');
-export const SITE_DIST_DIR = join(ROOT, 'site');
+export const SITE_DIST_DIR = join(ROOT, 'site-dist');
 export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.js');
 export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');
-export const ROOT_WEBPACK_CONFIG_FILE = join(ROOT, 'webpack.config.js');
 export const ROOT_POSTCSS_CONFIG_FILE = join(ROOT, 'postcss.config.js');
 export const CACHE_DIR = join(ROOT, 'node_modules/.cache');

 // Relative paths
 export const DIST_DIR = join(__dirname, '../../dist');
 export const CONFIG_DIR = join(__dirname, '../config');
+export const SITE_SRC_DIR = join(__dirname, '../../site');

 // Dist files
 export const PACKAGE_ENTRY_FILE = join(DIST_DIR, 'package-entry.js');
--- a/packages/vant-cli/src/common/index.ts
+++ b/packages/vant-cli/src/common/index.ts
@ -6,9 +6,7 @@ import {
  readFileSync,
  outputFileSync,
 } from 'fs-extra';
-import { merge } from 'webpack-merge';
-import { SRC_DIR, getVantConfig, ROOT_WEBPACK_CONFIG_FILE } from './constant';
-import { WebpackConfig } from './types';
+import { SRC_DIR, getVantConfig } from './constant';

 export const EXT_REGEXP = /\.\w+$/;
 export const SFC_REGEXP = /\.(vue)$/;
@ -102,22 +100,6 @@ export function normalizePath(path: string): string {
  return path.replace(/\\/g, '/');
 }

-export function getWebpackConfig(defaultConfig: WebpackConfig): WebpackConfig {
-  if (existsSync(ROOT_WEBPACK_CONFIG_FILE)) {
-    const config = require(ROOT_WEBPACK_CONFIG_FILE);
-
-    // 如果是函数形式，可能并不仅仅是添加额外的处理流程，而是在原有流程上进行修改
-    // 比如修改markdown-loader,添加options.enableMetaData
-    if (typeof config === 'function') {
-      return merge(defaultConfig, config(defaultConfig));
-    }
-
-    return merge(defaultConfig, config);
-  }
-
-  return defaultConfig;
-}
-
 export type ModuleEnv = 'esmodule' | 'commonjs';
 export type NodeEnv = 'production' | 'development' | 'test';
 export type BuildTarget = 'site' | 'package';
--- a/packages/vant-cli/src/common/types.ts
+++ b/packages/vant-cli/src/common/types.ts
@ -1,5 +0,0 @@
-import type Webpack from 'webpack';
-
-export type WebpackConfig = Webpack.Configuration & {
-  devServer?: any;
-};
--- a/packages/vant-cli/src/compiler/compile-less.ts
+++ b/packages/vant-cli/src/compiler/compile-less.ts
@ -1,25 +1,13 @@
-import { render, FileManager } from 'less';
+import { join } from 'path';
+import { render } from 'less';
 import { readFileSync } from 'fs-extra';
-
-// less plugin to resolve tilde
-class TildeResolver extends FileManager {
-  loadFile(filename: string, ...args: any[]) {
-    filename = filename.replace('~', '');
-    return FileManager.prototype.loadFile.apply(this, [filename, ...args]);
-  }
-}
-
-const TildeResolverPlugin = {
-  install(lessInstance: unknown, pluginManager: any) {
-    pluginManager.addFileManager(new TildeResolver());
-  },
-};
+import { CWD } from '../common/constant';

 export async function compileLess(filePath: string) {
  const source = readFileSync(filePath, 'utf-8');
  const { css } = await render(source, {
    filename: filePath,
-    plugins: [TildeResolverPlugin],
+    paths: [join(CWD, 'node_modules')],
  });

  return css;
--- a/packages/vant-cli/src/compiler/compile-package.ts
+++ b/packages/vant-cli/src/compiler/compile-package.ts
@ -1,16 +1,6 @@
-import webpack from 'webpack';
-import { getPackageConfig } from '../config/webpack.package';
+import { build } from 'vite';
+import { getViteConfigForPackage } from '../config/vite.package';

-export async function compilePackage(isMinify: boolean) {
-  return new Promise<void>((resolve, reject) => {
-    const config = getPackageConfig(isMinify);
-
-    webpack(config, (err, stats) => {
-      if (err || (stats?.hasErrors())) {
-        reject(err || stats?.toString());
-      } else {
-        resolve();
-      }
-    });
-  });
+export async function compilePackage(minify: boolean) {
+  return build(getViteConfigForPackage(minify));
 }
--- a/packages/vant-cli/src/compiler/compile-sass.ts
+++ b/packages/vant-cli/src/compiler/compile-sass.ts
@ -1,5 +1,3 @@
-import { renderSync } from 'sass';
-
 // allow to import from node_modules
 // @import "~package-name/var.scss"
 const tildeImporter = (url: string) => {
@ -16,6 +14,7 @@ const tildeImporter = (url: string) => {
 };

 export async function compileSass(filePath: string) {
+  const { renderSync } = require('sass');
  const { css } = renderSync({ file: filePath, importer: tildeImporter });
  return css;
 }
--- a/packages/vant-cli/src/compiler/compile-site.ts
+++ b/packages/vant-cli/src/compiler/compile-site.ts
@ -1,53 +1,44 @@
-import webpack from 'webpack';
-import WebpackDevServer from 'webpack-dev-server';
-import { get } from 'lodash';
-import { getPortPromise } from 'portfinder';
-import { getSiteDevConfig } from '../config/webpack.site.dev';
-import { getSitePrdConfig } from '../config/webpack.site.prd';
+import { createServer, build } from 'vite';
+import {
+  getViteConfigForSiteDev,
+  getViteConfigForSiteProd,
+} from '../config/vite.site';
+import { replaceExt } from '../common';
+import { CSS_LANG } from '../common/css';
+import { genPackageEntry } from './gen-package-entry';
+import { genPackageStyle } from './gen-package-style';
+import { genSiteMobileShared } from './gen-site-mobile-shared';
+import { genSiteDesktopShared } from './gen-site-desktop-shared';
+import { genStyleDepsMap } from './gen-style-deps-map';
+import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant';

-async function runDevServer(
-  port: number,
-  config: ReturnType<typeof getSiteDevConfig>
-) {
-  const host = get(config.devServer, 'host', 'localhost');
-  const server = new WebpackDevServer(
-    {
-      ...config.devServer,
-      port,
-      host,
-    },
-    webpack(config)
-  );
-
-  await server.start();
-}
-
-async function watch() {
-  const config = getSiteDevConfig();
-  const port = await getPortPromise({
-    port: config.devServer.port,
-  });
-  await runDevServer(port, config);
-}
-
-function build() {
-  return new Promise<void>((resolve, reject) => {
-    const config = getSitePrdConfig();
-
-    webpack(config, (err, stats) => {
-      if (err || (stats && stats.hasErrors())) {
-        reject();
-      } else {
+export async function genSiteEntry(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    genStyleDepsMap()
+      .then(() => {
+        genPackageEntry({
+          outputPath: PACKAGE_ENTRY_FILE,
+        });
+        genPackageStyle({
+          outputPath: replaceExt(PACKAGE_STYLE_FILE, `.${CSS_LANG}`),
+        });
+        genSiteMobileShared();
+        genSiteDesktopShared();
        resolve();
-      }
-    });
+      })
+      .catch((err) => {
+        console.log(err);
+        reject(err);
+      });
  });
 }

 export async function compileSite(production = false) {
+  await genSiteEntry();
  if (production) {
-    await build();
+    await build(getViteConfigForSiteProd());
  } else {
-    await watch();
+    const server = await createServer(getViteConfigForSiteDev());
+    await server.listen();
  }
 }
--- a/packages/vant-cli/src/compiler/gen-site-desktop-shared.ts
+++ b/packages/vant-cli/src/compiler/gen-site-desktop-shared.ts
@ -1,12 +1,12 @@
 import glob from 'fast-glob';
 import { join, parse } from 'path';
-import { existsSync, readdirSync } from 'fs-extra';
+import { existsSync, readFileSync, readdirSync } from 'fs-extra';
 import {
  pascalize,
-  removeExt,
  getVantConfig,
  smartOutputFile,
  normalizePath,
+  isDev,
 } from '../common';
 import {
  SRC_DIR,
@ -80,7 +80,13 @@ function resolveDocuments(components: string[]): DocumentItem[] {

 function genImportDocuments(items: DocumentItem[]) {
  return items
-    .map((item) => `import ${item.name} from '${normalizePath(item.path)}';`)
+    .map((item) => {
+      const path = normalizePath(item.path);
+      if (isDev()) {
+        return `const ${item.name} = defineAsyncComponent(() => import('${path}'));`;
+      }
+      return `import ${item.name} from '${path}';`;
+    })
    .join('\n');
 }

@ -90,8 +96,9 @@ function genExportDocuments(items: DocumentItem[]) {
 };`;
 }

-function genImportConfig() {
-  return `import config from '${removeExt(normalizePath(VANT_CONFIG_FILE))}';`;
+function genVantConfigContent() {
+  const content = readFileSync(VANT_CONFIG_FILE, 'utf-8');
+  return content.replace('module.exports', 'const config');
 }

 function genExportConfig() {
@ -102,23 +109,15 @@ function genExportVersion() {
  return `export const packageVersion = '${getPackageJson().version}';`;
 }

-function genInstall() {
-  return `import './package-style';`;
-}
-
-function genExportPackageEntry() {
-  return `export { default as packageEntry } from './package-entry';`;
-}
-
 export function genSiteDesktopShared() {
  const dirs = readdirSync(SRC_DIR);
  const documents = resolveDocuments(dirs);

-  const code = `${genImportConfig()}
-${genInstall()}
+  const code = `import { defineAsyncComponent } from 'vue';
 ${genImportDocuments(documents)}

-${genExportPackageEntry()}
+${genVantConfigContent()}
+
 ${genExportConfig()}
 ${genExportDocuments(documents)}
 ${genExportVersion()}
--- a/packages/vant-cli/src/compiler/gen-site-mobile-shared.ts
+++ b/packages/vant-cli/src/compiler/gen-site-mobile-shared.ts
@ -17,17 +17,17 @@ type DemoItem = {
 };

 function genInstall() {
-  return `import packageEntry from './package-entry';
-import './package-style';
+  return `import { defineAsyncComponent } from 'vue';
+import './package-style.less';
 `;
 }

 function genImports(demos: DemoItem[]) {
  return demos
-    .map(
-      (item) =>
-        `import ${item.name} from '${removeExt(normalizePath(item.path))}';`
-    )
+    .map((item) => {
+      const path = removeExt(normalizePath(item.path));
+      return `const ${item.name} = defineAsyncComponent(() => import('${path}'))`;
+    })
    .join('\n');
 }

@ -82,8 +82,6 @@ function genCode(components: string[]) {
  return `${genInstall()}
 ${genImports(demos)}

-export { packageEntry };
-
 ${getSetName(demos)}

 ${genExports(demos)}
--- a/packages/vant-cli/src/compiler/vant-cli-site-plugin.ts
+++ b/packages/vant-cli/src/compiler/vant-cli-site-plugin.ts
@ -1,42 +0,0 @@
-import { Compiler } from 'webpack';
-import { replaceExt } from '../common';
-import { CSS_LANG } from '../common/css';
-import { genPackageEntry } from './gen-package-entry';
-import { genPackageStyle } from './gen-package-style';
-import { genSiteMobileShared } from './gen-site-mobile-shared';
-import { genSiteDesktopShared } from './gen-site-desktop-shared';
-import { genStyleDepsMap } from './gen-style-deps-map';
-import { PACKAGE_ENTRY_FILE, PACKAGE_STYLE_FILE } from '../common/constant';
-
-const PLUGIN_NAME = 'VantCliSitePlugin';
-
-export async function genSiteEntry(): Promise<void> {
-  return new Promise((resolve, reject) => {
-    genStyleDepsMap()
-      .then(() => {
-        genPackageEntry({
-          outputPath: PACKAGE_ENTRY_FILE,
-        });
-        genPackageStyle({
-          outputPath: replaceExt(PACKAGE_STYLE_FILE, `.${CSS_LANG}`),
-        });
-        genSiteMobileShared();
-        genSiteDesktopShared();
-        resolve();
-      })
-      .catch((err) => {
-        console.log(err);
-        reject(err);
-      });
-  });
-}
-
-export class VantCliSitePlugin {
-  apply(compiler: Compiler) {
-    if (process.env.NODE_ENV === 'production') {
-      compiler.hooks.beforeCompile.tapPromise(PLUGIN_NAME, genSiteEntry);
-    } else {
-      compiler.hooks.watchRun.tapPromise(PLUGIN_NAME, genSiteEntry);
-    }
-  }
-}
--- a/packages/vant-cli/src/config/babel.config.ts
+++ b/packages/vant-cli/src/config/babel.config.ts
@ -27,15 +27,6 @@ module.exports = function (api?: ConfigAPI, options: PresetOption = {}) {
      require('../compiler/babel-preset-vue-ts'),
    ],
    plugins: [
-      [
-        require.resolve('babel-plugin-import'),
-        {
-          libraryName: 'vant',
-          libraryDirectory: useESModules ? 'es' : 'lib',
-          style: true,
-        },
-        'vant',
-      ],
      [
        require.resolve('@vue/babel-plugin-jsx'),
        {
--- a/packages/vant-cli/src/config/jest.setup.ts
+++ b/packages/vant-cli/src/config/jest.setup.ts
@ -1,12 +1 @@
-/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-// @ts-ignore
-import vant from '../../dist/package-entry';
 import 'jest-canvas-mock';
-
-declare global {
-  interface Window {
-    vant: any;
-  }
-}
-
-window.vant = vant;
--- a/packages/vant-cli/src/config/vite.package.ts
+++ b/packages/vant-cli/src/config/vite.package.ts
@ -0,0 +1,38 @@
+import { join } from 'path';
+import type { InlineConfig } from 'vite';
+import { setBuildTarget } from '../common';
+import { CWD, ES_DIR, getVantConfig, LIB_DIR } from '../common/constant';
+
+export function getViteConfigForPackage(minify: boolean): InlineConfig {
+  setBuildTarget('package');
+
+  const { name } = getVantConfig();
+
+  return {
+    root: CWD,
+
+    logLevel: 'silent',
+
+    build: {
+      lib: {
+        name,
+        entry: join(ES_DIR, 'index.js'),
+        fileName: (format: string) => {
+          const suffix = format === 'umd' ? '' : `.${format}`;
+          return minify ? `${name}${suffix}.min.js` : `${name}${suffix}.js`;
+        },
+      },
+      minify,
+      rollupOptions: {
+        external: ['vue'],
+        output: {
+          dir: LIB_DIR,
+          exports: 'named',
+          globals: {
+            vue: 'Vue',
+          },
+        },
+      },
+    },
+  };
+}
--- a/packages/vant-cli/src/config/vite.site.ts
+++ b/packages/vant-cli/src/config/vite.site.ts
@ -0,0 +1,152 @@
+import { join } from 'path';
+import { get } from 'lodash';
+import hljs from 'highlight.js';
+import vitePluginMd from 'vite-plugin-md';
+import vitePluginVue from '@vitejs/plugin-vue';
+import vitePluginJsx from '@vitejs/plugin-vue-jsx';
+import { setBuildTarget, getVantConfig } from '../common';
+import {
+  SITE_DIST_DIR,
+  SITE_MOBILE_SHARED_FILE,
+  SITE_DESKTOP_SHARED_FILE,
+  SITE_SRC_DIR,
+} from '../common/constant';
+import { injectHtml } from 'vite-plugin-html';
+import type { InlineConfig } from 'vite';
+
+function markdownHighlight(str: string, lang: string) {
+  if (lang && hljs.getLanguage(lang)) {
+    // https://github.com/highlightjs/highlight.js/issues/2277
+    return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
+  }
+
+  return '';
+}
+
+function markdownCardWrapper(htmlCode: string) {
+  const group = htmlCode
+    .replace(/<h3/g, ':::<h3')
+    .replace(/<h2/g, ':::<h2')
+    .split(':::');
+
+  return group
+    .map((fragment) => {
+      if (fragment.indexOf('<h3') !== -1) {
+        return `<div class="van-doc-card">${fragment}</div>`;
+      }
+
+      return fragment;
+    })
+    .join('');
+}
+
+function getSiteConfig(vantConfig: any) {
+  const siteConfig = vantConfig.site;
+
+  if (siteConfig.locales) {
+    return siteConfig.locales[siteConfig.defaultLang || 'en-US'];
+  }
+
+  return siteConfig;
+}
+
+function getTitle(config: { title: string; description?: string }) {
+  let { title } = config;
+
+  if (config.description) {
+    title += ` - ${config.description}`;
+  }
+
+  return title;
+}
+
+function getHTMLMeta(vantConfig: any) {
+  const meta = get(vantConfig, 'site.htmlMeta');
+
+  if (meta) {
+    return Object.keys(meta)
+      .map((key) => `<meta name="${key}" content="${meta[key]}">`)
+      .join('\n');
+  }
+
+  return '';
+}
+
+export function getViteConfigForSiteDev(): InlineConfig {
+  setBuildTarget('package');
+
+  const vantConfig = getVantConfig();
+  const siteConfig = getSiteConfig(vantConfig);
+  const title = getTitle(siteConfig);
+  const baiduAnalytics = get(vantConfig, 'site.baiduAnalytics');
+
+  return {
+    root: SITE_SRC_DIR,
+
+    plugins: [
+      vitePluginVue({
+        include: [/\.vue$/, /\.md$/],
+      }),
+      vitePluginMd({
+        wrapperClasses: 'van-doc-markdown-body',
+        transforms: {
+          after: markdownCardWrapper,
+        },
+        markdownItOptions: {
+          highlight: markdownHighlight,
+        },
+        markdownItSetup(md: any) {
+          const { slugify } = require('transliteration');
+          const markdownItAnchor = require('markdown-it-anchor');
+          md.use(markdownItAnchor, {
+            level: 2,
+            slugify,
+          });
+        },
+      }),
+      vitePluginJsx(),
+      injectHtml({
+        data: {
+          ...siteConfig,
+          title,
+          baiduAnalytics,
+          meta: getHTMLMeta(vantConfig),
+        },
+      }),
+    ],
+
+    resolve: {
+      alias: {
+        'site-mobile-shared': SITE_MOBILE_SHARED_FILE,
+        'site-desktop-shared': SITE_DESKTOP_SHARED_FILE,
+      },
+    },
+
+    server: {
+      host: '0.0.0.0',
+    },
+  };
+}
+
+export function getViteConfigForSiteProd(): InlineConfig {
+  const devConfig = getViteConfigForSiteDev();
+  const vantConfig = getVantConfig();
+  const outDir = get(vantConfig, 'build.site.outputDir', SITE_DIST_DIR);
+  const publicPath = get(vantConfig, 'build.site.publicPath', '/');
+
+  return {
+    ...devConfig,
+    base: publicPath,
+    build: {
+      outDir,
+      brotliSize: false,
+      emptyOutDir: true,
+      rollupOptions: {
+        input: {
+          main: join(SITE_SRC_DIR, 'index.html'),
+          nested: join(SITE_SRC_DIR, 'mobile.html'),
+        },
+      },
+    },
+  };
+}
--- a/packages/vant-cli/src/config/webpack.base.ts
+++ b/packages/vant-cli/src/config/webpack.base.ts
@ -1,124 +0,0 @@
-import sass from 'sass';
-import webpack from 'webpack';
-import { VueLoaderPlugin } from 'vue-loader';
-import { join } from 'path';
-import { consola } from '../common/logger';
-import { existsSync } from 'fs';
-import { WebpackConfig } from '../common/types';
-import {
-  CWD,
-  STYLE_EXTS,
-  SCRIPT_EXTS,
-  POSTCSS_CONFIG_FILE,
-} from '../common/constant';
-
-const CSS_LOADERS = [
-  require.resolve('style-loader'),
-  require.resolve('css-loader'),
-  {
-    loader: require.resolve('postcss-loader'),
-    options: {
-      postcssOptions: require(POSTCSS_CONFIG_FILE),
-    },
-  },
-];
-
-const VUE_LOADER = {
-  loader: require.resolve('vue-loader'),
-  options: {
-    compilerOptions: {
-      preserveWhitespace: false,
-    },
-  },
-};
-
-const plugins = [
-  new webpack.DefinePlugin({
-    __VUE_OPTIONS_API__: 'true',
-    __VUE_PROD_DEVTOOLS__: 'false',
-  }),
-  new VueLoaderPlugin(),
-];
-
-const tsconfigPath = join(CWD, 'tsconfig.json');
-if (existsSync(tsconfigPath)) {
-  const ForkTsCheckerPlugin = require('fork-ts-checker-webpack-plugin');
-  plugins.push(
-    new ForkTsCheckerPlugin({
-      typescript: {
-        extensions: {
-          vue: {
-            enabled: true,
-            compiler: '@vue/compiler-sfc',
-          },
-        },
-      },
-      logger: {
-        issues: {
-          // skip info message
-          log() {},
-          warn(message: string) {
-            consola.warn(message);
-          },
-          error(message: string) {
-            consola.error(message);
-          },
-        },
-      },
-    })
-  );
-}
-
-export const baseConfig: WebpackConfig = {
-  mode: 'development',
-  resolve: {
-    extensions: [...SCRIPT_EXTS, ...STYLE_EXTS],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        use: [VUE_LOADER],
-      },
-      {
-        test: /\.(js|ts|jsx|tsx)$/,
-        exclude: /node_modules\/(?!(@vant\/cli))/,
-        use: [require.resolve('babel-loader')],
-      },
-      {
-        test: /\.css$/,
-        sideEffects: true,
-        use: CSS_LOADERS,
-      },
-      {
-        test: /\.less$/,
-        sideEffects: true,
-        use: [...CSS_LOADERS, require.resolve('less-loader')],
-      },
-      {
-        test: /\.scss$/,
-        sideEffects: true,
-        use: [
-          ...CSS_LOADERS,
-          {
-            loader: require.resolve('sass-loader'),
-            options: {
-              implementation: sass,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.md$/,
-        use: [VUE_LOADER, require.resolve('@vant/markdown-loader')],
-      },
-    ],
-  },
-  plugins,
-  cache: {
-    type: 'filesystem',
-    buildDependencies: {
-      config: [__filename],
-    },
-  },
-};
--- a/packages/vant-cli/src/config/webpack.package.ts
+++ b/packages/vant-cli/src/config/webpack.package.ts
@ -1,43 +0,0 @@
-import { merge } from 'webpack-merge';
-import { join } from 'path';
-import { baseConfig } from './webpack.base';
-import { WebpackConfig } from '../common/types';
-import { getVantConfig, getWebpackConfig, setBuildTarget } from '../common';
-import { LIB_DIR, ES_DIR } from '../common/constant';
-
-export function getPackageConfig(isMinify: boolean): WebpackConfig {
-  const { name } = getVantConfig();
-
-  setBuildTarget('package');
-
-  return getWebpackConfig(
-    merge(baseConfig as any, {
-      mode: 'production',
-      entry: {
-        [name]: join(ES_DIR, 'index.js'),
-      },
-      stats: 'none',
-      output: {
-        path: LIB_DIR,
-        library: name,
-        libraryTarget: 'umd',
-        filename: isMinify ? '[name].min.js' : '[name].js',
-        umdNamedDefine: true,
-        // https://github.com/webpack/webpack/issues/6522
-        globalObject: "typeof self !== 'undefined' ? self : this",
-      },
-      externals: {
-        vue: {
-          root: 'Vue',
-          commonjs: 'vue',
-          commonjs2: 'vue',
-          amd: 'vue',
-        },
-      },
-      performance: false,
-      optimization: {
-        minimize: isMinify,
-      },
-    })
-  );
-}
--- a/packages/vant-cli/src/config/webpack.site.dev.ts
+++ b/packages/vant-cli/src/config/webpack.site.dev.ts
@ -1,111 +0,0 @@
-import WebpackBar from 'webpackbar';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { get } from 'lodash';
-import { join } from 'path';
-import { merge } from 'webpack-merge';
-import { baseConfig } from './webpack.base';
-import { WebpackConfig } from '../common/types';
-import { getVantConfig, getWebpackConfig } from '../common';
-import { VantCliSitePlugin } from '../compiler/vant-cli-site-plugin';
-import {
-  GREEN,
-  SITE_MOBILE_SHARED_FILE,
-  SITE_DESKTOP_SHARED_FILE,
-} from '../common/constant';
-
-export function getSiteDevBaseConfig(): WebpackConfig {
-  const vantConfig = getVantConfig();
-  const baiduAnalytics = get(vantConfig, 'site.baiduAnalytics');
-
-  function getSiteConfig() {
-    const siteConfig = vantConfig.site;
-
-    if (siteConfig.locales) {
-      return siteConfig.locales[siteConfig.defaultLang || 'en-US'];
-    }
-
-    return siteConfig;
-  }
-
-  function getTitle(config: { title: string; description?: string }) {
-    let { title } = config;
-
-    if (config.description) {
-      title += ` - ${config.description}`;
-    }
-
-    return title;
-  }
-
-  const siteConfig = getSiteConfig();
-  const title = getTitle(siteConfig);
-  const { htmlPluginOptions } = vantConfig.site;
-
-  return merge(baseConfig as any, {
-    entry: {
-      'site-desktop': [join(__dirname, '../../site/desktop/main.js')],
-      'site-mobile': [join(__dirname, '../../site/mobile/main.js')],
-    },
-    devServer: {
-      port: 8080,
-      host: '0.0.0.0',
-      allowedHosts: 'all',
-      devMiddleware: {
-        stats: 'errors-only',
-        publicPath: '/',
-      },
-    },
-    resolve: {
-      alias: {
-        'site-mobile-shared': SITE_MOBILE_SHARED_FILE,
-        'site-desktop-shared': SITE_DESKTOP_SHARED_FILE,
-      },
-    },
-    output: {
-      chunkFilename: '[name].js',
-    },
-    optimization: {
-      splitChunks: {
-        cacheGroups: {
-          chunks: {
-            chunks: 'all',
-            minChunks: 2,
-            minSize: 0,
-            name: 'chunks',
-          },
-        },
-      },
-    },
-    plugins: [
-      new WebpackBar({
-        name: 'Vant Cli',
-        color: GREEN,
-      }),
-      new VantCliSitePlugin(),
-      new HtmlWebpackPlugin({
-        title,
-        logo: siteConfig.logo,
-        description: siteConfig.description,
-        chunks: ['chunks', 'site-desktop'],
-        template: join(__dirname, '../../site/desktop/index.html'),
-        filename: 'index.html',
-        baiduAnalytics,
-        ...htmlPluginOptions,
-      }),
-      new HtmlWebpackPlugin({
-        title,
-        logo: siteConfig.logo,
-        description: siteConfig.description,
-        chunks: ['chunks', 'site-mobile'],
-        template: join(__dirname, '../../site/mobile/index.html'),
-        filename: 'mobile.html',
-        baiduAnalytics,
-        ...htmlPluginOptions,
-      }),
-    ],
-  });
-}
-
-export function getSiteDevConfig(): WebpackConfig {
-  return getWebpackConfig(getSiteDevBaseConfig());
-}
--- a/packages/vant-cli/src/config/webpack.site.prd.ts
+++ b/packages/vant-cli/src/config/webpack.site.prd.ts
@ -1,29 +0,0 @@
-import { merge } from 'webpack-merge';
-import { get } from 'lodash';
-import { WebpackConfig } from '../common/types';
-import { getVantConfig, getWebpackConfig } from '../common';
-import { getSiteDevBaseConfig } from './webpack.site.dev';
-import { SITE_DIST_DIR } from '../common/constant';
-
-const vantConfig = getVantConfig();
-const outputDir = get(vantConfig, 'build.site.outputDir', SITE_DIST_DIR);
-const publicPath = get(vantConfig, 'build.site.publicPath', '/');
-
-export function getSitePrdConfig(): WebpackConfig {
-  return getWebpackConfig(
-    merge(getSiteDevBaseConfig(), {
-      mode: 'production',
-      stats: 'none',
-      performance: {
-        maxAssetSize: 5 * 1024 * 1024,
-        maxEntrypointSize: 5 * 1024 * 1024,
-      },
-      output: {
-        publicPath,
-        path: outputDir,
-        filename: '[name].[contenthash:8].js',
-        chunkFilename: 'async_[name].[contenthash:8].js',
-      },
-    })
-  );
-}
--- a/packages/vant-cli/src/module.d.ts
+++ b/packages/vant-cli/src/module.d.ts
@ -1,13 +1,8 @@
 // some modules with missing type definitions
-declare module 'less';
-declare module 'sass';
 declare module 'execa';
 declare module 'hash-sum';
 declare module 'clean-css';
-declare module 'webpackbar';
 declare module 'release-it';
-declare module 'webpack-dev-server';
-declare module 'html-webpack-plugin';
 declare module 'conventional-changelog';
 declare module '@vant/markdown-vetur';
 declare module '@babel/helper-plugin-utils';
--- a/packages/vant-cli/yarn.lock
+++ b/packages/vant-cli/yarn.lock
--- a/packages/vant-eslint-config/package.json
+++ b/packages/vant-eslint-config/package.json
@ -9,9 +9,6 @@
  },
  "license": "MIT",
  "repository": "https://github.com/youzan/vant/tree/dev/packages/vant-eslint-config",
-  "peerDependencies": {
-    "eslint": "^7.0.0"
-  },
  "dependencies": {
    "@typescript-eslint/eslint-plugin": "^4.29.1",
    "@typescript-eslint/parser": "^4.29.1",
@ -22,6 +19,7 @@
    "eslint-plugin-vue": "^7.15.2"
  },
  "devDependencies": {
-    "eslint": "^7.32.0"
+    "eslint": "^7.32.0",
+    "typescript": "^4.0.0"
  }
 }
--- a/packages/vant-eslint-config/yarn.lock
+++ b/packages/vant-eslint-config/yarn.lock
--- a/packages/vant-markdown-loader/README.md
+++ b/packages/vant-markdown-loader/README.md
@ -1,30 +0,0 @@
-# vant-markdown-loader
-
-Simple and fast vue markdown loader, transform markdown to vue component.
-
-## Install
-
-### NPM
-
-```shell
-npm i @vant/markdown-loader -S
-```
-
-### YARN
-
-```shell
-yarn add @vant/markdown-loader
-```
-
-## Options
-
- `enableMetaData`: Default `false`. Whether to use [front-matter](https://github.com/jxson/front-matter) to extract markdown meta data
-
- `linkOpen`: Default `true`. Whether to add target="_blank" to all links
-
- `wrapper(html, fm)`: Format the returned content using a custom function
-    - `html`: The result of [markdown-it](https://github.com/markdown-it/markdown-it)'s render
-    - `fm`: See [fm(string)](https://github.com/jxson/front-matter#fmstring). If `enableMetaData` option is `false`, the value is `undefined`. 
-        - `attributes`
-        - `body`
-        - `frontmatter`
--- a/packages/vant-markdown-loader/package.json
+++ b/packages/vant-markdown-loader/package.json
@ -1,20 +0,0 @@
-{
-  "name": "@vant/markdown-loader",
-  "version": "4.1.1",
-  "description": "Simple and fast vue markdown loader",
-  "main": "src/index.js",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "license": "MIT",
-  "repository": "https://github.com/youzan/vant/tree/dev/packages/vant-markdown-loader",
-  "dependencies": {
-    "front-matter": "^4.0.2",
-    "highlight.js": "^10.7.1",
-    "loader-utils": "^2.0.0",
-    "markdown-it": "^12.0.4",
-    "markdown-it-anchor": "^7.1.0",
-    "transliteration": "^2.2.0"
-  }
-}
--- a/packages/vant-markdown-loader/src/card-wrapper.js
+++ b/packages/vant-markdown-loader/src/card-wrapper.js
@ -1,16 +0,0 @@
-module.exports = function cardWrapper(html) {
-  const group = html
-    .replace(/<h3/g, ':::<h3')
-    .replace(/<h2/g, ':::<h2')
-    .split(':::');
-
-  return group
-    .map(fragment => {
-      if (fragment.indexOf('<h3') !== -1) {
-        return `<div class="card">${fragment}</div>`;
-      }
-
-      return fragment;
-    })
-    .join('');
-};
--- a/packages/vant-markdown-loader/src/extract-demo.js
+++ b/packages/vant-markdown-loader/src/extract-demo.js
@ -1,42 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-const os = require('os');
-const parser = require('./md-parser');
-
-function hyphenate(str) {
-  return str.replace(/\B([A-Z])/g, '-$1').toLowerCase();
-}
-
-module.exports = function extraDemo(content) {
-  const isWin = /^win/.test(os.platform());
-  const markdownDir = path.dirname(this.resourcePath);
-  const demoLinks = [];
-
-  content = content.replace(
-    /<demo-code([\s\S]*?)>([\s\S]*?)<\/demo-code>/g,
-    function (_, attrs, link) {
-      link = link.trim(); // 去换行符
-      const tag = 'demo-code-' + hyphenate(path.basename(link, '.vue'));
-      let fullLink;
-      if (isWin) {
-        fullLink = path.posix.join(...markdownDir.split(path.sep), link);
-      } else {
-        fullLink = path.join(markdownDir, link);
-      }
-      demoLinks.indexOf(fullLink) === -1 && demoLinks.push(fullLink);
-      const demoContent = fs.readFileSync(fullLink, { encoding: 'utf8' });
-      const demoParseredContent = parser.render(
-        '```html\n' + demoContent + '\n```'
-      );
-      return `
-        <demo-playground${attrs}
-        origin-code="${escape(demoContent)}"
-        code-snippet="${escape(demoParseredContent)}">
-          <${tag} />
-        </demo-playground>
-      `;
-    }
-  );
-
-  return [content, demoLinks];
-};
--- a/packages/vant-markdown-loader/src/highlight.js
+++ b/packages/vant-markdown-loader/src/highlight.js
@ -1,10 +0,0 @@
-const hljs = require('highlight.js');
-
-module.exports = function highlight(str, lang) {
-  if (lang && hljs.getLanguage(lang)) {
-    // https://github.com/highlightjs/highlight.js/issues/2277
-    return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
-  }
-
-  return '';
-};
--- a/packages/vant-markdown-loader/src/index.js
+++ b/packages/vant-markdown-loader/src/index.js
@ -1,117 +0,0 @@
-const path = require('path');
-const loaderUtils = require('loader-utils');
-const frontMatter = require('front-matter');
-const parser = require('./md-parser');
-const linkOpen = require('./link-open');
-const cardWrapper = require('./card-wrapper');
-const extractDemo = require('./extract-demo');
-const sideEffectTags = require('./side-effect-tags');
-
-function camelize(str) {
-  return `-${str}`.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ''));
-}
-
-const sharedVueOptions = `mounted() {
-    const anchors = [].slice.call(this.$el.querySelectorAll('h2, h3, h4, h5'));
-
-    anchors.forEach(anchor => {
-      anchor.addEventListener('click', this.scrollToAnchor);
-    });
-  },
-
-  methods: {
-    scrollToAnchor(event) {
-      if (event.target.id) {
-        this.$router.push({
-          name: this.$route.name,
-          hash: '#' + event.target.id
-        })
-      }
-    }
-  },
-`;
-
-function wrapper(content) {
-  let demoLinks;
-  [content, demoLinks] = extractDemo.call(this, content);
-  content = cardWrapper(content);
-
-  // 不包含 demo-code 的 md 文件，直接使绑定 HTML
-  if (demoLinks.length === 0) {
-    content = escape(content);
-
-    return `
-<script>
-import { h } from 'vue';
-
-const content = unescape(\`${content}\`);
-
-export default {
-${sharedVueOptions}
-
-  render() {
-    return h('section', { innerHTML: content });
-  }
-};
-</script>
-`;
-  }
-
-  // 包含 demo-code 的 md 文件，需要走模版渲染
-  let styles;
-  [content, styles] = sideEffectTags(content);
-
-  return `
-<template>
-  <section v-once>
-    ${content}
-  </section>
-</template>
-
-<script>
-${demoLinks
-  .map((link) => {
-    return `import DemoCode${camelize(
-      path.basename(link, '.vue')
-    )} from '${link}';`;
-  })
-  .join('\n')}
-
-export default {
-  components: {
-    ${demoLinks
-      .map((link) => `DemoCode${camelize(path.basename(link, '.vue'))}`)
-      .join(',')}
-  },
-
-${sharedVueOptions}
-};
-</script>
-
-${styles.join('\n')}
-`;
-}
-
-module.exports = function (source) {
-  let options = loaderUtils.getOptions(this) || {};
-  this.cacheable && this.cacheable();
-
-  options = {
-    wrapper,
-    linkOpen: true,
-    ...options,
-  };
-
-  let fm;
-
-  if (options.enableMetaData) {
-    fm = frontMatter(source);
-    source = fm.body;
-  }
-
-  if (options.linkOpen) {
-    linkOpen(parser);
-  }
-
-  return options.wrapper.call(this, parser.render(source), fm);
-};
--- a/packages/vant-markdown-loader/src/link-open.js
+++ b/packages/vant-markdown-loader/src/link-open.js
@ -1,18 +0,0 @@
-// add target="_blank" to all links
-module.exports = function linkOpen(md) {
-  const defaultRender =
-    md.renderer.rules.link_open ||
-    function(tokens, idx, options, env, self) {
-      return self.renderToken(tokens, idx, options);
-    };
-
-  md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
-    const aIndex = tokens[idx].attrIndex('target');
-
-    if (aIndex < 0) {
-      tokens[idx].attrPush(['target', '_blank']); // add new attribute
-    }
-
-    return defaultRender(tokens, idx, options, env, self);
-  };
-};
--- a/packages/vant-markdown-loader/src/md-parser.js
+++ b/packages/vant-markdown-loader/src/md-parser.js
@ -1,14 +0,0 @@
-const MarkdownIt = require('markdown-it');
-const markdownItAnchor = require('markdown-it-anchor');
-const highlight = require('./highlight');
-const { slugify } = require('transliteration');
-
-const parser = new MarkdownIt({
-  html: true,
-  highlight,
-}).use(markdownItAnchor, {
-  level: 2,
-  slugify,
-});
-
-module.exports = parser;
--- a/packages/vant-markdown-loader/src/side-effect-tags.js
+++ b/packages/vant-markdown-loader/src/side-effect-tags.js
@ -1,14 +0,0 @@
-module.exports = function sideEffectTags(content) {
-  const styles = [];
-
-  // 从模版中移除 script 标签
-  content = content.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/g, '');
-
-  // 从模版中移除 style 标签，并收集到 styles 数组中，以转移为 .vue 文件 的 style 标签
-  content = content.replace(/<style[\s\S]*?>([\s\S]*?)<\/style>/g, (_, css) => {
-    styles.push(`<style scoped>${css}</style>`);
-    return '';
-  });
-
-  return [content, styles];
-};
--- a/packages/vant-markdown-loader/yarn.lock
+++ b/packages/vant-markdown-loader/yarn.lock
@ -1,227 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-ansi-regex@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
-  integrity sha1-OIU59VF5vzkznIGvMKZU1p+Hy3U=
-
-ansi-styles@^4.0.0:
-  version "4.3.0"
-  resolved "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
-  integrity sha1-7dgDYornHATIWuegkG7a00tkiTc=
-  dependencies:
-    color-convert "^2.0.1"
-
-argparse@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.npm.taobao.org/argparse/download/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
-  integrity sha1-vNZ5HqWuCXJeF+WtmIE0zUCz2RE=
-  dependencies:
-    sprintf-js "~1.0.2"
-
-argparse@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npm.taobao.org/argparse/download/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
-  integrity sha1-JG9Q88p4oyQPbJl+ipvR6sSeSzg=
-
-big.js@^5.2.2:
-  version "5.2.2"
-  resolved "https://registry.npm.taobao.org/big.js/download/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
-  integrity sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=
-
-cliui@^7.0.2:
-  version "7.0.4"
-  resolved "https://registry.npm.taobao.org/cliui/download/cliui-7.0.4.tgz?cache=0&sync_timestamp=1604880333411&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
-  integrity sha1-oCZe5lVHb8gHrqnfPfjfd4OAi08=
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-    wrap-ansi "^7.0.0"
-
-color-convert@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
-  integrity sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=
-  dependencies:
-    color-name "~1.1.4"
-
-color-name@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
-  integrity sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=
-
-emoji-regex@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
-  integrity sha1-6Bj9ac5cz8tARZT4QpY79TFkzDc=
-
-emojis-list@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npm.taobao.org/emojis-list/download/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
-  integrity sha1-VXBmIEatKeLpFucariYKvf9Pang=
-
-entities@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npm.taobao.org/entities/download/entities-2.1.0.tgz?cache=0&sync_timestamp=1611535562200&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fentities%2Fdownload%2Fentities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
-  integrity sha1-mS0xKc999ocLlsV4WMJJoSD4uLU=
-
-escalade@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npm.taobao.org/escalade/download/escalade-3.1.1.tgz?cache=0&sync_timestamp=1602567437752&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescalade%2Fdownload%2Fescalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
-  integrity sha1-2M/ccACWXFoBdLSoLqpcBVJ0LkA=
-
-esprima@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.npm.taobao.org/esprima/download/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
-  integrity sha1-E7BM2z5sXRnfkatph6hpVhmwqnE=
-
-front-matter@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.npm.taobao.org/front-matter/download/front-matter-4.0.2.tgz#b14e54dc745cfd7293484f3210d15ea4edd7f4d5"
-  integrity sha1-sU5U3HRc/XKTSE8yENFepO3X9NU=
-  dependencies:
-    js-yaml "^3.13.1"
-
-get-caller-file@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.npm.taobao.org/get-caller-file/download/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
-  integrity sha1-T5RBKoLbMvNuOwuXQfipf+sDH34=
-
-highlight.js@^10.7.1:
-  version "10.7.1"
-  resolved "https://registry.npm.taobao.org/highlight.js/download/highlight.js-10.7.1.tgz#a8ec4152db24ea630c90927d6cae2a45f8ecb955"
-  integrity sha1-qOxBUtsk6mMMkJJ9bK4qRfjsuVU=
-
-is-fullwidth-code-point@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
-  integrity sha1-8Rb4Bk/pCz94RKOJl8C3UFEmnx0=
-
-js-yaml@^3.13.1:
-  version "3.13.1"
-  resolved "https://registry.npm.taobao.org/js-yaml/download/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
-  integrity sha1-r/FRswv9+o5J4F2iLnQV6d+jeEc=
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
-json5@^2.1.2:
-  version "2.1.3"
-  resolved "https://registry.npm.taobao.org/json5/download/json5-2.1.3.tgz?cache=0&sync_timestamp=1586045666090&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjson5%2Fdownload%2Fjson5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
-  integrity sha1-ybD3+pIzv+WAf+ZvzzpWF+1ZfUM=
-  dependencies:
-    minimist "^1.2.5"
-
-linkify-it@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.npm.taobao.org/linkify-it/download/linkify-it-3.0.2.tgz#f55eeb8bc1d3ae754049e124ab3bb56d97797fb8"
-  integrity sha1-9V7ri8HTrnVASeEkqzu1bZd5f7g=
-  dependencies:
-    uc.micro "^1.0.1"
-
-loader-utils@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
-  integrity sha1-5MrOW4FtQloWa18JfhDNErNgZLA=
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^3.0.0"
-    json5 "^2.1.2"
-
-markdown-it-anchor@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.npm.taobao.org/markdown-it-anchor/download/markdown-it-anchor-7.1.0.tgz#30fb21497bf59e83ff4d1ddc052d821962e2489e"
-  integrity sha1-MPshSXv1noP/TR3cBS2CGWLiSJ4=
-
-markdown-it@^12.0.4:
-  version "12.0.4"
-  resolved "https://registry.npm.taobao.org/markdown-it/download/markdown-it-12.0.4.tgz#eec8247d296327eac3ba9746bdeec9cfcc751e33"
-  integrity sha1-7sgkfSljJ+rDupdGve7Jz8x1HjM=
-  dependencies:
-    argparse "^2.0.1"
-    entities "~2.1.0"
-    linkify-it "^3.0.1"
-    mdurl "^1.0.1"
-    uc.micro "^1.0.5"
-
-mdurl@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npm.taobao.org/mdurl/download/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
-  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
-
-minimist@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.npm.taobao.org/minimist/download/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=
-
-require-directory@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npm.taobao.org/require-directory/download/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
-
-sprintf-js@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
-  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
-
-string-width@^4.1.0, string-width@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.npm.taobao.org/string-width/download/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
-  integrity sha1-lSGCxGzHssMT0VluYjmSvRY7crU=
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.0"
-
-strip-ansi@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-6.0.0.tgz?cache=0&sync_timestamp=1573280577145&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstrip-ansi%2Fdownload%2Fstrip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
-  integrity sha1-CxVx3XZpzNTz4G4U7x7tJiJa5TI=
-  dependencies:
-    ansi-regex "^5.0.0"
-
-transliteration@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.npm.taobao.org/transliteration/download/transliteration-2.2.0.tgz#e6333cc74b25ef4465bc27086ed8465c9a19211d"
-  integrity sha1-5jM8x0sl70RlvCcIbthGXJoZIR0=
-  dependencies:
-    yargs "^16.1.0"
-
-uc.micro@^1.0.1, uc.micro@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.npm.taobao.org/uc.micro/download/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
-  integrity sha1-nEEagCpAmpH8bPdAgbq6NLJEmaw=
-
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha1-Z+FFz/UQpqaYS98RUpEdadLrnkM=
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-y18n@^5.0.5:
-  version "5.0.5"
-  resolved "https://registry.npm.taobao.org/y18n/download/y18n-5.0.5.tgz?cache=0&sync_timestamp=1609798602895&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fy18n%2Fdownload%2Fy18n-5.0.5.tgz#8769ec08d03b1ea2df2500acef561743bbb9ab18"
-  integrity sha1-h2nsCNA7HqLfJQCs71YXQ7u5qxg=
-
-yargs-parser@^20.2.2:
-  version "20.2.7"
-  resolved "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-20.2.7.tgz?cache=0&sync_timestamp=1615404893185&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs-parser%2Fdownload%2Fyargs-parser-20.2.7.tgz#61df85c113edfb5a7a4e36eb8aa60ef423cbc90a"
-  integrity sha1-Yd+FwRPt+1p6TjbriqYO9CPLyQo=
-
-yargs@^16.1.0:
-  version "16.2.0"
-  resolved "https://registry.npm.taobao.org/yargs/download/yargs-16.2.0.tgz?cache=0&sync_timestamp=1617506941953&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs%2Fdownload%2Fyargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
-  integrity sha1-HIK/D2tqZur85+8w43b0mhJHf2Y=
-  dependencies:
-    cliui "^7.0.2"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.0"
-    y18n "^5.0.5"
-    yargs-parser "^20.2.2"
--- a/packages/vant-stylelint-config/package.json
+++ b/packages/vant-stylelint-config/package.json
@ -9,11 +9,11 @@
  },
  "license": "MIT",
  "repository": "https://github.com/youzan/vant/tree/dev/packages/vant-stylelint-config",
-  "peerDependencies": {
-    "stylelint": "^13.0.0"
-  },
  "dependencies": {
    "stylelint-config-prettier": "^8.0.1",
    "stylelint-config-standard": "^20.0.0"
+  },
+  "devDependencies": {
+    "stylelint": "^13.0.0"
  }
 }
--- a/packages/vant-stylelint-config/yarn.lock
+++ b/packages/vant-stylelint-config/yarn.lock
@ -1,20 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-stylelint-config-prettier@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.npm.taobao.org/stylelint-config-prettier/download/stylelint-config-prettier-8.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fstylelint-config-prettier%2Fdownload%2Fstylelint-config-prettier-8.0.1.tgz#ec7cdd7faabaff52ebfa56c28fed3d995ebb8cab"
-  integrity sha1-7Hzdf6q6/1Lr+lbCj+09mV67jKs=
-
-stylelint-config-recommended@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz#e0e547434016c5539fe2650afd58049a2fd1d657"
-  integrity sha512-F6yTRuc06xr1h5Qw/ykb2LuFynJ2IxkKfCMf+1xqPffkxh0S09Zc902XCffcsw/XMFq/OzQ1w54fLIDtmRNHnQ==
-
-stylelint-config-standard@^20.0.0:
-  version "20.0.0"
-  resolved "https://registry.npm.taobao.org/stylelint-config-standard/download/stylelint-config-standard-20.0.0.tgz#06135090c9e064befee3d594289f50e295b5e20d"
-  integrity sha1-BhNQkMngZL7+49WUKJ9Q4pW14g0=
-  dependencies:
-    stylelint-config-recommended "^3.0.0"
--- a/packages/vant/docs/markdown/home.en-US.md
+++ b/packages/vant/docs/markdown/home.en-US.md
@ -1,4 +1,4 @@
-<div class="card">
+<div class="van-doc-card">
  <div class="van-doc-intro">
    <img class="van-doc-intro__logo" style="width: 120px; height: 120px;" src="https://img.yzcdn.cn/vant/logo.png">
    <h2 style="margin: 0; font-size: 36px; line-height: 60px;">Vant</h2>
--- a/packages/vant/docs/markdown/home.zh-CN.md
+++ b/packages/vant/docs/markdown/home.zh-CN.md
@ -1,4 +1,4 @@
-<div class="card">
+<div class="van-doc-card">
  <div class="van-doc-intro">
    <img class="van-doc-intro__logo" style="width: 120px; height: 120px;" src="https://img.yzcdn.cn/vant/logo.png">
    <h2 style="margin: 0; font-size: 36px; line-height: 60px;">Vant</h2>
--- a/packages/vant/docs/site/demo-locale.js
+++ b/packages/vant/docs/site/demo-locale.js
@ -1,79 +0,0 @@
-import Locale from '../../src/locale';
-import enUS from '../../src/locale/lang/en-US';
-
-export function initDemoLocale() {
-  Locale.add({
-    'en-US': enUS,
-  });
-
-  // switch lang after routing
-  if (window.vueRouter) {
-    window.vueRouter.afterEach((to) => {
-      const { lang } = to.meta || {};
-
-      if (lang) {
-        Locale.use(lang);
-      }
-    });
-  }
-
-  // add some basic locale messages
-  Locale.add({
-    'zh-CN': {
-      add: '增加',
-      decrease: '减少',
-      red: '红色',
-      orange: '橙色',
-      yellow: '黄色',
-      purple: '紫色',
-      tab: '标签',
-      tag: '标签',
-      desc: '描述信息',
-      back: '返回',
-      title: '标题',
-      status: '状态',
-      button: '按钮',
-      option: '选项',
-      search: '搜索',
-      content: '内容',
-      custom: '自定义',
-      username: '用户名',
-      password: '密码',
-      disabled: '禁用状态',
-      uneditable: '不可编辑',
-      basicUsage: '基础用法',
-      advancedUsage: '高级用法',
-      loadingStatus: '加载状态',
-      usernamePlaceholder: '请输入用户名',
-      passwordPlaceholder: '请输入密码',
-    },
-    'en-US': {
-      add: 'Add',
-      decrease: 'Decrease',
-      red: 'Red',
-      orange: 'Orange',
-      yellow: 'Yellow',
-      purple: 'Purple',
-      tab: 'Tab',
-      tag: 'Tag',
-      desc: 'Description',
-      back: 'Back',
-      title: 'Title',
-      status: 'Status',
-      button: 'Button',
-      option: 'Option',
-      search: 'Search',
-      content: 'Content',
-      custom: 'Custom',
-      username: 'Username',
-      password: 'Password',
-      loadingStatus: 'Loading',
-      disabled: 'Disabled',
-      uneditable: 'Uneditable',
-      basicUsage: 'Basic Usage',
-      advancedUsage: 'Advanced Usage',
-      usernamePlaceholder: 'Username',
-      passwordPlaceholder: 'Password',
-    },
-  });
-}
--- a/packages/vant/docs/site/entry.js
+++ b/packages/vant/docs/site/entry.js
@ -1,11 +0,0 @@
-import { initDemoLocale } from './demo-locale';
-import Lazyload from '../../src/lazyload';
-
-initDemoLocale();
-
-const { app } = window;
-if (app) {
-  app.use(Lazyload, {
-    lazyComponent: true,
-  });
-}
--- a/packages/vant/docs/site/use-translate.ts
+++ b/packages/vant/docs/site/use-translate.ts
@ -1,6 +1,95 @@
 import Locale from '../../src/locale';
+import enUS from '../../src/locale/lang/en-US';
 import { camelize } from '../../src/utils/format/string';
 import { createTranslate } from '../../src/utils/create/translate';
+import type { App } from 'vue';
+import type { Router } from 'vue-router';
+
+declare global {
+  interface Window {
+    app: App;
+    vueRouter: Router;
+  }
+}
+
+export function initDemoLocale() {
+  Locale.add({
+    'en-US': enUS,
+  });
+
+  // switch lang after routing
+  if (window.vueRouter) {
+    window.vueRouter.afterEach((to) => {
+      const { lang } = to.meta || {};
+
+      if (lang) {
+        Locale.use(lang as string);
+      }
+    });
+  }
+
+  // add some basic locale messages
+  Locale.add({
+    'zh-CN': {
+      add: '增加',
+      decrease: '减少',
+      red: '红色',
+      orange: '橙色',
+      yellow: '黄色',
+      purple: '紫色',
+      tab: '标签',
+      tag: '标签',
+      desc: '描述信息',
+      back: '返回',
+      title: '标题',
+      status: '状态',
+      button: '按钮',
+      option: '选项',
+      search: '搜索',
+      content: '内容',
+      custom: '自定义',
+      username: '用户名',
+      password: '密码',
+      disabled: '禁用状态',
+      uneditable: '不可编辑',
+      basicUsage: '基础用法',
+      advancedUsage: '高级用法',
+      loadingStatus: '加载状态',
+      usernamePlaceholder: '请输入用户名',
+      passwordPlaceholder: '请输入密码',
+    },
+    'en-US': {
+      add: 'Add',
+      decrease: 'Decrease',
+      red: 'Red',
+      orange: 'Orange',
+      yellow: 'Yellow',
+      purple: 'Purple',
+      tab: 'Tab',
+      tag: 'Tag',
+      desc: 'Description',
+      back: 'Back',
+      title: 'Title',
+      status: 'Status',
+      button: 'Button',
+      option: 'Option',
+      search: 'Search',
+      content: 'Content',
+      custom: 'Custom',
+      username: 'Username',
+      password: 'Password',
+      loadingStatus: 'Loading',
+      disabled: 'Disabled',
+      uneditable: 'Uneditable',
+      basicUsage: 'Basic Usage',
+      advancedUsage: 'Advanced Usage',
+      usernamePlaceholder: 'Username',
+      passwordPlaceholder: 'Password',
+    },
+  });
+}
+
+initDemoLocale();

 let demoUid = 0;

--- a/packages/vant/jest.config.js
+++ b/packages/vant/jest.config.js
@ -6,7 +6,4 @@ module.exports = {
    '!**/test/**',
    '!**/lang/**',
  ],
-  moduleNameMapper: {
-    '^@demo(.*)$': '<rootDir>/docs/site$1',
-  },
 };
--- a/packages/vant/package.json
+++ b/packages/vant/package.json
@ -21,16 +21,10 @@
    "build": "vant-cli build",
    "build:site": "vant-cli build-site",
    "release": "vant-cli release --tag next",
-    "release:site": "yarn build:site && gh-pages -d site --add --dest v3",
+    "release:site": "yarn build:site && gh-pages -d site-dist --add --dest v3",
    "test:watch": "vant-cli test --watch",
    "test:coverage": "open test/coverage/index.html"
  },
-  "lint-staged": {
-    "*.md": "prettier --write",
-    "*.{ts,tsx,js,vue,less}": "prettier --write",
-    "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,less}": "stylelint --fix"
-  },
  "npm": {
    "tag": "next"
  },
@ -59,10 +53,10 @@
    "vue": "^3.0.0"
  },
  "devDependencies": {
-    "@vant/cli": "^4.0.0-beta.1",
    "@vant/area-data": "^1.1.1",
-    "@vue/compiler-sfc": "^3.2.6",
-    "vue": "^3.2.6"
+    "@vant/cli": "^4.0.0-beta.5",
+    "@vue/compiler-sfc": "3.2.8",
+    "vue": "3.2.8"
  },
  "sideEffects": [
    "es/**/style/*",
--- a/packages/vant/src/action-bar/demo/index.vue
+++ b/packages/vant/src/action-bar/demo/index.vue
@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { useTranslate } from '@demo/use-translate';
+import VanActionBar from '..';
+import VanActionBarIcon from '../../action-bar-icon';
+import VanActionBarButton from '../../action-bar-button';
+import { useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';

 const t = useTranslate({
--- a/packages/vant/src/action-sheet/demo/index.vue
+++ b/packages/vant/src/action-sheet/demo/index.vue
@ -1,7 +1,8 @@
 <script setup lang="ts">
+import VanCell from '../../cell';
+import VanActionSheet, { ActionSheetAction } from '..';
 import { ref, computed } from 'vue';
-import { useTranslate } from '@demo/use-translate';
-import { ActionSheetAction } from '..';
+import { useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';

 const t = useTranslate({
--- a/packages/vant/src/address-edit/demo/index.vue
+++ b/packages/vant/src/address-edit/demo/index.vue
@ -1,7 +1,8 @@
 <script setup lang="ts">
+import VanAddressEdit from '..';
 import { ref } from 'vue';
 import { areaList } from '@vant/area-data';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';

 const t = useTranslate({
--- a/packages/vant/src/address-list/demo/index.vue
+++ b/packages/vant/src/address-list/demo/index.vue
@ -1,6 +1,7 @@
 <script setup lang="ts">
+import VanAddressList from '..';
 import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';

 const t = useTranslate({
--- a/packages/vant/src/area/demo/index.vue
+++ b/packages/vant/src/area/demo/index.vue
@ -1,8 +1,9 @@
 <script setup lang="ts">
+import VanArea from '..';
 import { ref } from 'vue';
 import { areaList } from '@vant/area-data';
 import { areaListEn } from './area-en';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/badge/demo/index.vue
+++ b/packages/vant/src/badge/demo/index.vue
@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { useTranslate } from '@demo/use-translate';
+import VanBadge from '..';
+import VanIcon from '../../icon';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/button/demo/index.vue
+++ b/packages/vant/src/button/demo/index.vue
@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { useTranslate } from '@demo/use-translate';
+import VanButton from '..';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/calendar/demo/TiledDisplay.vue
+++ b/packages/vant/src/calendar/demo/TiledDisplay.vue
@ -1,5 +1,6 @@
 <script setup>
-import { useTranslate } from '@demo/use-translate';
+import VanCalendar from '..';
+import { useTranslate } from '../../../docs/site/use-translate';

 const minDate = new Date(2012, 0, 10);
 const maxDate = new Date(2012, 2, 20);
--- a/packages/vant/src/calendar/demo/index.vue
+++ b/packages/vant/src/calendar/demo/index.vue
@ -1,6 +1,8 @@
 <script setup lang="ts">
+import VanCell from '../../cell';
+import VanCalendar from '..';
 import { reactive } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';
 import TiledDisplay from './TiledDisplay.vue';
 import type { CalendarDayItem } from '../types';

--- a/packages/vant/src/card/demo/index.vue
+++ b/packages/vant/src/card/demo/index.vue
@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { useTranslate } from '@demo/use-translate';
+import VanCard from '..';
+import VanTag from '../../tag';
+import VanButton from '../../button';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/cascader/demo/index.vue
+++ b/packages/vant/src/cascader/demo/index.vue
@ -1,7 +1,9 @@
 <script setup lang="ts">
+import VanField from '../../field';
+import VanPopup from '../../popup';
+import VanCascader, { CascaderOption } from '..';
 import { computed, reactive } from 'vue';
-import { CascaderOption } from '..';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';
 import { deepClone } from '../../utils/deep-clone';
 import zhCNOptions from './area-zh-CN';
 import enUSOptions from './area-en-US';
--- a/packages/vant/src/cell/demo/index.vue
+++ b/packages/vant/src/cell/demo/index.vue
@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { useTranslate } from '@demo/use-translate';
+import VanCellGroup from '../../cell-group';
+import VanCell from '..';
+import VanTag from '../../tag';
+import VanIcon from '../../icon';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/checkbox/demo/index.vue
+++ b/packages/vant/src/checkbox/demo/index.vue
@ -1,6 +1,11 @@
 <script setup lang="ts">
+import VanCheckbox from '..';
+import VanCheckboxGroup from '../../checkbox-group';
+import VanButton from '../../button';
+import VanCellGroup from '../../cell-group';
+import VanCell from '../../cell';
 import { ref, reactive } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';
 import { useRefs } from '../../composables/use-refs';
 import type { CheckboxInstance } from '../types';
 import type { CheckboxGroupInstance } from '../../checkbox-group';
--- a/packages/vant/src/circle/demo/index.vue
+++ b/packages/vant/src/circle/demo/index.vue
@ -1,6 +1,8 @@
 <script setup lang="ts">
+import VanCircle from '..';
+import VanButton from '../../button';
 import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/col/demo/index.vue
+++ b/packages/vant/src/col/demo/index.vue
@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { useTranslate } from '@demo/use-translate';
+import VanRow from '../../row';
+import VanCol from '..';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/collapse/demo/index.vue
+++ b/packages/vant/src/collapse/demo/index.vue
@ -1,6 +1,9 @@
 <script setup lang="ts">
+import VanCollapse from '..';
+import VanCollapseItem from '../../collapse-item';
+import VanIcon from '../../icon';
 import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/config-provider/demo/index.vue
+++ b/packages/vant/src/config-provider/demo/index.vue
@ -1,6 +1,12 @@
 <script setup lang="ts">
+import VanForm from '../../form';
+import VanField from '../../field';
+import VanRate from '../../rate';
+import VanSlider from '../../slider';
+import VanButton from '../../button';
+import VanConfigProvider from '..';
 import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/contact-card/demo/index.vue
+++ b/packages/vant/src/contact-card/demo/index.vue
@ -1,6 +1,7 @@
 <script setup lang="ts">
+import VanContactCard from '..';
 import { computed } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';

 const t = useTranslate({
--- a/packages/vant/src/contact-edit/demo/index.vue
+++ b/packages/vant/src/contact-edit/demo/index.vue
@ -1,6 +1,7 @@
 <script setup lang="ts">
+import VanContactEdit from '..';
 import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';

 const t = useTranslate({
--- a/packages/vant/src/contact-list/demo/index.vue
+++ b/packages/vant/src/contact-list/demo/index.vue
@ -1,6 +1,7 @@
 <script setup lang="ts">
+import VanContactList from '..';
 import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';

 const t = useTranslate({
--- a/packages/vant/src/count-down/demo/index.vue
+++ b/packages/vant/src/count-down/demo/index.vue
@ -1,6 +1,9 @@
 <script setup lang="ts">
+import VanCountDown from '..';
+import VanGrid from '../../grid';
+import VanGridItem from '../../grid-item';
 import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';
 import { Toast } from '../../toast';
 import type { CountDownInstance } from '../CountDown';

--- a/packages/vant/src/coupon-list/demo/index.vue
+++ b/packages/vant/src/coupon-list/demo/index.vue
@ -1,6 +1,9 @@
 <script setup lang="ts">
+import VanCouponCell from '../../coupon-cell';
+import VanPopup from '../../popup';
+import VanCouponList from '..';
 import { ref, computed } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';
 import { CouponInfo } from '../../coupon';
 import { Toast } from '../../toast';

--- a/packages/vant/src/datetime-picker/demo/index.vue
+++ b/packages/vant/src/datetime-picker/demo/index.vue
@ -1,6 +1,7 @@
 <script setup lang="ts">
+import VanDatetimePicker from '..';
 import { reactive } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/dialog/demo/index.vue
+++ b/packages/vant/src/dialog/demo/index.vue
@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import VanCell from '../../cell';
 import { Dialog } from '..';
+import { ref } from 'vue';
+import { useTranslate } from '../../../docs/site/use-translate';
 import type { DialogAction } from '../Dialog';

+const VanDialog = Dialog.Component;
+
 const t = useTranslate({
  'zh-CN': {
    title: '标题',
--- a/packages/vant/src/divider/demo/index.vue
+++ b/packages/vant/src/divider/demo/index.vue
@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { useTranslate } from '@demo/use-translate';
+import VanDivider from '..';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/dropdown-menu/demo/index.vue
+++ b/packages/vant/src/dropdown-menu/demo/index.vue
@ -1,6 +1,11 @@
 <script setup lang="ts">
+import VanDropdownMenu from '..';
+import VanDropdownItem from '../../dropdown-item';
+import VanCell from '../../cell';
+import VanSwitch from '../../switch';
+import VanButton from '../../button';
 import { computed, ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';
 import type { DropdownItemInstance } from '../../dropdown-item';

 const t = useTranslate({
--- a/packages/vant/src/empty/demo/index.vue
+++ b/packages/vant/src/empty/demo/index.vue
@ -1,6 +1,10 @@
 <script setup lang="ts">
+import VanEmpty from '..';
+import VanTabs from '../../tabs';
+import VanTab from '../../tab';
+import VanButton from '../../button';
 import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/field/demo/Autosize.vue
+++ b/packages/vant/src/field/demo/Autosize.vue
@ -1,6 +1,8 @@
 <script setup lang="ts">
+import VanField from '..';
+import VanCellGroup from '../../cell-group';
 import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/field/demo/BasicUsage.vue
+++ b/packages/vant/src/field/demo/BasicUsage.vue
@ -1,6 +1,8 @@
 <script setup lang="ts">
+import VanField from '..';
+import VanCellGroup from '../../cell-group';
 import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/field/demo/CustomType.vue
+++ b/packages/vant/src/field/demo/CustomType.vue
@ -1,6 +1,8 @@
 <script setup lang="ts">
+import VanField from '..';
+import VanCellGroup from '../../cell-group';
 import { ref } from 'vue';
-import { useTranslate } from '@demo/use-translate';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/packages/vant/src/field/demo/Disabled.vue
+++ b/packages/vant/src/field/demo/Disabled.vue
@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { useTranslate } from '@demo/use-translate';
+import VanField from '..';
+import VanCellGroup from '../../cell-group';
+import { useTranslate } from '../../../docs/site/use-translate';

 const t = useTranslate({
  'zh-CN': {
--- a/Show More
+++ b/Show More