chore: update branches in GitHub actions

For example, when calling `get({}, 'button.small')`, it expects to return an empty string, but return a function (`''.small` is a native function, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/small).

.gitee/ISSUE_TEMPLATE.zh-CN.md

@@ -2,4 +2,4 @@
 
 请移步 GitHub issues 进行反馈：
 
-https://github.com/youzan/vant/issues
+https://github.com/vant-ui/vant/issues

.github/CONTRIBUTING.md

@@ -29,7 +29,7 @@ It's welcomed to pull request, And there are some tips about that:
 You will need [Node.js >= 14](https://nodejs.org) and [pnpm](https://pnpm.io).
 
 ```bash
-git clone git@github.com:youzan/vant.git
+git clone git@github.com:vant-ui/vant.git
 
 # Install dependencies
 pnpm i

.github/ISSUE_TEMPLATE/template-1-bug-report-vant.zh-CN.yml

@@ -9,8 +9,8 @@ body:
         在提交 Bug 报告前，请注意：
 
         - 确认你的问题无法通过官方文档得到解决。
-        - 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues)，并且没有发现同样的问题。
-        - 如果不是反馈 Bug，请到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖。
+        - 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues)，并且没有发现同样的问题。
+        - 如果不是反馈 Bug，请到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖。
 
   - type: input
     id: reproduce

.github/ISSUE_TEMPLATE/template-2-bug-report-vant-cli.zh-CN.yml

@@ -9,8 +9,8 @@ body:
         在提交 Bug 报告前，请注意：
 
         - 确认你的问题无法通过官方文档得到解决。
-        - 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues)，并且没有发现同样的问题。
-        - 如果不是反馈 Bug，请到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖。
+        - 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues)，并且没有发现同样的问题。
+        - 如果不是反馈 Bug，请到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖。
 
   - type: input
     id: reproduce

.github/ISSUE_TEMPLATE/template-3-feature-request-vant.zh-CN.yml

@@ -9,8 +9,8 @@ body:
         在提交功能需求前，请注意：
 
         - 确认这是一个通用功能，并且无法通过现有的 API 或 Slot 实现。
-        - 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues)，并且没有发现同样的需求。
-        - 可以先到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖，讨论一下需求是否合理。
+        - 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues)，并且没有发现同样的需求。
+        - 可以先到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖，讨论一下需求是否合理。
 
   - type: textarea
     id: description

.github/ISSUE_TEMPLATE/template-4-feature-request-vant-cli.zh-CN.yml

@@ -9,8 +9,8 @@ body:
         在提交功能需求前，请注意：
 
         - 确认这是一个通用功能，并且无法通过现有的 API 实现。
-        - 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues)，并且没有发现同样的需求。
-        - 可以先到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖，讨论一下需求是否合理。
+        - 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues)，并且没有发现同样的需求。
+        - 可以先到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖，讨论一下需求是否合理。
 
   - type: textarea
     id: description

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 ### Before submitting a pull request, please make sure the following is done:
 
-1. Read the [contributing guide](https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.md).
+1. Read the [contributing guide](https://github.com/vant-ui/vant/blob/dev/.github/CONTRIBUTING.md).
 2. If you've added code that should be tested, add tests.
 3. If you've changed APIs, update the documentation.
 4. Ensure the test suite passes (`npm test`).

.github/workflows/deploy-v4-site.yml

@@ -1,4 +1,4 @@
-name: Deploy V3 Site
+name: Deploy V4 Site
 
 on:
   push:
@@ -15,7 +15,7 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/checkout@v2
         with:
-          ref: 'dev'
+          ref: 'next'
 
       - name: Install pnpm
         run: npm i pnpm@7 -g
@@ -36,4 +36,5 @@ jobs:
         with:
           branch: gh-pages
           folder: packages/vant/site-dist
+          target-folder: v4
           clean: false

.github/workflows/release-tag.yml

@@ -20,6 +20,6 @@ jobs:
         with:
           tag_name: ${{ github.ref }}
           body: |
-            更新内容参见 [CHANGELOG](https://youzan.github.io/vant/#/zh-CN/changelog)。
+            更新内容参见 [CHANGELOG](https://vant-ui.github.io/vant/#/zh-CN/changelog)。
 
-            Please refer to [CHANGELOG](https://youzan.github.io/vant/#/en-US/changelog) for details.
+            Please refer to [CHANGELOG](https://vant-ui.github.io/vant/#/en-US/changelog) for details.

.github/workflows/sync-gitee.yml

@@ -2,7 +2,9 @@ name: Sync to Gitee
 
 on:
   push:
-    branches: [dev, 2.x, gh-pages]
+    branches: [dev, 2.x, 3.x, gh-pages]
+
+  workflow_dispatch:
 
 jobs:
   build:
@@ -15,6 +17,6 @@ jobs:
           SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
         with:
           # GitHub 源仓库地址
-          source-repo: git@github.com:youzan/vant.git
+          source-repo: git@github.com:vant-ui/vant.git
           # Gitee 目标仓库地址
           destination-repo: git@gitee.com:vant-contrib/vant.git

.github/workflows/test.yml

@@ -1,6 +1,15 @@
 name: CI
 
-on: [push]
+on:
+  push:
+    branches:
+      - '**'
+
+  pull_request:
+    branches:
+      - dev
+
+  workflow_dispatch:
 
 jobs:
   lint:

.gitignore

@@ -15,6 +15,5 @@ package-lock.json
 es
 lib
 dist
-vetur
 **/site-dist
 changelog.generated.md

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install lint-staged
+npx --no-install nano-staged

.npmrc

@@ -1 +1,3 @@
 registry=https://registry.npmmirror.com/
+
+strict-peer-dependencies=false

.stylelintrc

@@ -1,3 +0,0 @@
-{
-  "extends": ["@vant/stylelint-config"]
-}

LICENSE

@@ -1,4 +1,7 @@
-Copyright 2016-present Youzan
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -4,21 +4,20 @@
 
 <h1 align="center">Vant</h1>
 
-<p align="center">Mobile UI Components built on Vue</p>
+<p align="center">Lightweight Mobile UI Components built on Vue</p>
 
 <p align="center">
     <img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
-    <img src="https://img.shields.io/github/workflow/status/youzan/vant/CI/dev?style=flat-square" alt="CI Status" />
-    <img src="https://img.shields.io/codecov/c/github/youzan/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
+    <img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
+    <img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
     <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
-    <img src="https://img.shields.io/jsdelivr/npm/hm/vant?style=flat-square" alt="Jsdelivr Hits">
     <img src="https://img.badgesize.io/https://unpkg.com/vant@3/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
 </p>
 
 <p align="center">
   🔥 <a href="https://vant-contrib.gitee.io/vant">文档网站（国内）</a>
   &nbsp;
-  🌈 <a href="https://youzan.github.io/vant">文档网站（GitHub）</a>
+  🌈 <a href="https://vant-ui.github.io/vant">文档网站（GitHub）</a>
   &nbsp;
   🇨🇳 <a href="./README.zh-CN.md">中文版介绍</a>
 </p>
@@ -29,6 +28,7 @@
 
 - 🚀 1KB Component average size (min+gzip)
 - 🚀 70+ High quality components
+- 🚀 Zero third-party dependencies
 - 💪 90%+ Unit test coverage
 - 💪 Written in TypeScript
 - 📖 Extensive documentation and demos
@@ -67,14 +67,18 @@ pnpm add vant
 
 ```js
 import { createApp } from 'vue';
+// 1. Import the components you need
 import { Button } from 'vant';
+// 2. Import the components style
 import 'vant/lib/index.css';
 
 const app = createApp();
+
+// 3. Register the components you need
 app.use(Button);
 ```
 
-See more in [Quickstart](https://youzan.github.io/vant#/en-US/quickstart).
+See more in [Quickstart](https://vant-ui.github.io/vant#/en-US/quickstart).
 
 ## Browser Support
 
@@ -86,11 +90,11 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
 
 | Project | Description |
 | --- | --- |
-| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
+| [vant-weapp](https://github.com/vant-ui/vant-weapp) | WeChat MiniProgram UI |
 | [vant-demo](https://github.com/vant-ui/vant-demo) | Collection of Vant demos |
-| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
-| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons |
-| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
+| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
+| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant icons |
+| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
 
 ## Community Ecosystem
 
@@ -106,8 +110,8 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
 
 ## Links
 
-- [Documentation](https://youzan.github.io/vant)
-- [Changelog](https://youzan.github.io/vant#/en-US/changelog)
+- [Documentation](https://vant-ui.github.io/vant)
+- [Changelog](https://vant-ui.github.io/vant#/en-US/changelog)
 - [Gitter](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
 
 ## Preview
@@ -128,7 +132,7 @@ Core contributors of Vant and Vant Weapp:
 
 Thanks to the following friends for their contributions to Vant:
 
-<a href="https://github.com/youzan/vant/graphs/contributors">
+<a href="https://github.com/vant-ui/vant/graphs/contributors">
   <img src="https://opencollective.com/vant/contributors.svg?width=890&button=false" alt="contributors">
 </a>
 

README.zh-CN.md

@@ -8,17 +8,16 @@
 
 <p align="center">
     <img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
-    <img src="https://img.shields.io/github/workflow/status/youzan/vant/CI/dev?style=flat-square" alt="CI Status" />
-    <img src="https://img.shields.io/codecov/c/github/youzan/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
+    <img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
+    <img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
     <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
-    <img src="https://img.shields.io/jsdelivr/npm/hm/vant?style=flat-square" alt="Jsdelivr Hits">
     <img src="https://img.badgesize.io/https://unpkg.com/vant@3/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
 </p>
 
 <p align="center">
   🔥 <a href="https://vant-contrib.gitee.io/vant">文档网站（国内）</a>
   &nbsp;
-  🌈 <a href="https://youzan.github.io/vant">文档网站（GitHub）</a>
+  🌈 <a href="https://vant-ui.github.io/vant">文档网站（GitHub）</a>
 </p>
 
 ---
@@ -33,6 +32,7 @@ Vant 是一个**轻量、可靠的移动端组件库**，于 2017 年开源。
 
 - 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
 - 🚀 70+ 个高质量组件，覆盖移动端主流场景
+- 🚀 零外部依赖，不依赖三方 npm 包
 - 💪 使用 TypeScript 编写，提供完整的类型定义
 - 💪 单元测试覆盖率超过 90%，提供稳定性保障
 - 📖 提供丰富的中英文文档和组件示例
@@ -71,10 +71,14 @@ pnpm add vant
 
 ```js
 import { createApp } from 'vue';
+// 1. 引入你需要的组件
 import { Button } from 'vant';
+// 2. 引入组件样式
 import 'vant/lib/index.css';
 
 const app = createApp();
+
+// 3. 注册你需要的组件
 app.use(Button);
 ```
 
@@ -92,11 +96,11 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 
 | 项目 | 描述 |
 | --- | --- |
-| [vant-weapp](https://github.com/youzan/vant-weapp) | Vant 微信小程序版 |
+| [vant-weapp](https://github.com/vant-ui/vant-weapp) | Vant 微信小程序版 |
 | [vant-demo](https://github.com/vant-ui/vant-demo) | Vant 官方示例合集 |
-| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
-| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
-| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
+| [vant-cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
+| [vant-icons](https://github.com/vant-ui/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
+| [vant-touch-emulator](https://github.com/vant-ui/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
 
 ## 社区生态
 
@@ -136,7 +140,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 
 感谢以下小伙伴们为 Vant 发展做出的贡献：
 
-<a href="https://github.com/youzan/vant/graphs/contributors">
+<a href="https://github.com/vant-ui/vant/graphs/contributors">
   <img src="https://opencollective.com/vant/contributors.svg?width=890&button=false" alt="contributors">
 </a>
 
@@ -144,7 +148,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
 
 修改代码请阅读我们的 [贡献指南](https://vant-contrib.gitee.io/vant/#/zh-CN/contribution)。
 
-使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
+使用过程中发现任何问题都可以提 [Issue](https://github.com/vant-ui/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/vant-ui/vant/pulls)。
 
 ## 开源协议
 

package.json

@@ -9,22 +9,29 @@
     "build": "pnpm --dir ./packages/vant build",
     "build:site": "pnpm --dir ./packages/vant build:site"
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less}": "prettier --write",
-    "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,less}": "stylelint --fix"
+    "*.{ts,tsx,js,vue}": "eslint --fix"
   },
-  "packageManager": "pnpm@7.1.6",
+  "packageManager": "pnpm@7.11.0",
   "devDependencies": {
     "@vant/cli": "workspace:*",
     "@vant/eslint-config": "workspace:*",
-    "@vant/stylelint-config": "workspace:*",
-    "eslint": "^8.2.0",
+    "eslint": "^8.23.0",
     "husky": "^8.0.1",
-    "lint-staged": "^12.1.2",
-    "prettier": "^2.5.0",
-    "rimraf": "^3.0.2",
-    "stylelint": "^13.13.1"
+    "nano-staged": "^0.8.0",
+    "prettier": "^2.7.1",
+    "rimraf": "^3.0.2"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "@algolia/client-search",
+        "@types/react",
+        "react",
+        "react-dom"
+      ]
+    }
   }
 }

packages/create-vant-cli-app/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/create-vant-cli-app/generators/vue2/package.json.tpl

@@ -15,18 +15,17 @@
     "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-dist"
+    "build-site": "vant-cli build-site && npx gh-pages -d site-dist"
   },
   "author": "",
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged",
+      "pre-commit": "nano-staged",
       "commit-msg": "vant-cli commit-lint"
     }
   },
-  "lint-staged": {
-    "*.{ts,tsx,js,jsx,vue}": "eslint --fix",
-    "*.{vue,css,less,scss}": "stylelint --fix"
+  "nano-staged": {
+    "*.{ts,tsx,js,jsx,vue}": "eslint --fix"
   },
   "peerDependencies": {
     "vue": "^2.6.11",
@@ -34,7 +33,6 @@
   },
   "devDependencies": {
     "@vant/cli": "^2.0.0",
-    "babel-plugin-import": "^1.13.0",
     "vue": "^2.6.11",
     "vue-template-compiler": "^2.6.11"
   },
@@ -44,11 +42,6 @@
       "@vant"
     ]
   },
-  "stylelint": {
-    "extends": [
-      "@vant/stylelint-config"
-    ]
-  },
   "prettier": {
     "singleQuote": true
   },

packages/create-vant-cli-app/generators/vue3/.gitignore.tpl

@@ -15,6 +15,5 @@ test/coverage
 es
 lib
 dist
-vetur
 site
 changelog.generated.md

packages/create-vant-cli-app/generators/vue3/.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install lint-staged
+npx --no-install nano-staged

packages/create-vant-cli-app/generators/vue3/package.json.tpl

@@ -17,16 +17,15 @@
     "build": "vant-cli build",
     "build:site": "vant-cli build-site",
     "release": "vant-cli release --tag next",
-    "release:site": "pnpm build:site && gh-pages -d site-dist",
+    "release:site": "pnpm build:site && npx gh-pages -d site-dist",
     "test:watch": "vant-cli test --watch",
     "test:coverage": "open test/coverage/index.html"
   },
   "author": "",
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less,scss}": "prettier --write",
-    "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,less,scss}": "stylelint --fix"
+    "*.{ts,tsx,js,vue}": "eslint --fix"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
@@ -42,11 +41,6 @@
       "@vant"
     ]
   },
-  "stylelint": {
-    "extends": [
-      "@vant/stylelint-config"
-    ]
-  },
   "prettier": {
     "singleQuote": true
   },

packages/create-vant-cli-app/generators/vue3/src/demo-button/demo/index.vue

@@ -7,3 +7,7 @@
     <demo-button color="#03a9f4" style="margin-left: 15px">按钮</demo-button>
   </demo-block>
 </template>
+
+<script setup>
+import DemoButton from '../index.vue';
+</script>

packages/create-vant-cli-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vant-cli-app",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Create Vant CLI App",
   "main": "lib/index.js",
   "bin": {
@@ -24,24 +24,24 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/youzan/vant.git",
+    "url": "https://github.com/vant-ui/vant.git",
     "directory": "packages/create-vant-cli-app"
   },
-  "bugs": "https://github.com/youzan/vant/issues",
+  "bugs": "https://github.com/vant-ui/vant/issues",
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
-    "@types/inquirer": "^8.1.3",
-    "release-it": "^14.11.6",
-    "typescript": "~4.5.2"
+    "@types/inquirer": "^8.2.3",
+    "release-it": "^15.4.1",
+    "typescript": "^4.8.2"
   },
   "dependencies": {
-    "chalk": "^4.1.2",
     "consola": "^2.11.3",
-    "fast-glob": "^3.2.4",
-    "fs-extra": "^10.0.0",
-    "inquirer": "^8.0.0"
+    "fast-glob": "^3.2.11",
+    "fs-extra": "^10.1.0",
+    "inquirer": "^8.2.4",
+    "picocolors": "^1.0.0"
   },
   "release-it": {
     "git": {

packages/create-vant-cli-app/src/generator.ts

@@ -1,6 +1,6 @@
 import fs from 'fs-extra';
 import glob from 'fast-glob';
-import chalk from 'chalk';
+import color from 'picocolors';
 import consola from 'consola';
 import { prompt } from 'inquirer';
 import { sep, join } from 'path';
@@ -64,7 +64,7 @@ export class VanGenerator {
 
   writing() {
     console.log();
-    consola.info(`Creating project in ${chalk.green(this.outputDir)}\n`);
+    consola.info(`Creating project in ${color.green(this.outputDir)}\n`);
 
     // see https://github.com/mrmlnc/fast-glob#how-to-write-patterns-on-windows
     const templatePath = join(GENERATOR_DIR, this.inputs.vueVersion).replace(
@@ -99,16 +99,16 @@ export class VanGenerator {
     fs.writeFileSync(to, content);
 
     const name = to.replace(this.outputDir + sep, '');
-    consola.success(`${chalk.green('create')} ${name}`);
+    consola.success(`${color.green('create')} ${name}`);
   }
 
   end() {
     const { name } = this.inputs;
 
     console.log();
-    consola.success(`Successfully created ${chalk.yellow(name)}.`);
+    consola.success(`Successfully created ${color.yellow(name)}.`);
     consola.success(
-      `Run ${chalk.yellow(
+      `Run ${color.yellow(
         `cd ${name} && git init && yarn && yarn dev`
       )} to start development!`
     );

packages/vant-area-data/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-area-data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/area-data",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Vant 省市区数据",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
@@ -29,16 +29,16 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/youzan/vant.git",
+    "url": "https://github.com/vant-ui/vant.git",
     "directory": "packages/vant-area-data"
   },
-  "bugs": "https://github.com/youzan/vant/issues",
+  "bugs": "https://github.com/vant-ui/vant/issues",
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
-    "esbuild": "^0.14.29",
-    "release-it": "^14.2.2",
-    "typescript": "~4.5.2"
+    "esbuild": "^0.14.54",
+    "release-it": "^15.4.1",
+    "typescript": "^4.8.2"
   },
   "release-it": {
     "git": {

packages/vant-area-data/src/index.ts

@@ -1150,10 +1150,10 @@ export const areaList = {
     232701: '漠河市',
     232721: '呼玛县',
     232722: '塔河县',
-    232790: '松岭区',
-    232791: '呼中区',
-    232792: '加格达奇区',
-    232793: '新林区',
+    232761: '加格达奇区',
+    232762: '松岭区',
+    232763: '新林区',
+    232764: '呼中区',
     310101: '黄浦区',
     310104: '徐汇区',
     310105: '长宁区',

packages/vant-cli/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-cli/README.md

@@ -10,7 +10,7 @@ Vant CLI is a tool for building vue component library. You can quickly build a f
 
 - Provides rich commands covering the complete process from development to deploy
 - Based on conventional directory structure. Generate elegant document website and component examples automatically.
-- ESlint Stylelint built-in.
+- ESlint built-in.
 - Support Tree Shaking/Theme Customization/Import on Demand
 
 ### Quickstart
@@ -47,19 +47,15 @@ Please add the followed config to `package.json` file.
     "release": "vant-cli release",
     "build-site": "vant-cli build-site"
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less,scss}": "prettier --write",
-    "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,less,scss}": "stylelint --fix"
+    "*.{ts,tsx,js,vue}": "eslint --fix"
   },
   "eslintConfig": {
     "root": true,
     "extends": ["@vant"]
   },
-  "stylelint": {
-    "extends": ["@vant/stylelint-config"]
-  },
   "prettier": {
     "singleQuote": true
   },
@@ -69,7 +65,7 @@ Please add the followed config to `package.json` file.
 
 ## More Details
 
-- [cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/commands.md)
-- [config](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.md)
-- [directory structure](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)
-- [CHANGELOG](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md)
+- [cli](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/commands.md)
+- [config](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/config.md)
+- [directory structure](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.md)
+- [CHANGELOG](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)

packages/vant-cli/README.zh-CN.md

@@ -1,12 +1,13 @@
 # Vant CLI
 
-Vant CLI 是一个 Vue 组件库构建工具，通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。
+Vant CLI 是一个基于 Vite 实现的 Vue 组件库构建工具，通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。
 
 ### 特性
 
+- 基于 Vite 实现，享受愉悦的开发体验
 - 提供丰富的命令，涵盖从开发测试到构建发布的完整流程
 - 基于约定的目录结构，自动生成优雅的文档站点和组件示例
-- 内置 ESLint、Stylelint 校验规则，提交代码时自动执行校验
+- 内置 ESLint 校验规则，提交代码时自动执行校验
 - 构建后的组件库默认支持按需引入、主题定制、Tree Shaking
 
 ### 快速上手
@@ -43,19 +44,15 @@ pnpm add @vant/cli -D
     "release": "vant-cli release",
     "build-site": "vant-cli build-site"
   },
-  "lint-staged": {
+  "nano-staged": {
     "*.md": "prettier --write",
     "*.{ts,tsx,js,vue,less,scss}": "prettier --write",
-    "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,less,scss}": "stylelint --fix"
+    "*.{ts,tsx,js,vue}": "eslint --fix"
   },
   "eslintConfig": {
     "root": true,
     "extends": ["@vant"]
   },
-  "stylelint": {
-    "extends": ["@vant/stylelint-config"]
-  },
   "prettier": {
     "singleQuote": true
   },
@@ -65,7 +62,7 @@ pnpm add @vant/cli -D
 
 ## 详细文档
 
-- [命令](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/commands.zh-CN.md)
-- [配置指南](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.zh-CN.md)
-- [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)
-- [更新日志](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md)
+- [命令](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/commands.zh-CN.md)
+- [配置指南](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/config.zh-CN.md)
+- [目录结构](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)
+- [更新日志](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/changelog.md)

packages/vant-cli/changelog.md

@@ -1,5 +1,52 @@
 # 更新日志
 
+## v5.0.0 (未发布)
+
+### 依赖升级
+
+对以下依赖进行了大版本升级：
+
+- vite v3
+- @vitejs/plugin-vue v3
+- @vitejs/plugin-vue-jsx v2
+
+### 依赖精简
+
+- 不再默认安装 `gh-pages` 依赖，请按照如下方式更新 `package.json`：
+
+```diff
+- "release:site": "pnpm build:site && gh-pages -d site-dist",
++ "release:site": "pnpm build:site && npx gh-pages -d site-dist",
+```
+
+- 不再默认内置 `stylelint`，需要的话可以自行安装：
+
+```bash
+yarn add stylelint@13 @vant/stylelint-config
+```
+
+### 移除 vetur 相关配置
+
+由于 Vue 3 推荐使用 volar 而不是 vetur，因此移除了 vetur 相关的配置文件。
+
+现在会默认生成 WebStorm 所需的 web-types.json 文件到 `lib/web-types.json` 目录下。
+
+## v4.0.4
+
+`2022-07-02`
+
+- 修复构建 sfc 文件的类型定义时报错的问题
+
+## v4.0.3
+
+`2022-07-02`
+
+- 新增 `build.bundleOptions` 配置项
+- 新增 `css.removeSourceFile` 配置项
+- 修复编译后的 script setup 中，引用的组件不生效的问题
+- 移除未使用的 esm bundle
+- 移除未使用的 ssr.js 文件
+
 ## v4.0.2
 
 `2022-05-14`
@@ -396,15 +443,15 @@ yarn add sass
 
 `2020-03-29`
 
-- 优化网站导航栏在大屏上的适配 ([#5928](https://github.com/youzan/vant/pull/5928))
+- 优化网站导航栏在大屏上的适配 ([#5928](https://github.com/vant-ui/vant/pull/5928))
 
 ### v2.3.0
 
 `2020-03-25`
 
-- build 命令支持编译 scoped 样式 ([#5910](https://github.com/youzan/vant/pull/5910))
-- build 命令支持生成 WebStorm 组件定义文件 ([#5899](https://github.com/youzan/vant/issues/5899))
-- clean 命令现在会移除而不是清空文件夹 ([#5895](https://github.com/youzan/vant/issues/5895))
+- build 命令支持编译 scoped 样式 ([#5910](https://github.com/vant-ui/vant/pull/5910))
+- build 命令支持生成 WebStorm 组件定义文件 ([#5899](https://github.com/vant-ui/vant/issues/5899))
+- clean 命令现在会移除而不是清空文件夹 ([#5895](https://github.com/vant-ui/vant/issues/5895))
 - 升级 @vant/markdown-vetur 2.0.0
 
 ### v2.2.8
@@ -438,7 +485,7 @@ yarn add sass
 
 `2020-02-14`
 
-- 修复在 windows 上构建出的样式入口文件路径错误的问题 ([#5655](https://github.com/youzan/vant/pull/5655)
+- 修复在 windows 上构建出的样式入口文件路径错误的问题 ([#5655](https://github.com/vant-ui/vant/pull/5655)
 
 ### v2.2.3
 
@@ -450,14 +497,14 @@ yarn add sass
 
 `2020-02-05`
 
-- 修复在 windows 上获取 markdown 路径错误的问题 ([#5626](https://github.com/youzan/vant/pull/5626))
+- 修复在 windows 上获取 markdown 路径错误的问题 ([#5626](https://github.com/vant-ui/vant/pull/5626))
 
 ### v2.2.1
 
 `2020-02-04`
 
 - 升级 babel@7.8
-- 修复切换版本时跳转 undefined 的问题 ([#5620](https://github.com/youzan/vant/pull/5620))
+- 修复切换版本时跳转 undefined 的问题 ([#5620](https://github.com/vant-ui/vant/pull/5620))
 
 ### v2.2.0
 

packages/vant-cli/docs/commands.md

@@ -29,7 +29,7 @@ Start local dev server for browsering components and demo.
 
 Build Vue component library.
 
-Files will be output to `es` and `lib` directory. More details [directory structure](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)
+Files will be output to `es` and `lib` directory. More details [directory structure](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.md)
 
 Please add the followed config to `package.json` when publish to npm.
 

packages/vant-cli/docs/commands.zh-CN.md

@@ -31,7 +31,7 @@ npx vant-cli dev
 
 构建组件库。
 
-运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，详见 [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)。
+运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，详见 [目录结构](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)。
 
 发布 npm 时，请将以下配置加入到 `package.json` 中，使 npm 包能被正确识别:
 

packages/vant-cli/docs/config.md

@@ -103,7 +103,7 @@ module.exports = {
 - Type: `string`
 - Default: `'less'`
 
-CSS preprocess Config, support `less` and `sass`. Use `less` by default.
+CSS preprocessor config, support `less` and `sass`. Use `less` by default.
 
 ```js
 module.exports = {
@@ -115,6 +115,23 @@ module.exports = {
 };
 ```
 
+### build.css.removeSourceFile
+
+- Type: `boolean`
+- Default: `'false'`
+
+Whether to remove the source style files after build.
+
+```js
+module.exports = {
+  build: {
+    css: {
+      removeSourceFile: true,
+    },
+  },
+};
+```
+
 ### build.site.publicPath
 
 - Type: `string`
@@ -204,6 +221,45 @@ module.exports = {
 
 `npm` package manager.
 
+### build.bundleOptions
+
+- Type: `BundleOptions[]`
+
+Specify the format of the bundled output.
+
+The type of `BundleOptions`:
+
+```ts
+type BundleOption = {
+  // Whether to minify code (Tips: es format output can't be minified by vite)
+  minify?: boolean;
+  // Formats, can be set to 'es' | 'cjs' | 'umd' | 'iife'
+  formats: LibraryFormats[];
+  // Dependencies to external (Vue is externaled by default)
+  external?: string[];
+};
+```
+
+Default value：
+
+```ts
+const DEFAULT_OPTIONS: BundleOption[] = [
+  {
+    minify: false,
+    formats: ['umd'],
+  },
+  {
+    minify: true,
+    formats: ['umd'],
+  },
+  {
+    minify: false,
+    formats: ['es', 'cjs'],
+    external: allDependencies,
+  },
+];
+```
+
 ### site.title
 
 - Type: `string`
@@ -269,7 +325,7 @@ module.exports = {
     versions: [
       {
         label: 'v1',
-        link: 'https://youzan.github.io/vant/v1/',
+        link: 'https://vant-ui.github.io/vant/v1/',
       },
     ],
   },
@@ -324,12 +380,19 @@ Customize iframe URL.
 
 Customize HTML meta tag, key means name, value means content.
 
+### site.headHtml
+
+- Type: `string`
+- Default: `undefined`
+
+Insert a custom HTML content in the `<head>` tag.
+
 ### site.enableVConsole
 
 - Type: `boolean`
 - Default: `false`
 
-Should use [vConsole](https://github.com/Tencent/vConsole) to debug when dev. For mobile.
+Whether to enable [vConsole](https://github.com/Tencent/vConsole) debugging in dev, usually used for mobile debugging.
 
 ## PostCSS
 

packages/vant-cli/docs/config.zh-CN.md

@@ -115,6 +115,23 @@ module.exports = {
 };
 ```
 
+### build.css.removeSourceFile
+
+- Type: `boolean`
+- Default: `'false'`
+
+是否在构建后移除样式文件的源代码。
+
+```js
+module.exports = {
+  build: {
+    css: {
+      removeSourceFile: true,
+    },
+  },
+};
+```
+
 ### build.site.publicPath
 
 - Type: `string`
@@ -206,6 +223,45 @@ module.exports = {
 
 指定使用的包管理器。
 
+### build.bundleOptions
+
+- Type: `BundleOptions[]`
+
+指定打包后产物的格式。
+
+产物格式由三个配置项控制：
+
+```ts
+type BundleOption = {
+  // 是否压缩代码（注意 es 产物无法被 vite 压缩）
+  minify?: boolean;
+  // 产物类型，可选值为 'es' | 'cjs' | 'umd' | 'iife'
+  formats: LibraryFormats[];
+  // 需要 external 的依赖（Vue 默认会被 external）
+  external?: string[];
+};
+```
+
+该选项的默认值为：
+
+```ts
+const DEFAULT_OPTIONS: BundleOption[] = [
+  {
+    minify: false,
+    formats: ['umd'],
+  },
+  {
+    minify: true,
+    formats: ['umd'],
+  },
+  {
+    minify: false,
+    formats: ['es', 'cjs'],
+    external: allDependencies,
+  },
+];
+```
+
 ### site.title
 
 - Type: `string`
@@ -271,7 +327,7 @@ module.exports = {
     versions: [
       {
         label: 'v1',
-        link: 'https://youzan.github.io/vant/v1/',
+        link: 'https://vant-ui.github.io/vant/v1/',
       },
     ],
   },
@@ -281,7 +337,7 @@ module.exports = {
 ### site.baiduAnalytics
 
 - Type: `object`
-- Default: `undefied`
+- Default: `undefined`
 
 文档网站的百度统计配置，添加这项配置后，会自动在构建文档网站时加载百度统计的脚本。
 
@@ -328,6 +384,13 @@ module.exports = {
 
 配置 HTML 中的 meta 标签，对象的 key 为 name，value 为 content。
 
+### site.headHtml
+
+- Type: `string`
+- Default: `undefined`
+
+在 `<head>` 标签中插入一段自定义的 HTML 内容。
+
 ### site.enableVConsole
 
 - Type: `boolean`

packages/vant-cli/docs/directory.md

@@ -42,7 +42,7 @@ button
 └─ README.md        # component doc
 ```
 
-When using this directory structure, the developer of the component library needs to import the JS and CSS files respectively, and the styles can also be imported automatically through babel-plugin-import.
+When using this directory structure, the developer of the component library needs to import the JS and CSS files respectively.
 
 Theme customization can be achieved by importing style source files (less or scss) and modifying style variables.
 

packages/vant-cli/docs/directory.zh-CN.md

@@ -42,7 +42,7 @@ button
 └─ README.md        # 组件文档
 ```
 
-采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件，也可以通过 babel-plugin-import 自动引入样式。
+采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件。
 
 通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。
 

packages/vant-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/cli",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "type": "module",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -32,68 +32,63 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/youzan/vant.git",
+    "url": "https://github.com/vant-ui/vant.git",
     "directory": "packages/vant-cli"
   },
-  "bugs": "https://github.com/youzan/vant/issues",
+  "bugs": "https://github.com/vant-ui/vant/issues",
   "author": "chenjiahan",
   "license": "MIT",
   "devDependencies": {
+    "@jest/types": "^27.5.1",
     "@types/fs-extra": "^9.0.13",
     "@types/less": "^3.0.3",
     "@types/markdown-it": "^12.2.3",
-    "@types/react": "^18",
-    "@jest/types": "^27",
-    "vue": "^3.2.27",
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vue": "^3.2.38"
   },
   "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.0",
-    "@docsearch/css": "^3.0.0",
-    "@docsearch/js": "^3.0.0",
-    "@types/jest": "^27.0.3",
-    "@vant/eslint-config": "^3.3.2",
-    "@vant/markdown-vetur": "^2.3.0",
-    "@vant/stylelint-config": "^1.4.2",
-    "@vant/touch-emulator": "^1.3.2",
-    "@vitejs/plugin-vue": "^2.0.0",
-    "@vitejs/plugin-vue-jsx": "^1.3.3",
+    "@babel/core": "^7.18.13",
+    "@babel/preset-typescript": "^7.18.6",
+    "@docsearch/css": "^3.2.1",
+    "@docsearch/js": "^3.2.1",
+    "@types/jest": "^27.5.2",
+    "@vant/eslint-config": "^3.5.0",
+    "@vant/touch-emulator": "^1.4.0",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
     "@vue/babel-plugin-jsx": "^1.1.1",
-    "autoprefixer": "^10.4.0",
-    "chalk": "^4.1.2",
-    "commander": "^8.3.0",
+    "autoprefixer": "^10.4.8",
+    "commander": "^9.4.0",
     "consola": "^2.15.3",
-    "conventional-changelog": "^3.1.24",
-    "esbuild": "^0.14.29",
-    "eslint": "^8.1.0",
+    "conventional-changelog": "^3.1.25",
+    "esbuild": "^0.14.54",
+    "eslint": "^8.23.0",
     "execa": "^5.1.1",
-    "fast-glob": "^3.2.7",
-    "fs-extra": "^10.0.0",
-    "gh-pages": "^3.2.3",
+    "fast-glob": "^3.2.11",
+    "fs-extra": "^10.1.0",
     "hash-sum": "^2.0.0",
-    "highlight.js": "^11.3.1",
+    "highlight.js": "^11.6.0",
     "husky": "^8.0.1",
-    "jest": "^27.3.1",
-    "jest-canvas-mock": "^2.3.1",
+    "jest": "^27.5.1",
+    "jest-canvas-mock": "^2.4.0",
     "jest-serializer-html": "^7.1.0",
-    "less": "^4.1.2",
-    "lint-staged": "^12.1.2",
-    "markdown-it": "^12.2.0",
-    "markdown-it-anchor": "^8.4.1",
-    "ora": "^6.0.1",
-    "postcss": "^8.3.11",
-    "postcss-load-config": "^3.1.0",
-    "prettier": "^2.5.0",
-    "release-it": "^14.11.6",
-    "stylelint": "^13.0.0",
-    "transliteration": "^2.2.0",
-    "typescript": "^4.5.2",
-    "vite": "^2.9.0",
-    "vite-plugin-html": "^2.1.1",
-    "vite-plugin-md": "^0.11.4",
-    "vue-router": "^4.0.12"
+    "less": "^4.1.3",
+    "markdown-it": "^12.3.2",
+    "markdown-it-anchor": "^8.6.4",
+    "nano-staged": "^0.8.0",
+    "nanospinner": "^1.1.0",
+    "picocolors": "^1.0.0",
+    "postcss": "^8.4.16",
+    "postcss-load-config": "^3.1.4",
+    "prettier": "^2.7.1",
+    "release-it": "^15.4.1",
+    "transliteration": "^2.3.5",
+    "typescript": "^4.8.2",
+    "vite": "^3.0.9",
+    "vite-plugin-html": "^2.1.2",
+    "vite-plugin-md": "^0.11.9",
+    "vue-router": "^4.1.5"
   },
   "release-it": {
     "git": {

packages/vant-cli/site/common/iframe-sync.js

@@ -1,7 +1,4 @@
-/**
- * 同步父窗口和 iframe 的 vue-router 状态
- */
-
+import { ref } from 'vue';
 import { config } from 'site-desktop-shared';
 
 let queue = [];
@@ -62,6 +59,49 @@ export function syncPathToChild() {
   }
 }
 
+export function syncThemeToChild(theme) {
+  const iframe = document.querySelector('iframe');
+  if (iframe) {
+    iframeReady(() => {
+      iframe.contentWindow.postMessage(
+        {
+          type: 'updateTheme',
+          value: theme,
+        },
+        '*'
+      );
+    });
+  }
+}
+
+export function getDefaultTheme() {
+  const cache = window.localStorage.getItem('vantTheme');
+
+  if (cache) {
+    return cache;
+  }
+
+  const useDark =
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches;
+  return useDark ? 'dark' : 'light';
+}
+
+export function useCurrentTheme() {
+  const theme = ref(getDefaultTheme());
+
+  window.addEventListener('message', (event) => {
+    if (event.data?.type !== 'updateTheme') {
+      return;
+    }
+
+    const newTheme = event.data?.value || '';
+    theme.value = newTheme;
+  });
+
+  return theme;
+}
+
 export function listenToSyncPath(router) {
   window.addEventListener('message', (event) => {
     if (event.data?.type !== 'replacePath') {

packages/vant-cli/site/common/style/base.less

@@ -1,16 +1,15 @@
-@import './var';
-@import './font.less';
+@import './vars.less';
 
 body {
   min-width: 1100px;
   margin: 0;
   overflow-x: auto;
-  color: @van-doc-black;
+  color: var(--van-doc-text-color-2);
   font-size: 16px;
   font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
     Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui',
     'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
-  background-color: @van-doc-background-color;
+  background-color: var(--van-doc-background);
   -webkit-font-smoothing: antialiased;
 }
 
@@ -42,8 +41,8 @@ a {
 .van-doc-row {
   width: 100%;
 
-  @media (min-width: @van-doc-row-max-width) {
-    width: @van-doc-row-max-width;
+  @media (min-width: var(--van-doc-row-max-width)) {
+    width: var(--van-doc-row-max-width);
     margin: 0 auto;
   }
 }

packages/vant-cli/site/common/style/font.less

@@ -1,163 +0,0 @@
-/* cyrillic-ext */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWJ0bf8pkAp6a.woff2)
-      format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFUZ0bf8pkAp6a.woff2)
-      format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWZ0bf8pkAp6a.woff2)
-      format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVp0bf8pkAp6a.woff2)
-      format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFWp0bf8pkAp6a.woff2)
-      format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2)
-      format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-weight: 400;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url(https://b.yzcdn.cn/vant/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2)
-      format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
-
-/* cyrillic-ext */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOX-hpKKSTj5PW.woff2)
-      format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOVuhpKKSTj5PW.woff2)
-      format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek-ext */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXuhpKKSTj5PW.woff2)
-      format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-/* greek */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUehpKKSTj5PW.woff2)
-      format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXehpKKSTj5PW.woff2)
-      format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2)
-      format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-weight: 600;
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url(https://b.yzcdn.cn/vant/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2)
-      format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}

packages/vant-cli/site/common/style/highlight.less

@@ -1,20 +1,18 @@
-@import './var';
-
 code {
   position: relative;
   display: block;
   padding: 16px 20px;
   overflow-x: auto;
-  color: @van-doc-code-color;
+  color: var(--van-doc-code-color);
   font-weight: 400;
   font-size: 14px;
-  font-family: @van-doc-code-font-family;
+  font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
   line-height: 26px;
   white-space: pre-wrap;
   word-wrap: break-word;
   -webkit-font-smoothing: auto;
-  background-color: #f8f8f8;
-  border-radius: @van-doc-border-radius;
+  background-color: var(--van-doc-code-background);
+  border-radius: var(--van-doc-border-radius);
 }
 
 pre {
@@ -33,7 +31,7 @@ pre {
 }
 
 .hljs-subst {
-  color: @van-doc-code-color;
+  color: var(--van-doc-code-color);
 }
 
 .hljs-string,
@@ -42,18 +40,18 @@ pre {
 .hljs-template-tag,
 .hljs-template-variable,
 .hljs-addition {
-  color: @van-doc-green;
+  color: var(--van-doc-green);
 }
 
 .hljs-comment,
 .hljs-quote {
-  color: #999;
+  color: var(--van-doc-code-comment-color);
 }
 
 .hljs-params,
 .hljs-keyword,
 .hljs-attribute {
-  color: @van-doc-purple;
+  color: var(--van-doc-purple);
 }
 
 .hljs-deletion,

packages/vant-cli/site/common/style/var.less

@@ -1,27 +0,0 @@
-@van-doc-black: #323233;
-@van-doc-blue: #1989fa;
-@van-doc-purple: #8080ff;
-@van-doc-fuchsia: #a7419e;
-@van-doc-green: #4fc08d;
-@van-doc-text-color: #34495e;
-@van-doc-text-light-blue: rgba(69, 90, 100, 0.6);
-@van-doc-background-color: #f7f8fa;
-@van-doc-grey: #999;
-@van-doc-dark-grey: #666;
-@van-doc-light-grey: #ccc;
-@van-doc-border-color: #f1f4f8;
-@van-doc-code-color: #58727e;
-@van-doc-code-background-color: #f1f4f8;
-@van-doc-code-font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
-@van-doc-padding: 24px;
-@van-doc-row-max-width: 1680px;
-@van-doc-nav-width: 220px;
-@van-doc-border-radius: 20px;
-
-// header
-@van-doc-header-top-height: 64px;
-@van-doc-header-bottom-height: 50px;
-
-// simulator
-@van-doc-simulator-width: 360px;
-@van-doc-simulator-height: 620px;

packages/vant-cli/site/common/style/vars.less

@@ -0,0 +1,74 @@
+body {
+  // colors
+  --van-doc-black: #000;
+  --van-doc-white: #fff;
+  --van-doc-gray-1: #f7f8fa;
+  --van-doc-gray-2: #f2f3f5;
+  --van-doc-gray-3: #ebedf0;
+  --van-doc-gray-4: #dcdee0;
+  --van-doc-gray-5: #c8c9cc;
+  --van-doc-gray-6: #969799;
+  --van-doc-gray-7: #646566;
+  --van-doc-gray-8: #323233;
+  --van-doc-blue: #1989fa;
+  --van-doc-green: #07c160;
+
+  // sizes
+  --van-doc-padding: 24px;
+  --van-doc-row-max-width: 1680px;
+  --van-doc-nav-width: 220px;
+  --van-doc-border-radius: 20px;
+  --van-doc-simulator-width: 360px;
+  --van-doc-simulator-height: 620px;
+  --van-doc-header-top-height: 64px;
+}
+
+.van-doc-theme-light {
+  // text
+  --van-doc-text-color-1: var(--van-doc-black);
+  --van-doc-text-color-2: var(--van-doc-gray-8);
+  --van-doc-text-color-3: #34495e;
+  --van-doc-text-color-4: var(--van-doc-gray-6);
+  --van-doc-link-color: var(--van-doc-blue);
+
+  // background
+  --van-doc-background: #eff2f5;
+  --van-doc-background-2: var(--van-doc-white);
+  --van-doc-background-3: var(--van-doc-white);
+  --van-doc-header-background: #011f3c;
+  --van-doc-border-color: var(--van-doc-gray-2);
+
+  // code
+  --van-doc-code-color: #58727e;
+  --van-doc-code-comment-color: var(--van-doc-gray-6);
+  --van-doc-code-background: var(--van-doc-gray-1);
+
+  // blockquote
+  --van-doc-blockquote-color: #4994df;
+  --van-doc-blockquote-background: #ecf9ff;
+}
+
+.van-doc-theme-dark {
+  // text
+  --van-doc-text-color-1: var(--van-doc-white);
+  --van-doc-text-color-2: rgba(255, 255, 255, 0.9);
+  --van-doc-text-color-3: rgba(255, 255, 255, 0.75);
+  --van-doc-text-color-4: rgba(255, 255, 255, 0.6);
+  --van-doc-link-color: #1bb5fe;
+
+  // background
+  --van-doc-background: #202124;
+  --van-doc-background-2: rgba(255, 255, 255, 0.06);
+  --van-doc-background-3: rgba(255, 255, 255, 0.1);
+  --van-doc-header-background: rgba(1, 31, 60, 0.3);
+  --van-doc-border-color: #3a3a3c;
+
+  // code
+  --van-doc-code-color: rgba(200, 200, 200, 0.85);
+  --van-doc-code-comment-color: var(--van-doc-gray-7);
+  --van-doc-code-background: rgba(0, 0, 0, 0.24);
+
+  // blockquote
+  --van-doc-blockquote-color: #bae6fd;
+  --van-doc-blockquote-background: rgba(7, 89, 133, 0.25);
+}

packages/vant-cli/site/desktop/App.vue

@@ -8,6 +8,7 @@
       :simulator="simulator"
       :has-simulator="hasSimulator"
       :lang-configs="langConfigs"
+      :dark-mode-class="darkModeClass"
     >
       <router-view />
     </van-doc>
@@ -27,6 +28,7 @@ export default {
   data() {
     return {
       hasSimulator: true,
+      darkModeClass: config.site.darkModeClass,
     };
   },
 
@@ -70,18 +72,18 @@ export default {
   watch: {
     // eslint-disable-next-line
     '$route.path'() {
-      this.setTitleAndToogleSimulator();
+      this.setTitleAndToggleSimulator();
     },
 
     lang(val) {
       setLang(val);
-      this.setTitleAndToogleSimulator();
+      this.setTitleAndToggleSimulator();
     },
 
     config: {
       handler(val) {
         if (val) {
-          this.setTitleAndToogleSimulator();
+          this.setTitleAndToggleSimulator();
         }
       },
       immediate: true,
@@ -100,7 +102,7 @@ export default {
   },
 
   methods: {
-    setTitleAndToogleSimulator() {
+    setTitleAndToggleSimulator() {
       let { title } = this.config;
 
       const navItems = this.config.nav.reduce(

packages/vant-cli/site/desktop/components/Container.vue

@@ -18,18 +18,18 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-container {
   box-sizing: border-box;
-  padding-left: @van-doc-nav-width;
+  padding-left: var(--van-doc-nav-width);
   overflow: hidden;
 
   &--with-simulator {
-    padding-right: @van-doc-simulator-width + @van-doc-padding;
+    padding-right: calc(
+      var(--van-doc-simulator-width) + var(--van-doc-padding)
+    );
 
     @media (max-width: 1100px) {
-      padding-right: @van-doc-simulator-width - 8px;
+      padding-right: calc(var(--van-doc-simulator-width) - 8px);
     }
   }
 }

packages/vant-cli/site/desktop/components/Content.vue

@@ -82,14 +82,12 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-card {
   margin-bottom: 24px;
   padding: 24px;
-  background-color: #fff;
-  border-radius: @van-doc-border-radius;
-  box-shadow: 0 8px 12px #ebedf0;
+  background-color: var(--van-doc-background-2);
+  border-radius: var(--van-doc-border-radius);
+  overflow: auto;
 
   > pre code {
     position: relative;
@@ -144,15 +142,15 @@ export default {
   > table a,
   > blockquote a {
     margin: 0 1px;
-    color: @van-doc-blue;
+    color: var(--van-doc-link-color);
     -webkit-font-smoothing: auto;
 
     &:hover {
-      color: darken(@van-doc-blue, 10%);
+      opacity: 0.8;
     }
 
     &:active {
-      color: darken(@van-doc-blue, 20%);
+      opacity: 0.6;
     }
   }
 
@@ -160,7 +158,6 @@ export default {
   > h4,
   > h5,
   > h6 {
-    color: @van-doc-black;
     font-weight: normal;
     line-height: 1.6;
 
@@ -189,23 +186,19 @@ export default {
 
   > p {
     margin-top: 8px;
-  }
-
-  > p,
-  > blockquote p {
-    color: @van-doc-text-color;
+    color: var(--van-doc-text-color-3);
     font-size: 15px;
     line-height: 26px;
 
     strong {
-      color: black;
+      color: var(--van-doc-text-color-1);
     }
   }
 
   > table {
     width: 100%;
     margin-top: 12px;
-    color: @van-doc-text-color;
+    color: var(--van-doc-text-color-3);
     font-size: 14px;
     line-height: 1.5;
     border-collapse: collapse;
@@ -226,7 +219,7 @@ export default {
 
     td {
       padding: 8px;
-      border-top: 1px solid @van-doc-code-background-color;
+      border-top: 1px solid var(--van-doc-border-color);
 
       &:first-child {
         padding-left: 0;
@@ -235,10 +228,10 @@ export default {
         code {
           margin: 0;
           padding: 2px 6px;
-          color: @van-doc-blue;
+          color: var(--van-doc-blue);
           font-weight: 600;
           font-size: 11px;
-          background-color: fade(@van-doc-blue, 10%);
+          background-color: rgba(25, 137, 250, 0.15);
           border-radius: 20px;
         }
       }
@@ -250,9 +243,9 @@ export default {
 
     em {
       display: inline-block;
-      color: @van-doc-green;
+      color: var(--van-doc-green);
       font-size: 14px;
-      font-family: @van-doc-code-font-family;
+      font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
       font-style: normal;
       max-width: 300px;
       -webkit-font-smoothing: auto;
@@ -268,7 +261,7 @@ export default {
     position: relative;
     margin: 5px 0 5px 10px;
     padding-left: 15px;
-    color: @van-doc-text-color;
+    color: var(--van-doc-text-color-3);
     font-size: 15px;
     line-height: 26px;
 
@@ -280,7 +273,7 @@ export default {
       width: 6px;
       height: 6px;
       margin-top: 10px;
-      border: 1px solid @van-doc-dark-grey;
+      border: 1px solid currentColor;
       border-radius: 50%;
       content: '';
     }
@@ -310,15 +303,17 @@ export default {
   > blockquote {
     margin: 16px 0 0;
     padding: 16px;
-    background-color: #ecf9ff;
-    border-radius: @van-doc-border-radius;
+    font-size: 14px;
+    color: var(--van-doc-blockquote-color);
+    background-color: var(--van-doc-blockquote-background);
+    border-radius: var(--van-doc-border-radius);
   }
 
   > img,
   > p img {
     width: 100%;
     margin: 16px 0;
-    border-radius: @van-doc-border-radius;
+    border-radius: var(--van-doc-border-radius);
   }
 }
 
@@ -333,7 +328,6 @@ export default {
 
     h1,
     h2 {
-      color: @van-doc-black;
       font-weight: normal;
       line-height: 1.5;
 

packages/vant-cli/site/desktop/components/Header.vue

@@ -24,6 +24,16 @@
             </a>
           </li>
 
+          <li v-if="darkModeClass" class="van-doc-header__top-nav-item">
+            <a
+              class="van-doc-header__link"
+              target="_blank"
+              @click="toggleTheme"
+            >
+              <img :src="themeImg" />
+            </a>
+          </li>
+
           <li
             ref="version"
             v-if="versions"
@@ -69,6 +79,7 @@
 <script>
 import SearchInput from './SearchInput.vue';
 import { packageVersion } from 'site-desktop-shared';
+import { getDefaultTheme, syncThemeToChild } from '../../common/iframe-sync';
 
 export default {
   name: 'VanDocHeader',
@@ -82,10 +93,12 @@ export default {
     config: Object,
     versions: Array,
     langConfigs: Array,
+    darkModeClass: String,
   },
 
   data() {
     return {
+      currentTheme: getDefaultTheme(),
       packageVersion,
       showVersionPop: false,
     };
@@ -112,9 +125,32 @@ export default {
     searchConfig() {
       return this.config.searchConfig;
     },
+
+    themeImg() {
+      if (this.currentTheme === 'light') {
+        return 'https://b.yzcdn.cn/vant/dark-theme.svg';
+      }
+      return 'https://b.yzcdn.cn/vant/light-theme.svg';
+    },
+  },
+
+  watch: {
+    currentTheme: {
+      handler(newVal, oldVal) {
+        window.localStorage.setItem('vantTheme', newVal);
+        document.body.classList.remove(`van-doc-theme-${oldVal}`);
+        document.body.classList.add(`van-doc-theme-${newVal}`);
+        syncThemeToChild(newVal);
+      },
+      immediate: true,
+    },
   },
 
   methods: {
+    toggleTheme() {
+      this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
+    },
+
     toggleVersionPop() {
       const val = !this.showVersionPop;
 
@@ -147,18 +183,16 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-header {
   width: 100%;
-  background-color: #001938;
+  background-color: var(--van-doc-header-background);
   user-select: none;
 
   &__top {
     display: flex;
     align-items: center;
-    height: @van-doc-header-top-height;
-    padding: 0 @van-doc-padding;
+    height: var(--van-doc-header-top-height);
+    padding: 0 var(--van-doc-padding);
 
     &-nav {
       flex: 1;
@@ -234,7 +268,7 @@ export default {
         transition: 0.2s;
 
         &:hover {
-          color: @van-doc-blue;
+          color: var(--van-doc-link-color);
           background-color: #f7f8fa;
         }
       }
@@ -268,6 +302,8 @@ export default {
   }
 
   &__link {
+    cursor: pointer;
+
     span {
       color: #fff;
       font-size: 16px;

packages/vant-cli/site/desktop/components/Nav.vue

@@ -71,22 +71,19 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-nav {
   position: fixed;
   left: 0;
   z-index: 1;
-  min-width: @van-doc-nav-width;
-  max-width: @van-doc-nav-width;
-  padding: @van-doc-padding 0;
+  min-width: var(--van-doc-nav-width);
+  max-width: var(--van-doc-nav-width);
+  padding: 8px 0;
   overflow-y: scroll;
-  background-color: #fff;
-  box-shadow: 0 8px 12px #ebedf0;
+  background-color: var(--van-doc-background-2);
 
-  @media (min-width: @van-doc-row-max-width) {
+  @media (min-width: var(--van-doc-row-max-width)) {
     left: 50%;
-    margin-left: -(@van-doc-row-max-width / 2);
+    margin-left: calc((var(--van-doc-row-max-width) / 2 * -1));
   }
 
   &::-webkit-scrollbar {
@@ -110,8 +107,8 @@ export default {
   }
 
   &__title {
-    padding: 8px 0 8px @van-doc-padding;
-    color: #455a64;
+    padding: 24px 0 0 var(--van-doc-padding);
+    color: var(--van-doc-text-color-2);
     font-weight: 600;
     font-size: 15px;
     line-height: 28px;
@@ -121,21 +118,19 @@ export default {
     a {
       display: block;
       margin: 8px 0;
-      padding: 8px 0 8px @van-doc-padding;
-      color: #455a64;
+      padding: 6px 0 6px var(--van-doc-padding);
+      color: var(--van-doc-text-color-3);
       font-size: 14px;
       line-height: 20px;
       transition: color 0.2s;
 
       &:hover,
       &.active {
-        color: @van-doc-green;
+        color: var(--van-doc-link-color);
       }
 
       &.active {
         font-weight: 600;
-        background-color: #ebfff0;
-        border-radius: 999px;
       }
 
       span {

packages/vant-cli/site/desktop/components/SearchInput.vue

@@ -38,8 +38,6 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 #docsearch {
   display: inline-block;
   vertical-align: middle;

packages/vant-cli/site/desktop/components/Simulator.vue

@@ -44,34 +44,31 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-simulator {
   position: absolute;
-  top: @van-doc-padding + @van-doc-header-top-height;
-  right: @van-doc-padding;
+  top: calc(var(--van-doc-padding) + var(--van-doc-header-top-height));
+  right: var(--van-doc-padding);
   z-index: 1;
   box-sizing: border-box;
-  width: @van-doc-simulator-width;
-  min-width: @van-doc-simulator-width;
+  width: var(--van-doc-simulator-width);
+  min-width: var(--van-doc-simulator-width);
   overflow: hidden;
-  background: #fafafa;
-  border-radius: @van-doc-border-radius;
-  box-shadow: 0 8px 12px #ebedf0;
+  background: var(--van-doc-background-2);
+  border-radius: var(--van-doc-border-radius);
 
   @media (max-width: 1100px) {
     right: auto;
     left: 750px;
   }
 
-  @media (min-width: @van-doc-row-max-width) {
+  @media (min-width: var(--van-doc-row-max-width)) {
     right: 50%;
-    margin-right: -(@van-doc-row-max-width / 2) + 24px;
+    margin-right: calc(var(--van-doc-row-max-width) / 2 * -1 + 24px);
   }
 
   &-fixed {
     position: fixed;
-    top: @van-doc-padding;
+    top: var(--van-doc-padding);
   }
 
   iframe {

packages/vant-cli/site/desktop/components/index.vue

@@ -5,6 +5,7 @@
       :config="config"
       :versions="versions"
       :lang-configs="langConfigs"
+      :dark-mode-class="darkModeClass"
       @switch-version="$emit('switch-version', $event)"
     />
     <doc-nav :lang="lang" :nav-config="config.nav" />
@@ -39,8 +40,9 @@ export default {
     lang: String,
     versions: Array,
     simulator: String,
-    hasSimulator: Boolean,
     langConfigs: Array,
+    hasSimulator: Boolean,
+    darkModeClass: String,
     config: {
       type: Object,
       required: true,
@@ -108,7 +110,3 @@ export default {
   },
 };
 </script>
-
-<style lang="less">
-@import '../../common/style/var';
-</style>

packages/vant-cli/site/desktop/router.js

@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 import { isMobile, decamelize } from '../common';
 import { config, documents } from 'site-desktop-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import { listenToSyncPath, syncPathToChild } from '../common/iframe-router';
+import { listenToSyncPath, syncPathToChild } from '../common/iframe-sync';
 
 if (isMobile) {
   location.replace('mobile.html' + location.hash);

packages/vant-cli/site/index.html

@@ -15,6 +15,9 @@
     <meta http-equiv="Cache-Control" content="no-cache" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
+    <% if (headHtml) { %>
+      <%- headHtml %>
+    <% } %>
     <% if (baiduAnalytics) { %>
     <script>
       var _hmt = _hmt || [];
@@ -27,7 +30,7 @@
     </script>
     <% } %>
   </head>
-  <body ontouchstart>
+  <body>
     <div id="app"></div>
     <script type="module" src="/desktop/main.js"></script>
   </body>

packages/vant-cli/site/mobile.html

@@ -15,6 +15,9 @@
     <meta http-equiv="Cache-Control" content="no-cache" />
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
+    <% if (headHtml) { %>
+      <%- headHtml %>
+    <% } %>
     <% if (enableVConsole) { %>
     <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
     <script>
@@ -36,7 +39,7 @@
     </script>
     <% } %>
   </head>
-  <body ontouchstart>
+  <body>
     <div id="app"></div>
     <script type="module" src="/mobile/main.js"></script>
   </body>

packages/vant-cli/site/mobile/App.vue

@@ -10,21 +10,49 @@
 </template>
 
 <script>
+import { watch } from 'vue';
 import DemoNav from './components/DemoNav.vue';
+import { useCurrentTheme } from '../common/iframe-sync';
+import { config } from 'site-mobile-shared';
 
 export default {
   components: { DemoNav },
+
+  setup() {
+    const theme = useCurrentTheme();
+
+    watch(
+      theme,
+      (newVal, oldVal) => {
+        document.body.classList.remove(`van-doc-theme-${oldVal}`);
+        document.body.classList.add(`van-doc-theme-${newVal}`);
+
+        const { darkModeClass } = config.site;
+        if (darkModeClass) {
+          document.body.classList.toggle(darkModeClass, newVal === 'dark');
+        }
+      },
+      { immediate: true }
+    );
+  },
 };
 </script>
 
 <style lang="less">
-@import '../common/style/var';
 @import '../common/style/base';
 
 body {
   min-width: 100vw;
 }
 
+.van-doc-theme-light {
+  background-color: var(--van-doc-gray-1);
+}
+
+.van-doc-theme-dark {
+  background-color: var(--van-doc-black);
+}
+
 ::-webkit-scrollbar {
   width: 0;
   background: transparent;

packages/vant-cli/site/mobile/components/DemoBlock.vue

@@ -20,13 +20,11 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .van-doc-demo-block {
   &__title {
     margin: 0;
     padding: 32px 16px 16px;
-    color: @van-doc-text-light-blue;
+    color: var(--van-doc-text-color-4);
     font-weight: normal;
     font-size: 14px;
     line-height: 16px;

packages/vant-cli/site/mobile/components/DemoHome.vue

@@ -52,14 +52,11 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .demo-home {
   box-sizing: border-box;
   width: 100%;
   min-height: 100vh;
   padding: 46px 20px 20px;
-  background: #fff;
 
   &__title,
   &__desc {
@@ -94,7 +91,7 @@ export default {
 
   &__desc {
     margin: 0 0 40px;
-    color: rgba(69, 90, 100, 0.6);
+    color: var(--van-doc-text-color-4);
     font-size: 14px;
   }
 }

packages/vant-cli/site/mobile/components/DemoHomeNav.vue

@@ -43,12 +43,10 @@ export default {
 </script>
 
 <style lang="less">
-@import '../../common/style/var';
-
 .demo-home-nav {
   &__title {
     margin: 24px 0 8px 16px;
-    color: rgba(69, 90, 100, 0.6);
+    color: var(--van-doc-text-color-4);
     font-size: 14px;
   }
 
@@ -57,20 +55,20 @@ export default {
     display: flex;
     margin: 0 0 12px;
     padding-left: 20px;
-    color: #323233;
+    color: var(--van-doc-text-color-3);
     font-weight: 600;
     font-size: 14px;
     line-height: 40px;
-    background: #f7f8fa;
+    background-color: var(--van-doc-background-3);
     border-radius: 99px;
-    transition: background 0.3s;
+    transition: opacity 0.3s;
 
     &:hover {
-      background: darken(#f7f8fa, 3%);
+      opacity: 0.8;
     }
 
     &:active {
-      background: darken(#f7f8fa, 6%);
+      opacity: 0.6;
     }
   }
 

packages/vant-cli/site/mobile/components/DemoNav.vue

@@ -42,7 +42,7 @@ export default {
   align-items: center;
   justify-content: center;
   height: 56px;
-  background-color: #fff;
+  background-color: var(--van-doc-background-3);
 
   &__title {
     font-weight: 600;

packages/vant-cli/site/mobile/main.js

@@ -13,3 +13,8 @@ window.app = createApp(App)
 setTimeout(() => {
   window.app.mount('#app');
 }, 0);
+
+// https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari/33681490#33681490
+document.addEventListener('touchstart', () => {}, {
+  passive: true,
+});

packages/vant-cli/site/mobile/router.js

@@ -4,7 +4,7 @@ import DemoHome from './components/DemoHome.vue';
 import { decamelize } from '../common';
 import { demos, config } from 'site-mobile-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import { listenToSyncPath, syncPathToParent } from '../common/iframe-router';
+import { listenToSyncPath, syncPathToParent } from '../common/iframe-sync';
 
 const { locales, defaultLang } = config.site;
 

packages/vant-cli/src/cli.ts

@@ -1,25 +1,26 @@
 import { Command } from 'commander';
 
-import {
-  dev,
-  lint,
-  test,
-  clean,
-  build,
-  release,
-  changelog,
-  buildSite,
-  commitLint,
-  cliVersion,
-} from './index.js';
+import { cliVersion } from './index.js';
 
 const program = new Command();
 
 program.version(`@vant/cli ${cliVersion}`);
 
-program.command('dev').description('Run dev server').action(dev);
+program
+  .command('dev')
+  .description('Run dev server')
+  .action(async () => {
+    const { dev } = await import('./commands/dev.js');
+    return dev();
+  });
 
-program.command('lint').description('Run eslint and stylelint').action(lint);
+program
+  .command('lint')
+  .description('Run ESLint')
+  .action(async () => {
+    const { lint } = await import('./commands/lint.js');
+    return lint();
+  });
 
 program
   .command('test')
@@ -45,34 +46,58 @@ program
     'Run all tests serially in the current process, rather than creating a worker pool of child processes that run tests'
   )
   .option('--debug', 'Print debugging info about your Jest config')
-  .action(test);
+  .action(async (options) => {
+    const { test } = await import('./commands/jest.js');
+    return test(options);
+  });
 
-program.command('clean').description('Clean all dist files').action(clean);
+program
+  .command('clean')
+  .description('Clean all dist files')
+  .action(async () => {
+    const { clean } = await import('./commands/clean.js');
+    return clean();
+  });
 
 program
   .command('build')
   .description('Compile components in production mode')
-  .action(build);
+  .action(async () => {
+    const { build } = await import('./commands/build.js');
+    return build();
+  });
 
 program
   .command('release')
   .description('Compile components and release it')
   .option('--tag <tag>', 'Release tag')
-  .action(release);
+  .action(async (options) => {
+    const { release } = await import('./commands/release.js');
+    return release(options);
+  });
 
 program
   .command('build-site')
   .description('Compile site in production mode')
-  .action(buildSite);
+  .action(async () => {
+    const { buildSite } = await import('./commands/build-site.js');
+    return buildSite();
+  });
 
 program
   .command('changelog')
   .description('Generate changelog')
-  .action(changelog);
+  .action(async () => {
+    const { changelog } = await import('./commands/changelog.js');
+    return changelog();
+  });
 
 program
   .command('commit-lint <gitParams>')
   .description('Lint commit message')
-  .action(commitLint);
+  .action(async (gitParams) => {
+    const { commitLint } = await import('./commands/commit-lint.js');
+    return commitLint(gitParams);
+  });
 
 program.parse();

packages/vant-cli/src/commands/build.ts

@@ -3,7 +3,7 @@ import execa from 'execa';
 import { join, relative } from 'path';
 import { clean } from './clean.js';
 import { CSS_LANG } from '../common/css.js';
-import { ora, consola } from '../common/logger.js';
+import { createSpinner, consola } from '../common/logger.js';
 import { installDependencies } from '../common/manager.js';
 import { compileSfc } from '../compiler/compile-sfc.js';
 import { compileStyle } from '../compiler/compile-style.js';
@@ -12,9 +12,9 @@ import { compileBundles } from '../compiler/compile-bundles.js';
 import { genPackageEntry } from '../compiler/gen-package-entry.js';
 import { genStyleDepsMap } from '../compiler/gen-style-deps-map.js';
 import { genComponentStyle } from '../compiler/gen-component-style.js';
-import { SRC_DIR, LIB_DIR, ES_DIR } from '../common/constant.js';
+import { SRC_DIR, LIB_DIR, ES_DIR, getVantConfig } from '../common/constant.js';
 import { genPackageStyle } from '../compiler/gen-package-style.js';
-import { genVeturConfig } from '../compiler/gen-vetur-config.js';
+import { genWebStormTypes } from '../compiler/web-types/index.js';
 import {
   isDir,
   isSfc,
@@ -135,9 +135,10 @@ async function buildPackageStyleEntry() {
 }
 
 async function buildBundledOutputs() {
+  const config = getVantConfig();
   setModuleEnv('esmodule');
   await compileBundles();
-  genVeturConfig();
+  genWebStormTypes(config.build?.tagPrefix);
 }
 
 const tasks = [
@@ -178,14 +179,14 @@ const tasks = [
 async function runBuildTasks() {
   for (let i = 0; i < tasks.length; i++) {
     const { task, text } = tasks[i];
-    const spinner = ora(text).start();
+    const spinner = createSpinner(text).start();
 
     try {
       /* eslint-disable no-await-in-loop */
       await task();
-      spinner.succeed(text);
+      spinner.success({ text });
     } catch (err) {
-      spinner.fail(text);
+      spinner.error({ text });
       console.log(err);
       throw err;
     }

packages/vant-cli/src/commands/changelog.ts

@@ -1,7 +1,7 @@
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 import { ROOT } from '../common/constant.js';
-import { ora, slimPath } from '../common/logger.js';
+import { createSpinner, slimPath } from '../common/logger.js';
 import { createWriteStream, readFileSync } from 'fs';
 import conventionalChangelog from 'conventional-changelog';
 
@@ -48,7 +48,7 @@ function transform(item: any) {
 }
 
 export async function changelog(): Promise<void> {
-  const spinner = ora('Generating changelog...').start();
+  const spinner = createSpinner('Generating changelog...').start();
 
   return new Promise((resolve) => {
     conventionalChangelog(
@@ -68,7 +68,9 @@ export async function changelog(): Promise<void> {
     )
       .pipe(createWriteStream(DIST_FILE))
       .on('close', () => {
-        spinner.succeed(`Changelog generated at ${slimPath(DIST_FILE)}`);
+        spinner.success({
+          text: `Changelog generated at ${slimPath(DIST_FILE)}`,
+        });
         resolve();
       });
   });

packages/vant-cli/src/commands/clean.ts

@@ -3,7 +3,6 @@ import {
   ES_DIR,
   LIB_DIR,
   DIST_DIR,
-  VETUR_DIR,
   SITE_DIST_DIR,
 } from '../common/constant.js';
 
@@ -14,7 +13,6 @@ export async function clean() {
     remove(ES_DIR),
     remove(LIB_DIR),
     remove(DIST_DIR),
-    remove(VETUR_DIR),
     remove(SITE_DIST_DIR),
   ]);
 }

packages/vant-cli/src/commands/lint.ts

@@ -1,5 +1,5 @@
 import execa from 'execa';
-import { consola, ora } from '../common/logger.js';
+import { consola, createSpinner } from '../common/logger.js';
 import { SCRIPT_EXTS } from '../common/constant.js';
 
 type RunCommandMessages = {
@@ -13,7 +13,7 @@ function runCommand(
   options: string[],
   messages: RunCommandMessages
 ) {
-  const spinner = ora(messages.start).start();
+  const spinner = createSpinner(messages.start).start();
 
   return new Promise((resolve) => {
     execa(cmd, options, {
@@ -21,11 +21,11 @@ function runCommand(
       env: { FORCE_COLOR: true },
     })
       .then(() => {
-        spinner.succeed(messages.succeed);
+        spinner.success({ text: messages.succeed });
         resolve(true);
       })
       .catch((err: any) => {
-        spinner.fail(messages.failed);
+        spinner.error({ text: messages.failed });
         consola.error(err.stderr || err.stdout);
         resolve(false);
       });
@@ -44,23 +44,10 @@ function eslint() {
   );
 }
 
-function stylelint() {
-  return runCommand(
-    'stylelint',
-    ['src/**/*.css', 'src/**/*.vue', 'src/**/*.less', 'src/**/*.sass', '--fix'],
-    {
-      start: 'Running stylelint...',
-      succeed: 'Stylelint Passed.',
-      failed: 'Stylelint failed!',
-    }
-  );
-}
-
 export async function lint() {
   const eslintPassed = await eslint();
-  const stylelintPassed = await stylelint();
 
-  if (!eslintPassed || !stylelintPassed) {
+  if (!eslintPassed) {
     process.exit(1);
   }
 }

packages/vant-cli/src/commands/release.ts

@@ -4,7 +4,7 @@ import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const PLUGIN_PATH = join(__dirname, '../../cjs/vant-cli-release-plugin.cjs');
+const PLUGIN_PATH = join(__dirname, '../compiler/vant-cli-release-plugin.js');
 
 export async function release(command: { tag?: string }) {
   await releaseIt({

packages/vant-cli/src/common/constant.ts

@@ -21,7 +21,6 @@ export const ROOT = findRootDir(CWD);
 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-dist');
 export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.mjs');
 export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');

packages/vant-cli/src/common/logger.ts

@@ -1,10 +1,10 @@
-import ora from 'ora';
-import chalk from 'chalk';
+import { createSpinner } from 'nanospinner';
+import color from 'picocolors';
 import consola from 'consola';
 import { ROOT } from '../common/constant.js';
 
 export function slimPath(path: string) {
-  return chalk.yellow(path.replace(ROOT, ''));
+  return color.yellow(path.replace(ROOT, ''));
 }
 
-export { ora, consola };
+export { createSpinner, consola };

packages/vant-cli/src/compiler/compile-bundles.ts

@@ -1,68 +1,41 @@
-import fse from 'fs-extra';
-import { join } from 'path';
 import { build } from 'vite';
-import { getPackageJson, getVantConfig, LIB_DIR } from '../common/constant.js';
+import { getPackageJson, getVantConfig } from '../common/constant.js';
 import { mergeCustomViteConfig } from '../common/index.js';
 import { getViteConfigForPackage } from '../config/vite.package.js';
+import type { LibraryFormats } from 'vite';
 
-// generate entry file for nuxt
-async function genEntryForSSR() {
-  const { name } = getVantConfig();
-  const cjsPath = join(LIB_DIR, 'ssr.js');
-  const mjsPath = join(LIB_DIR, 'ssr.mjs');
-
-  const cjsContent = `'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./${name}.cjs.min.js');
-} else {
-  module.exports = require('./${name}.cjs.js');
+export type BundleOption = {
+  minify?: boolean;
+  formats: LibraryFormats[];
+  external?: string[];
 };
-`;
-
-  const mjsContent = `export * from './index.js';\n`;
-
-  return Promise.all([
-    fse.outputFile(cjsPath, cjsContent),
-    fse.outputFile(mjsPath, mjsContent),
-  ]);
-}
 
 export async function compileBundles() {
   const dependencies = getPackageJson().dependencies || {};
-  const externals = Object.keys(dependencies);
+  const external = Object.keys(dependencies);
 
-  const configs = [
-    // umd bundle
-    getViteConfigForPackage({
+  const DEFAULT_OPTIONS: BundleOption[] = [
+    {
       minify: false,
       formats: ['umd'],
-      external: ['vue'],
-    }),
-    // umd bundle (minified)
-    getViteConfigForPackage({
+    },
+    {
       minify: true,
       formats: ['umd'],
-      external: ['vue'],
-    }),
-    // esm/cjs bundle
-    getViteConfigForPackage({
+    },
+    {
       minify: false,
       formats: ['es', 'cjs'],
-      external: ['vue', ...externals],
-    }),
-    // esm/cjs bundle (minified)
-    // vite will not minify es bundle
-    // see: https://github.com/vuejs/vue-next/issues/2860
-    getViteConfigForPackage({
-      minify: true,
-      formats: ['es', 'cjs'],
-      external: ['vue', ...externals],
-    }),
+      external,
+    },
   ];
 
+  const bundleOptions: BundleOption[] =
+    getVantConfig().build?.bundleOptions || DEFAULT_OPTIONS;
+
   await Promise.all(
-    configs.map((config) => build(mergeCustomViteConfig(config)))
+    bundleOptions.map((config) =>
+      build(mergeCustomViteConfig(getViteConfigForPackage(config)))
+    )
   );
-  await genEntryForSSR();
 }

packages/vant-cli/src/compiler/compile-sfc.ts

@@ -87,15 +87,13 @@ export async function compileSfc(filePath: string): Promise<any> {
       new Promise((resolve) => {
         let script = '';
 
-        // the generated render fn lacks type definitions
-        if (lang === 'ts') {
-          script += '// @ts-nocheck\n';
-        }
-
+        let bindingMetadata;
         if (descriptor.scriptSetup) {
-          script += compileScript(descriptor, {
+          const { bindings, content } = compileScript(descriptor, {
             id: scopeId,
-          }).content;
+          });
+          script += content;
+          bindingMetadata = bindings;
         } else {
           script += descriptor.script!.content;
         }
@@ -108,6 +106,9 @@ export async function compileSfc(filePath: string): Promise<any> {
             id: scopeId,
             source: template.content,
             filename: filePath,
+            compilerOptions: {
+              bindingMetadata,
+            },
           }).code;
 
           script = injectRender(script, render);
@@ -119,6 +120,12 @@ export async function compileSfc(filePath: string): Promise<any> {
 
         script += `\n${EXPORT} ${VUEIDS}`;
 
+        // ts-nocheck should be placed on the first line
+        // the generated render fn lacks type definitions
+        if (lang === 'ts') {
+          script = '// @ts-nocheck\n' + script;
+        }
+
         outputFile(scriptFilePath, script).then(resolve);
       })
     );

packages/vant-cli/src/compiler/compile-site.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import color from 'picocolors';
 import { createRequire } from 'module';
 import { createServer, build } from 'vite';
 import {
@@ -38,8 +38,8 @@ export async function compileSite(production = false) {
 
     const require = createRequire(import.meta.url);
     const { version } = require('vite/package.json');
-    const viteInfo = chalk.cyan(`vite v${version}`);
-    console.log(`\n  ${viteInfo}` + chalk.green(` dev server running at:\n`));
+    const viteInfo = color.cyan(`vite v${version}`);
+    console.log(`\n  ${viteInfo}` + color.green(` dev server running at:\n`));
     server.printUrls();
   }
 }

packages/vant-cli/src/compiler/compile-style.ts

@@ -1,11 +1,13 @@
 import { parse } from 'path';
-import { readFileSync, writeFileSync } from 'fs';
-import { replaceExt } from '../common/index.js';
+import fse from 'fs-extra';
+import { getVantConfig, replaceExt } from '../common/index.js';
 import { compileCss } from './compile-css.js';
 import { compileLess } from './compile-less.js';
 import { compileSass } from './compile-sass.js';
 import { consola } from '../common/logger.js';
 
+const { readFileSync, writeFileSync, removeSync } = fse;
+
 async function compileFile(filePath: string) {
   const parsedPath = parse(filePath);
 
@@ -30,6 +32,11 @@ async function compileFile(filePath: string) {
 
 export async function compileStyle(filePath: string) {
   const css = await compileFile(filePath);
+  const vantConfig = getVantConfig();
+
+  if (vantConfig.build?.css?.removeSourceFile) {
+    removeSync(filePath);
+  }
 
   writeFileSync(replaceExt(filePath, '.css'), css);
 }

packages/vant-cli/src/compiler/gen-component-style.ts

@@ -12,6 +12,7 @@ import {
   ES_DIR,
   SRC_DIR,
   LIB_DIR,
+  getVantConfig,
   STYLE_DEPS_JSON_FILE,
 } from '../common/constant.js';
 
@@ -87,8 +88,10 @@ export function genComponentStyle(
     delete require.cache[STYLE_DEPS_JSON_FILE];
   }
 
+  const vantConfig = getVantConfig();
   const components = getComponents();
   const baseFile = getCssBaseFile();
+  const hasSourceFile = vantConfig.build?.css?.removeSourceFile !== true;
 
   components.forEach((component) => {
     genEntry({
@@ -98,7 +101,7 @@ export function genComponentStyle(
       ext: '.css',
     });
 
-    if (CSS_LANG !== 'css') {
+    if (CSS_LANG !== 'css' && hasSourceFile) {
       genEntry({
         baseFile,
         component,

packages/vant-cli/src/compiler/gen-vetur-config.ts

@@ -1,25 +0,0 @@
-import markdownVetur from '@vant/markdown-vetur';
-import {
-  SRC_DIR,
-  VETUR_DIR,
-  getVantConfig,
-  getPackageJson,
-} from '../common/constant.js';
-
-// generate vetur tags & attributes
-export function genVeturConfig() {
-  const pkgJson = getPackageJson();
-  const vantConfig = getVantConfig();
-  const options = vantConfig.build?.vetur;
-
-  if (options) {
-    markdownVetur.parseAndWrite({
-      name: vantConfig.name,
-      path: SRC_DIR,
-      test: /README\.md/,
-      version: pkgJson.version,
-      outputDir: VETUR_DIR,
-      ...options,
-    });
-  }
-}

packages/vant-cli/src/compiler/vant-cli-release-plugin.ts

@@ -1,7 +1,7 @@
-const releaseIt = require('release-it');
-const { execSync } = require('child_process');
+import { Plugin } from 'release-it';
+import { execSync } from 'child_process';
 
-class VantCliReleasePlugin extends releaseIt.Plugin {
+class VantCliReleasePlugin extends Plugin {
   async beforeRelease() {
     // log an empty line
     console.log('');
@@ -11,4 +11,4 @@ class VantCliReleasePlugin extends releaseIt.Plugin {
   }
 }
 
-module.exports = VantCliReleasePlugin;
+export default VantCliReleasePlugin;

packages/vant-cli/src/compiler/web-types/formatter.ts

@@ -1,14 +1,19 @@
 /* eslint-disable no-continue */
-import { Articals } from './parser';
-import { formatOptions, formatType, removeVersion, toKebabCase } from './utils';
-import { VueEventArgument, VueTag } from './type';
+import { Articles } from './parser.js';
+import {
+  formatOptions,
+  formatType,
+  removeVersion,
+  toKebabCase,
+} from './utils.js';
+import { VueEventArgument, VueTag } from './type.js';
 
 function formatComponentName(name: string, tagPrefix: string) {
   return tagPrefix + toKebabCase(name);
 }
 
 /**
- * format arugments of events
+ * format arguments of events
  * input  = value: { foo: foo or 1, bar: bar or 2 }, value2: { one: 1 and 1, two: 2 and 2 }, foo: bar
  * output = [{ name: 'value', type: '{ foo: foo or 1, bar: bar or 2 }' }, { name: 'value2', type: '{ one: 1 and 1, two: 2 and 2 }'}, { name: 'foo', type: 'bar' }]
  */
@@ -73,29 +78,29 @@ function findTag(vueTags: VueTag[], name: string) {
 
 export function formatter(
   vueTags: VueTag[],
-  articals: Articals,
+  articles: Articles,
   tagPrefix = ''
 ) {
-  if (!articals.length) {
+  if (!articles.length) {
     return;
   }
 
-  const mainTitle = articals[0].content;
+  const mainTitle = articles[0].content;
   const defaultName = mainTitle
     ? formatComponentName(mainTitle.split(' ')[0], tagPrefix)
     : '';
-  const tables = articals.filter((artical) => artical.type === 'table');
+  const tables = articles.filter((article) => article.type === 'table');
 
   tables.forEach((item) => {
     const { table } = item;
-    const prevIndex = articals.indexOf(item) - 1;
-    const prevArtical = articals[prevIndex];
+    const prevIndex = articles.indexOf(item) - 1;
+    const prevArticle = articles[prevIndex];
 
-    if (!prevArtical || !prevArtical.content || !table || !table.body) {
+    if (!prevArticle || !prevArticle.content || !table || !table.body) {
       return;
     }
 
-    const tableTitle = prevArtical.content;
+    const tableTitle = prevArticle.content;
 
     if (tableTitle.includes('Props')) {
       const name = getNameFromTableTitle(tableTitle, tagPrefix) || defaultName;

packages/vant-cli/src/compiler/web-types/index.ts

@@ -0,0 +1,55 @@
+import glob from 'fast-glob';
+import { join } from 'path';
+import fse from 'fs-extra';
+import { mdParser } from './parser.js';
+import { formatter } from './formatter.js';
+import { genWebTypes } from './web-types.js';
+import { Options, VueTag } from './type.js';
+import { normalizePath } from './utils.js';
+import {
+  SRC_DIR,
+  LIB_DIR,
+  getVantConfig,
+  getPackageJson,
+} from '../../common/constant.js';
+
+async function readMarkdown(options: Options) {
+  const mds = await glob(normalizePath(`${options.path}/**/*.md`));
+  return mds
+    .filter((md) => options.test.test(md))
+    .map((path) => fse.readFileSync(path, 'utf-8'));
+}
+
+export async function parseAndWrite(options: Options) {
+  if (!options.outputDir) {
+    throw new Error('outputDir can not be empty.');
+  }
+
+  const mds = await readMarkdown(options);
+  const vueTags: VueTag[] = [];
+
+  mds.forEach((md) => {
+    const parsedMd = mdParser(md);
+    formatter(vueTags, parsedMd, options.tagPrefix);
+  });
+
+  const webTypes = genWebTypes(vueTags, options);
+  fse.outputFileSync(
+    join(options.outputDir, 'web-types.json'),
+    JSON.stringify(webTypes, null, 2)
+  );
+}
+
+export function genWebStormTypes(tagPrefix?: string) {
+  const pkgJson = getPackageJson();
+  const vantConfig = getVantConfig();
+
+  parseAndWrite({
+    name: vantConfig.name,
+    path: SRC_DIR,
+    test: /README\.md/,
+    version: pkgJson.version,
+    outputDir: LIB_DIR,
+    tagPrefix,
+  });
+}

packages/vant-cli/src/compiler/web-types/parser.ts

@@ -9,14 +9,14 @@ type TableContent = {
   body: string[][];
 };
 
-export type Artical = {
+export type Article = {
   type: string;
   content?: string;
   table?: TableContent;
   level?: number;
 };
 
-export type Articals = Artical[];
+export type Articles = Article[];
 
 function readLine(input: string) {
   const end = input.indexOf('\n');
@@ -75,8 +75,8 @@ function tableParse(input: string) {
   };
 }
 
-export function mdParser(input: string): Articals {
-  const artical = [];
+export function mdParser(input: string): Articles {
+  const article = [];
   let start = 0;
   const end = input.length;
 
@@ -85,7 +85,7 @@ export function mdParser(input: string): Articals {
 
     let match;
     if ((match = TITLE_REG.exec(target))) {
-      artical.push({
+      article.push({
         type: 'title',
         content: match[2],
         level: match[1].length,
@@ -94,7 +94,7 @@ export function mdParser(input: string): Articals {
       start += match.index + match[0].length;
     } else if ((match = TABLE_REG.exec(target))) {
       const { table, usedLength } = tableParse(target.substr(match.index));
-      artical.push({
+      article.push({
         type: 'table',
         table,
       });
@@ -105,5 +105,5 @@ export function mdParser(input: string): Articals {
     }
   }
 
-  return artical;
+  return article;
 }

packages/vant-cli/src/compiler/web-types/type.ts

@@ -35,26 +35,6 @@ export type VueTag = {
   description?: string;
 };
 
-export type VeturTag = {
-  description?: string;
-  attributes: string[];
-};
-
-export type VeturTags = Record<string, VeturTag>;
-
-export type VeturAttribute = {
-  type: string;
-  description: string;
-  options?: string[];
-};
-
-export type VeturAttributes = Record<string, VeturAttribute>;
-
-export type VeturResult = {
-  tags: VeturTags;
-  attributes: VeturAttributes;
-};
-
 export type Options = {
   name: string;
   path: PathLike;

packages/vant-cli/src/compiler/web-types/web-types.ts

@@ -1,4 +1,4 @@
-import { VueTag, Options } from './type';
+import type { VueTag, Options } from './type.js';
 
 // create web-types.json to provide autocomplete in JetBrains IDEs
 export function genWebTypes(tags: VueTag[], options: Options) {

packages/vant-cli/src/config/vite.package.ts

@@ -1,28 +1,32 @@
 import { join } from 'path';
 import { setBuildTarget } from '../common/index.js';
 import { CWD, ES_DIR, getVantConfig, LIB_DIR } from '../common/constant.js';
-import type { InlineConfig, LibraryFormats } from 'vite';
+import type { InlineConfig } from 'vite';
+import type { BundleOption } from '../compiler/compile-bundles.js';
 
 export function getViteConfigForPackage({
   minify,
   formats,
-  external,
-}: {
-  minify: boolean;
-  formats: LibraryFormats[];
-  external: string[];
-}): InlineConfig {
+  external = [],
+}: BundleOption): InlineConfig {
   setBuildTarget('package');
 
   const { name, build } = getVantConfig();
   const entryExtension = build?.extensions?.esm || '.js';
   const entry = join(ES_DIR, `index${entryExtension}`);
+  const shouldReplaceEnv = minify || formats?.includes('umd');
 
   return {
     root: CWD,
 
     logLevel: 'silent',
 
+    define: shouldReplaceEnv
+      ? {
+          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+        }
+      : undefined,
+
     build: {
       lib: {
         name,
@@ -33,10 +37,11 @@ export function getViteConfigForPackage({
           return minify ? `${name}${suffix}.min.js` : `${name}${suffix}.js`;
         },
       },
+
       // terser has better compression than esbuild
       minify: minify ? 'terser' : false,
       rollupOptions: {
-        external,
+        external: [...external, 'vue'],
         output: {
           dir: LIB_DIR,
           exports: 'named',

packages/vant-cli/src/config/vite.site.ts

@@ -137,6 +137,7 @@ export function getViteConfigForSiteDev(): InlineConfig {
   const vantConfig = getVantConfig();
   const siteConfig = getSiteConfig(vantConfig);
   const title = getTitle(siteConfig);
+  const headHtml = vantConfig.site?.headHtml;
   const baiduAnalytics = vantConfig.site?.baiduAnalytics;
   const enableVConsole = isDev() && vantConfig.site?.enableVConsole;
 
@@ -178,6 +179,7 @@ export function getViteConfigForSiteDev(): InlineConfig {
           // `description` is used by the HTML ejs template,
           // so it needs to be written explicitly here to avoid error: description is not defined
           description: siteConfig.description,
+          headHtml,
           baiduAnalytics,
           enableVConsole,
           meta: getHTMLMeta(vantConfig),
@@ -202,9 +204,9 @@ export function getViteConfigForSiteProd(): InlineConfig {
     base: publicPath,
     build: {
       outDir,
-      brotliSize: false,
+      reportCompressedSize: false,
       emptyOutDir: true,
-      // https://github.com/youzan/vant/issues/9703
+      // https://github.com/vant-ui/vant/issues/9703
       cssTarget: ['chrome53'],
       rollupOptions: {
         input: {

packages/vant-cli/src/index.ts

@@ -1,30 +1,9 @@
 // @ts-ignore
 import fs from 'fs';
 import { URL, fileURLToPath } from 'url';
-import { dev } from './commands/dev.js';
-import { lint } from './commands/lint.js';
-import { test } from './commands/jest.js';
-import { clean } from './commands/clean.js';
-import { build } from './commands/build.js';
-import { release } from './commands/release.js';
-import { changelog } from './commands/changelog.js';
-import { buildSite } from './commands/build-site.js';
-import { commitLint } from './commands/commit-lint.js';
 
 const packagePath = fileURLToPath(new URL('../package.json', import.meta.url));
 const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf-8'));
 export const cliVersion: string = packageJson.version;
 
 process.env.VANT_CLI_VERSION = cliVersion;
-
-export {
-  dev,
-  lint,
-  test,
-  clean,
-  build,
-  release,
-  changelog,
-  buildSite,
-  commitLint,
-};

packages/vant-cli/src/module.d.ts

@@ -4,4 +4,3 @@ declare module 'hash-sum';
 declare module '@babel/core';
 declare module 'release-it';
 declare module 'conventional-changelog';
-declare module '@vant/markdown-vetur';

packages/vant-compat/LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) Youzan
+Copyright (c) Chen Jiahan and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/vant-compat/README.md

@@ -0,0 +1,32 @@
+# @vant/compat
+
+This package provides Vant 3 compatible behavior for Vant 4 users.
+
+## Install
+
+```shell
+# with npm
+npm i @vant/compat
+
+# with yarn
+yarn add @vant/compat
+
+# with pnpm
+pnpm add @vant/compat
+```
+
+## Usage
+
+```js
+// Same as Toast in Vant 3
+import { Toast } from '@vant/compat';
+
+// Same as Dialog in Vant 3
+import { Dialog } from '@vant/compat';
+
+// Same as Notify in Vant 3
+import { Notify } from '@vant/compat';
+
+// Same as ImagePreview in Vant 3
+import { ImagePreview } from '@vant/compat';
+```

packages/vant-compat/build.js

@@ -0,0 +1 @@
+require('../vant-use/build');

packages/vant-compat/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@vant/compat",
+  "version": "1.0.0",
+  "description": "Provide Vant 3 compatible behavior for Vant 4",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.mjs",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "dev": "node ./build.js -w",
+    "build:types": "tsc -p ./tsconfig.json --emitDeclarationOnly",
+    "build:bundle": "node ./build.js",
+    "build": "pnpm clean && pnpm build:bundle && pnpm build:types",
+    "release": "pnpm build && release-it"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vant-ui/vant.git",
+    "directory": "packages/vant-compat"
+  },
+  "bugs": "https://github.com/vant-ui/vant/issues",
+  "author": "chenjiahan",
+  "license": "MIT",
+  "devDependencies": {
+    "@vue/runtime-core": "^3.2.27",
+    "vant": "workspace:*",
+    "vue": "^3.2.27",
+    "esbuild": "^0.14.29",
+    "release-it": "^15.1.1",
+    "typescript": "^4.7.4"
+  },
+  "release-it": {
+    "git": {
+      "tag": false,
+      "commitMessage": "release: @vant/compat ${version}"
+    }
+  }
+}

packages/vant-compat/src/dialog.ts

@@ -0,0 +1,30 @@
+import {
+  Dialog as VanDialog,
+  showDialog,
+  closeDialog,
+  showConfirmDialog,
+  setDialogDefaultOptions,
+  resetDialogDefaultOptions,
+} from 'vant';
+import type { App } from 'vue';
+
+export const Dialog = (...args: Parameters<typeof showDialog>) =>
+  showDialog(...args);
+
+Dialog.Component = VanDialog;
+Dialog.alert = Dialog;
+Dialog.config = showConfirmDialog;
+Dialog.close = closeDialog;
+Dialog.setDefaultOptions = setDialogDefaultOptions;
+Dialog.resetDefaultOptions = resetDialogDefaultOptions;
+
+Dialog.install = (app: App) => {
+  app.use(Dialog.Component);
+  app.config.globalProperties.$dialog = Dialog;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $dialog: typeof Dialog;
+  }
+}

packages/vant-compat/src/image-preview.ts

@@ -0,0 +1,11 @@
+import { ImagePreview as VanImagePreview, showImagePreview } from 'vant';
+import type { App } from 'vue';
+
+export const ImagePreview = (...args: Parameters<typeof showImagePreview>) =>
+  showImagePreview(...args);
+
+ImagePreview.Component = VanImagePreview;
+
+ImagePreview.install = (app: App) => {
+  app.use(ImagePreview.Component);
+};

packages/vant-compat/src/index.ts

@@ -0,0 +1,4 @@
+export * from './toast';
+export * from './notify';
+export * from './dialog';
+export * from './image-preview';

packages/vant-compat/src/notify.ts

@@ -0,0 +1,27 @@
+import {
+  Notify as VanNotify,
+  showNotify,
+  closeNotify,
+  setNotifyDefaultOptions,
+  resetNotifyDefaultOptions,
+} from 'vant';
+import type { App } from 'vue';
+
+export const Notify = (...args: Parameters<typeof showNotify>) =>
+  showNotify(...args);
+
+Notify.clear = closeNotify;
+Notify.Component = VanNotify;
+Notify.setDefaultOptions = setNotifyDefaultOptions;
+Notify.resetDefaultOptions = resetNotifyDefaultOptions;
+
+Notify.install = (app: App) => {
+  app.use(Notify.Component);
+  app.config.globalProperties.$notify = Notify;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $notify: typeof Notify;
+  }
+}

packages/vant-compat/src/toast.ts

@@ -0,0 +1,49 @@
+import {
+  showToast,
+  closeToast,
+  showFailToast,
+  showSuccessToast,
+  allowMultipleToast,
+  setToastDefaultOptions,
+  resetToastDefaultOptions,
+} from 'vant';
+import type { App } from 'vue';
+
+export const Toast = (...args: Parameters<typeof showToast>) => {
+  const toast = showToast(...args);
+  return {
+    clear: toast.close,
+    ...toast,
+  };
+};
+
+Toast.fail = (...args: Parameters<typeof showFailToast>) => {
+  const toast = showFailToast(...args);
+  return {
+    clear: toast.close,
+    ...toast,
+  };
+};
+
+Toast.success = (...args: Parameters<typeof showSuccessToast>) => {
+  const toast = showSuccessToast(...args);
+  return {
+    clear: toast.close,
+    ...toast,
+  };
+};
+
+Toast.clear = closeToast;
+Toast.allowMultiple = allowMultipleToast;
+Toast.setDefaultOptions = setToastDefaultOptions;
+Toast.resetDefaultOptions = resetToastDefaultOptions;
+
+Toast.install = (app: App) => {
+  app.config.globalProperties.$toast = Toast;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $toast: typeof Toast;
+  }
+}

packages/vant-compat/tsconfig.json

@@ -1,9 +1,7 @@
 {
   "extends": "../../tsconfig",
   "compilerOptions": {
-    "target": "ES2019",
-    "outDir": "./lib",
-    "module": "commonjs",
+    "outDir": "./dist",
     "declaration": true
   },
   "include": ["src/**/*"]