+
+## Core Team
+
+Core contributors of Vant and Vant Weapp:
+
+| [](https://github.com/chenjiahan/) | [](https://github.com/cookfront/) | [](https://github.com/w91/) | [](https://github.com/pangxie1991/) | [](https://github.com/rex-zsd/) | [](https://github.com/nemo-shen/) | [](https://github.com/Lindysen/) | [](https://github.com/JakeLaoyu/) |
+| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
+| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) | [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) |
+
+## All Contributors
+
+Thanks to the following friends for their contributions to Vant:
+
+
+
+
+
+## Contribution Guide
+
+Please make sure to read the [Contributing Guide](./.github/CONTRIBUTING.md) before making a pull request.
+
## LICENSE
[MIT](https://en.wikipedia.org/wiki/MIT_License)
diff --git a/README.zh-CN.md b/README.zh-CN.md
index fd07f8e92..03f6f2285 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -40,6 +40,7 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源
- 🍭 支持 Vue 2、Vue 3 和微信小程序
- 🍭 支持主题定制，内置 700+ 个主题变量
- 🍭 支持按需引入和 Tree Shaking
+- 🍭 支持无障碍访问（持续改进中）
- 🍭 支持服务器端渲染
- 🌍 支持国际化和语言包定制
@@ -78,12 +79,6 @@ app.use(Button);
vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手](https://vant-contrib.gitee.io/vant#/zh-CN/quickstart).
-## 贡献代码
-
-修改代码请阅读我们的 [贡献指南](https://vant-contrib.gitee.io/vant/#/zh-CN/contribution)。
-
-使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
-
## 浏览器支持
Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
@@ -127,6 +122,28 @@ Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致
+## 核心团队
+
+以下是 Vant 和 Vant Weapp 的核心贡献者们：
+
+| [](https://github.com/chenjiahan/) | [](https://github.com/cookfront/) | [](https://github.com/w91/) | [](https://github.com/pangxie1991/) | [](https://github.com/rex-zsd/) | [](https://github.com/nemo-shen/) | [](https://github.com/Lindysen/) | [](https://github.com/JakeLaoyu/) |
+| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
+| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) | [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) |
+
+## 贡献者们
+
+感谢以下小伙伴们为 Vant 发展做出的贡献：
+
+
+
+
+
+## 贡献指南
+
+修改代码请阅读我们的 [贡献指南](https://vant-contrib.gitee.io/vant/#/zh-CN/contribution)。
+
+使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
+
## 开源协议
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。
diff --git a/package.json b/package.json
index 7ab3d63b2..b83ed52ad 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
"@vant/stylelint-config": "workspace:*",
"eslint": "^8.2.0",
"husky": "^7.0.4",
- "lint-staged": "^11.2.6",
- "prettier": "^2.4.1",
+ "lint-staged": "^12.1.2",
+ "prettier": "^2.5.0",
"rimraf": "^3.0.2",
"stylelint": "^13.13.1"
}
diff --git a/packages/create-vant-cli-app/package.json b/packages/create-vant-cli-app/package.json
index 40aafd7c7..ae8978eb1 100644
--- a/packages/create-vant-cli-app/package.json
+++ b/packages/create-vant-cli-app/package.json
@@ -8,14 +8,10 @@
},
"scripts": {
"dev": "tsc --watch",
- "build": "tsc",
+ "build": "rimraf ./lib && tsc",
"release": "pnpm build & release-it",
"prepare": "pnpm build"
},
- "repository": {
- "type": "git",
- "url": "https://github.com/youzan/vant/tree/dev/packages/create-vant-cli-app"
- },
"files": [
"lib",
"generators"
@@ -26,13 +22,19 @@
"publishConfig": {
"registry": "https://registry.npmjs.org/"
},
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/youzan/vant.git",
+ "directory": "packages/create-vant-cli-app"
+ },
+ "bugs": "https://github.com/youzan/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.x"
+ "typescript": "~4.5.2"
},
"dependencies": {
"chalk": "^4.1.2",
diff --git a/packages/create-vant-cli-app/tsconfig.json b/packages/create-vant-cli-app/tsconfig.json
index d40c806f7..738ecb181 100644
--- a/packages/create-vant-cli-app/tsconfig.json
+++ b/packages/create-vant-cli-app/tsconfig.json
@@ -1,13 +1,10 @@
{
+ "extends": "../../tsconfig",
"compilerOptions": {
"target": "ES2019",
"outDir": "./lib",
"module": "commonjs",
- "strict": true,
- "declaration": true,
- "skipLibCheck": true,
- "esModuleInterop": true,
- "lib": ["esnext"]
+ "declaration": true
},
"include": ["src/**/*"]
}
diff --git a/packages/vant-area-data/package.json b/packages/vant-area-data/package.json
index 34920953f..54d7a255a 100644
--- a/packages/vant-area-data/package.json
+++ b/packages/vant-area-data/package.json
@@ -4,15 +4,21 @@
"description": "Vant 省市区数据",
"main": "./lib/index.js",
"typings": "./lib/index.d.ts",
+ "scripts": {
+ "build": "rimraf ./lib && tsc",
+ "release": "pnpm build && npm publish",
+ "prepare": "pnpm build"
+ },
"publishConfig": {
"access": "public",
"registry": "https://registry.npmjs.org/"
},
- "scripts": {
- "build": "tsc",
- "release": "pnpm build && npm publish",
- "prepare": "pnpm build"
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/youzan/vant.git",
+ "directory": "packages/vant-area-data"
},
- "license": "MIT",
- "repository": "https://github.com/youzan/vant"
+ "bugs": "https://github.com/youzan/vant/issues",
+ "author": "chenjiahan",
+ "license": "MIT"
}
diff --git a/packages/vant-area-data/tsconfig.json b/packages/vant-area-data/tsconfig.json
index 69369e785..12b1beb8b 100644
--- a/packages/vant-area-data/tsconfig.json
+++ b/packages/vant-area-data/tsconfig.json
@@ -1,13 +1,9 @@
{
+ "extends": "../../tsconfig",
"compilerOptions": {
"target": "ES2019",
"outDir": "./lib",
- "module": "ES2015",
- "strict": true,
- "declaration": true,
- "skipLibCheck": true,
- "esModuleInterop": true,
- "lib": ["esnext"]
+ "declaration": true
},
"include": ["src/**/*"]
}
diff --git a/packages/vant-cli/changelog.md b/packages/vant-cli/changelog.md
index 48a42ef51..590a1eed5 100644
--- a/packages/vant-cli/changelog.md
+++ b/packages/vant-cli/changelog.md
@@ -1,5 +1,11 @@
# 更新日志
+## v4.0.0-rc.4
+
+- 新增 CommonJS 格式的构建产物，分别为 `lib/[name].cjs.js` 和 `lib/[name].cjs.min.js`
+- 现在 ESModule 和 CommonJS 格式的产物会自动对外部依赖进行 external 处理
+- 修复 Windows 路径兼容问题
+
## v4.0.0-rc.3
### 不兼容更新
@@ -286,7 +292,7 @@ yarn add sass
`2020-12-01`
-- 升级 docsearch 3，优化搜索框样式
+- 升级 docsearch 3，优化搜索框样式
## v3.0.0
@@ -469,7 +475,7 @@ yarn add sass
`2020-01-15`
-- 优化 help 命令
+- 优化 help 命令
- 优化控制台输出信息
### v2.1.6
diff --git a/packages/vant-cli/docs/config.md b/packages/vant-cli/docs/config.md
index 34aecff15..66b671709 100644
--- a/packages/vant-cli/docs/config.md
+++ b/packages/vant-cli/docs/config.md
@@ -1,13 +1,15 @@
# 配置指南
-- [配置指南](#)
+- [配置指南](#----)
- [vant.config.mjs](#vantconfigmjs)
- [name](#name)
- - [build.css](#buildcss)
+ - [build.css.base](#buildcssbase)
+ - [build.css.preprocessor](#buildcsspreprocessor)
- [build.site.publicPath](#buildsitepublicpath)
- [build.srcDir](#buildsrcdir)
- [build.namedExport](#buildnamedexport)
- [build.configureVite](#buildconfigurevite)
+ - [build.packageManager](#buildpackagemanager)
- [site.title](#sitetitle)
- [site.logo](#sitelogo)
- [site.description](#sitedescription)
@@ -18,11 +20,11 @@
- [site.hideSimulator](#sitehidesimulator)
- [site.simulator.url](#sitesimulatorurl)
- [site.htmlMeta](#sitehtmlmeta)
+ - [site.enableVConsole](#siteenablevconsole)
- [Babel](#babel)
- - [默认配置](#-1)
- - [依赖](#-2)
+ - [默认配置](#----)
- [Postcss](#postcss)
- - [默认配置](#-3)
+ - [默认配置](#-----1)
- [browserslist](#browserslist)
## vant.config.mjs
@@ -77,14 +79,33 @@ export default {
- Type: `string`
- Default: `''`
-组件库名称，建议使用中划线分割，如`demo-ui`。
+组件库名称，建议使用中划线分割，如 `demo-ui`。
-### build.css
+### build.css.base
-- Type: `object`
-- Default: `{ preprocessor: 'less' }`
+- Type: `string`
+- Default: `'style/base.less'`
-CSS 预处理器配置，目前支持`less`和`sass`两种预处理器，默认使用`less`。
+全局样式文件的路径，可以为相对路径或绝对路径。
+
+相对路径基于 `src` 目录计算。
+
+```js
+module.exports = {
+ build: {
+ css: {
+ base: 'style/global.scss',
+ },
+ },
+};
+```
+
+### build.css.preprocessor
+
+- Type: `string`
+- Default: `'less'`
+
+CSS 预处理器配置，目前支持 `less` 和 `sass` 两种预处理器，默认使用 `less`。
```js
module.exports = {
diff --git a/packages/vant-cli/package.json b/packages/vant-cli/package.json
index 1378f40b4..bf7d00e87 100644
--- a/packages/vant-cli/package.json
+++ b/packages/vant-cli/package.json
@@ -1,6 +1,6 @@
{
"name": "@vant/cli",
- "version": "4.0.0-rc.3",
+ "version": "4.0.0-rc.4",
"type": "module",
"main": "lib/index.js",
"typings": "lib/index.d.ts",
@@ -10,13 +10,9 @@
"engines": {
"node": "^14.16.0 || >=16.0.0"
},
- "publishConfig": {
- "access": "public",
- "registry": "https://registry.npmjs.org/"
- },
"scripts": {
"dev": "tsc --watch",
- "build": "tsc",
+ "build": "rimraf ./lib && tsc",
"release": "pnpm build & release-it",
"prepare": "pnpm build"
},
@@ -31,6 +27,16 @@
"keywords": [
"vant"
],
+ "publishConfig": {
+ "access": "public",
+ "registry": "https://registry.npmjs.org/"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/youzan/vant.git",
+ "directory": "packages/vant-cli"
+ },
+ "bugs": "https://github.com/youzan/vant/issues",
"author": "chenjiahan",
"license": "MIT",
"devDependencies": {
@@ -42,12 +48,12 @@
"vue": "^3.2.20"
},
"dependencies": {
+ "@types/jest": "^27.0.3",
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"@babel/preset-typescript": "^7.16.0",
"@docsearch/css": "3.0.0-alpha.41",
"@docsearch/js": "3.0.0-alpha.41",
- "@types/jest": "^27.0.2",
"@vant/eslint-config": "^3.3.2",
"@vant/markdown-vetur": "^2.2.0",
"@vant/stylelint-config": "^1.4.2",
@@ -74,19 +80,19 @@
"jest-canvas-mock": "^2.3.1",
"jest-serializer-html": "^7.1.0",
"less": "^4.1.2",
- "lint-staged": "^11.2.6",
+ "lint-staged": "^12.1.2",
"lodash-es": "^4.17.21",
"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.4.1",
+ "prettier": "^2.5.0",
"release-it": "^14.11.6",
"stylelint": "^13.0.0",
"transliteration": "^2.2.0",
"ts-jest": "^27.0.7",
- "typescript": "^4.4.4",
+ "typescript": "^4.5.2",
"vite": "^2.6.13",
"vite-plugin-html": "^2.1.1",
"vite-plugin-md": "^0.11.4",
diff --git a/packages/vant-cli/site/desktop/components/Content.vue b/packages/vant-cli/site/desktop/components/Content.vue
index bc1926a08..31d2af192 100644
--- a/packages/vant-cli/site/desktop/components/Content.vue
+++ b/packages/vant-cli/site/desktop/components/Content.vue
@@ -170,6 +170,10 @@ export default {
}
}
+ > ul {
+ margin: 12px 0;
+ }
+
> ul li,
> ol li {
position: relative;
diff --git a/packages/vant-cli/src/commands/build.ts b/packages/vant-cli/src/commands/build.ts
index 3b7a9b0b4..82abe9c2f 100644
--- a/packages/vant-cli/src/commands/build.ts
+++ b/packages/vant-cli/src/commands/build.ts
@@ -8,7 +8,7 @@ import { installDependencies } from '../common/manager.js';
import { compileSfc } from '../compiler/compile-sfc.js';
import { compileStyle } from '../compiler/compile-style.js';
import { compileScript } from '../compiler/compile-script.js';
-import { compilePackage } from '../compiler/compile-package.js';
+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';
@@ -133,8 +133,7 @@ async function buildPackageStyleEntry() {
async function buildBundledOutputs() {
setModuleEnv('esmodule');
- await compilePackage(false);
- await compilePackage(true);
+ await compileBundles();
genVeturConfig();
}
diff --git a/packages/vant-cli/src/commands/jest.ts b/packages/vant-cli/src/commands/jest.ts
index 6952dff42..284a95c44 100644
--- a/packages/vant-cli/src/commands/jest.ts
+++ b/packages/vant-cli/src/commands/jest.ts
@@ -6,8 +6,9 @@ import {
JEST_CONFIG_FILE,
PACKAGE_ENTRY_FILE,
} from '../common/constant.js';
+import type { Config } from '@jest/types';
-export function test(command: any) {
+export function test(command: Config.Argv) {
setNodeEnv('test');
genPackageEntry({
@@ -26,7 +27,7 @@ export function test(command: any) {
// make jest tests faster
// see: https://ivantanev.com/make-jest-faster/
maxWorkers: '50%',
- } as any;
+ } as Config.Argv;
jest
.runCLI(config, [ROOT])
diff --git a/packages/vant-cli/src/compiler/compile-bundles.ts b/packages/vant-cli/src/compiler/compile-bundles.ts
new file mode 100644
index 000000000..0e1367fa8
--- /dev/null
+++ b/packages/vant-cli/src/compiler/compile-bundles.ts
@@ -0,0 +1,68 @@
+import fse from 'fs-extra';
+import { join } from 'path';
+import { build } from 'vite';
+import { getPackageJson, getVantConfig, LIB_DIR } from '../common/constant.js';
+import { mergeCustomViteConfig } from '../common/index.js';
+import { getViteConfigForPackage } from '../config/vite.package.js';
+
+// 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');
+};
+`;
+
+ 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 configs = [
+ // umd bundle
+ getViteConfigForPackage({
+ 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],
+ }),
+ ];
+
+ await Promise.all(
+ configs.map((config) => build(mergeCustomViteConfig(config)))
+ );
+ await genEntryForSSR();
+}
diff --git a/packages/vant-cli/src/compiler/compile-package.ts b/packages/vant-cli/src/compiler/compile-package.ts
deleted file mode 100644
index 00466bae6..000000000
--- a/packages/vant-cli/src/compiler/compile-package.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { build } from 'vite';
-import { mergeCustomViteConfig } from '../common/index.js';
-import { getViteConfigForPackage } from '../config/vite.package.js';
-
-export async function compilePackage(
- minify: boolean
-): ReturnType
+
+
+### Contribution Guide
+
+Please make sure to read the [Contributing Guide](https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.md) before making a pull request.
+
### LICENSE
[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)
diff --git a/packages/vant/docs/markdown/home.zh-CN.md b/packages/vant/docs/markdown/home.zh-CN.md
index e92e2e47f..5748fb7e0 100644
--- a/packages/vant/docs/markdown/home.zh-CN.md
+++ b/packages/vant/docs/markdown/home.zh-CN.md
@@ -27,6 +27,7 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源
- 🍭 支持 Vue 2、Vue 3 和微信小程序
- 🍭 支持主题定制，内置 700+ 个主题变量
- 🍭 支持按需引入和 Tree Shaking
+- 🍭 支持无障碍访问（持续改进中）
- 🍭 支持服务器端渲染
- 🌍 支持国际化和语言包定制
@@ -34,18 +35,14 @@ Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源
请阅读[快速上手](#/zh-CN/quickstart)章节，通过该章节你可以了解到 Vant 的安装方法和基本使用姿势。
-### 贡献代码
-
-贡献代码请阅读我们的[贡献指南](#/zh-CN/contribution)。
-
-使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
-
### 浏览器支持
Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。
+## 链接
+
### 官方生态
由 Vant 官方团队维护的项目如下：
@@ -71,13 +68,37 @@ Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
| [@antmjs/vantui](https://github.com/antmjs/vantui) | 基于 Vant Weapp 开发的多端组件库，同时支持 Taro 和 React |
-### 链接
+### 其他链接
- [意见反馈](https://github.com/youzan/vant/issues)
- [更新日志](#/zh-CN/changelog)
- [码云镜像](https://gitee.com/vant-contrib/vant)
- [Gitter 讨论组](https://gitter.im/vant-contrib/discuss?utm_source=share-link&utm_medium=link&utm_campaign=share-link)
+## 贡献
+
+### 核心团队
+
+以下是 Vant 和 Vant Weapp 的核心贡献者们：
+
+| [](https://github.com/chenjiahan/) | [](https://github.com/cookfront/) | [](https://github.com/w91/) | [](https://github.com/pangxie1991/) | [](https://github.com/rex-zsd/) | [](https://github.com/nemo-shen/) | [](https://github.com/Lindysen/) | [](https://github.com/JakeLaoyu/) |
+| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
+| [chenjiahan](https://github.com/chenjiahan/) | [cookfront](https://github.com/cookfront/) | [wangnaiyi](https://github.com/w91/) | [pangxie](https://github.com/pangxie1991/) | [rex-zsd](https://github.com/rex-zsd/) | [nemo-shen](https://github.com/nemo-shen/) | [Lindysen](https://github.com/Lindysen/) | [JakeLaoyu](https://github.com/JakeLaoyu/) |
+
+### 贡献者们
+
+感谢以下小伙伴们为 Vant 发展做出的贡献：
+
+
+
+
+
+### 贡献指南
+
+贡献代码请阅读我们的[贡献指南](#/zh-CN/contribution)。
+
+使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
+
### 开源协议
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源
diff --git a/packages/vant/docs/markdown/quickstart.en-US.md b/packages/vant/docs/markdown/quickstart.en-US.md
index 1d13d6a0e..46ed3a006 100644
--- a/packages/vant/docs/markdown/quickstart.en-US.md
+++ b/packages/vant/docs/markdown/quickstart.en-US.md
@@ -56,12 +56,21 @@ The easiest way to use Vant is to include a CDN link in the html file, after whi
```
+#### Free CDN
+
You can use Vant through these free CDN services:
- [jsdelivr](https://www.jsdelivr.com/package/npm/vant)
- [cdnjs](https://cdnjs.com/libraries/vant)
- [unpkg](https://unpkg.com/)
+Note: Free CDN is generally used for making prototypes or personal projects. It is not recommended to use free CDN in production environment.
+
+For enterprise developers, we recommend:
+
+- install with npm, use build tools to bundle it
+- download the scripts, host it on your own server
+
### CLI
We recommend to use [Vue Cli](https://cli.vuejs.org/) to create a new project.
@@ -83,16 +92,67 @@ In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to
## Usage
-### 1. Import on demand
+### Import on demand in vite projects (recommended)
-Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import components on demand.
+If you are using vite, please use [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import).
+
+#### 1. Install Plugin
+
+```bash
+npm i vite-plugin-style-import@1.2.0 -D
+```
+
+#### 2. Configure Plugin
+
+Configure the plugin in the `vite.config.js` file:
+
+```js
+import vue from '@vitejs/plugin-vue';
+import styleImport from 'vite-plugin-style-import';
+
+export default {
+ plugins: [
+ vue(),
+ styleImport({
+ libs: [
+ {
+ libraryName: 'vant',
+ esModule: true,
+ resolveStyle: (name) => `vant/es/${name}/style/index`,
+ },
+ ],
+ }),
+ ],
+};
+```
+
+#### 3. Import Components
+
+Then you can import components from Vant:
+
+```js
+import { createApp } from 'vue';
+import { Button } from 'vant';
+
+const app = createApp();
+app.use(Button);
+```
+
+> Vant supports Tree Shaking by default.
+
+### Import on demand in non-vite projects (recommended)
+
+In non-vite projects, use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import components on demand.
+
+#### 1. Install Plugin
```bash
-# Install plugin
npm i babel-plugin-import -D
```
-Set babel config in .babelrc or babel.config.js:
+#### 2. Configure Plugin
+
+Set babel config in `.babelrc` or `babel.config.js`:
```json
{
@@ -109,7 +169,9 @@ Set babel config in .babelrc or babel.config.js:
}
```
-Then you can import components from vant:
+#### 3. Import Components
+
+Then you can import components from Vant:
```js
// Input
@@ -122,43 +184,9 @@ import 'vant/es/button/style';
> If you are using TypeScript，please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead.
-### 2. Vite Plugin
+### Import all components (not recommended)
-If you are using Vite, please use [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import).
-
-```bash
-npm i vite-plugin-style-import -D
-```
-
-```js
-// vite.config.js
-import vue from '@vitejs/plugin-vue';
-import styleImport from 'vite-plugin-style-import';
-
-export default {
- plugins: [
- vue(),
- styleImport({
- libs: [
- {
- libraryName: 'vant',
- esModule: true,
- resolveStyle: (name) => `vant/es/${name}/style`,
- },
- ],
- }),
- ],
-};
-```
-
-### 3. Manually import
-
-```js
-import Button from 'vant/es/button';
-import 'vant/es/button/style';
-```
-
-### 4. Import all components
+Import all components will **increase the bundle size**, so this is not recommended.
```js
import { createApp } from 'vue';
@@ -170,3 +198,13 @@ app.use(Vant);
```
> If you configured babel-plugin-import, you won't be allowed to import all components.
+
+### Manually import (not recommended)
+
+```js
+// import script
+import Button from 'vant/es/button/index';
+// import style
+// if the component does not have a style file, there is no need to import
+import 'vant/es/button/style/index';
+```
diff --git a/packages/vant/docs/markdown/quickstart.zh-CN.md b/packages/vant/docs/markdown/quickstart.zh-CN.md
index 5086c2867..933efc374 100644
--- a/packages/vant/docs/markdown/quickstart.zh-CN.md
+++ b/packages/vant/docs/markdown/quickstart.zh-CN.md
@@ -61,30 +61,20 @@ pnpm add vant@3
```
+#### 免费 CDN
+
你可以通过以下免费 CDN 服务来使用 Vant:
- [jsdelivr](https://www.jsdelivr.com/package/npm/vant)
- [cdnjs](https://cdnjs.com/libraries/vant)
- [unpkg](https://unpkg.com/)
-### 通过脚手架安装
+注意：免费 CDN 一般用于制作原型或个人小型项目，不推荐在企业生产环境中使用免费 CDN。
-在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 [Vue Cli](https://cli.vuejs.org/zh/) 创建项目并安装 Vant。
+对于企业开发者，建议使用以下方式：
-```bash
-# 安装 Vue Cli
-npm install -g @vue/cli
-
-# 创建一个项目
-vue create hello-world
-
-# 创建完成后，可以通过命令打开图形化界面，如下图所示
-vue ui
-```
-
-
-
-在图形化界面中，点击 `依赖` -> `安装依赖`，然后将 `vant` 添加到依赖中即可。
+- 通过 npm 引入，并通过构建工具进行打包
+- 下载对应文件，并托管在你自己的服务器或 CDN 上
## 示例
@@ -92,8 +82,9 @@ vue ui
我们提供了丰富的[示例工程](https://github.com/youzan/vant-demo)，通过示例工程你可以了解如下内容：
-- 基于 Vue Cli 和 Vant 搭建应用
+- 基于 Vite 和 Vant 搭建应用
- 基于 Nuxt 和 Vant 搭建应用
+- 基于 Vue Cli 和 Vant 搭建应用
- 配置按需引入组件
- 配置基于 Rem 的适配方案
- 配置基于 Viewport 的适配方案
@@ -102,15 +93,66 @@ vue ui
## 引入组件
-### 方式一. 通过 babel 插件按需引入组件
+### 在 vite 项目中按需引入组件（推荐）
-[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。
+在 vite 项目中使用 Vant 时，推荐安装 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 插件，它可以自动按需引入组件的样式。
+
+#### 1. 安装插件
+
+```bash
+npm i vite-plugin-style-import@1.2.0 -D
+```
+
+#### 2. 配置插件
+
+安装完成后，在 `vite.config.js` 文件中配置插件：
+
+```js
+import vue from '@vitejs/plugin-vue';
+import styleImport from 'vite-plugin-style-import';
+
+export default {
+ plugins: [
+ vue(),
+ styleImport({
+ libs: [
+ {
+ libraryName: 'vant',
+ esModule: true,
+ resolveStyle: (name) => `vant/es/${name}/style/index`,
+ },
+ ],
+ }),
+ ],
+};
+```
+
+#### 3. 引入组件
+
+完成以上两步，就可以直接使用 Vant 组件了：
+
+```js
+import { createApp } from 'vue';
+import { Button } from 'vant';
+
+const app = createApp();
+app.use(Button);
+```
+
+> Vant 默认支持通过 Tree Shaking 实现 script 的按需引入。
+
+### 在非 vite 项目中按需引入组件（推荐）
+
+在非 vite 的项目中，可以通过 babel 插件来实现按需引入组件。我们需要安装 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。
+
+#### 1. 安装插件
```bash
-# 安装插件
npm i babel-plugin-import -D
```
+#### 2. 配置插件
+
在.babelrc 或 babel.config.js 中添加配置：
```json
@@ -128,6 +170,8 @@ npm i babel-plugin-import -D
}
```
+#### 3. 引入组件
+
接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为按需引入的形式。
```js
@@ -141,50 +185,9 @@ import 'vant/es/button/style';
> 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入。
-### 方式二. 在 Vite 项目中按需引入组件
+### 导入所有组件（不推荐）
-对于 vite 项目，可以使用 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import) 实现按需引入, 原理和 `babel-plugin-import` 类似。
-
-```bash
-# 安装插件
-npm i vite-plugin-style-import -D
-```
-
-```js
-// vite.config.js
-import vue from '@vitejs/plugin-vue';
-import styleImport from 'vite-plugin-style-import';
-
-export default {
- plugins: [
- vue(),
- styleImport({
- libs: [
- {
- libraryName: 'vant',
- esModule: true,
- resolveStyle: (name) => `vant/es/${name}/style`,
- },
- ],
- }),
- ],
-};
-```
-
-### 方式三. 手动按需引入组件
-
-在不使用插件的情况下，可以手动引入需要使用的组件和样式。
-
-```js
-// 引入组件
-import Button from 'vant/es/button';
-// 引入组件对应的样式，若组件没有样式文件，则无须引入
-import 'vant/es/button/style';
-```
-
-### 方式四. 导入所有组件
-
-Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。
+Vant 支持一次性导入所有组件，引入所有组件会**增加代码包体积**，因此不推荐这种做法。
```js
import { createApp } from 'vue';
@@ -195,4 +198,16 @@ const app = createApp();
app.use(Vant);
```
-> Tips: 配置按需引入后，将不允许直接导入所有组件。
+> Tips: 配置按需引入插件后，将不允许直接导入所有组件。
+
+### 手动按需引入组件（不推荐）
+
+在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。
+
+```js
+// 引入组件脚本
+import Button from 'vant/es/button/index';
+// 引入组件样式
+// 若组件没有样式文件，则无须引入
+import 'vant/es/button/style/index';
+```
diff --git a/packages/vant/docs/markdown/use-event-listener.en-US.md b/packages/vant/docs/markdown/use-event-listener.en-US.md
new file mode 100644
index 000000000..b36e84808
--- /dev/null
+++ b/packages/vant/docs/markdown/use-event-listener.en-US.md
@@ -0,0 +1,66 @@
+# useEventListener
+
+### Intro
+
+Attaching an event when the component is `mounted` and `activated`, then removing the event when the component is `unmounted` and `deactivated`.
+
+## Usage
+
+### Basic Usage
+
+```js
+import { ref } from 'vue';
+import { useEventListener } from '@vant/use';
+
+export default {
+ setup() {
+ // attach the resize event to window
+ useEventListener('resize', () => {
+ console.log('window resize');
+ });
+
+ // attach the click event to the body element
+ useEventListener(
+ 'click',
+ () => {
+ console.log('click body');
+ },
+ { target: document.body }
+ );
+ },
+};
+```
+
+## API
+
+### Type Declarations
+
+```ts
+type Options = {
+ target?: EventTarget | Ref