mirror of
https://gitee.com/vant-contrib/vant.git
synced 2026-01-05 06:26:55 +08:00
Compare commits
No commits in common. "next" and "v3.4.6" have entirely different histories.
@ -2,4 +2,4 @@
|
||||
|
||||
请移步 GitHub issues 进行反馈：
|
||||
|
||||
https://github.com/vant-ui/vant/issues
|
||||
https://github.com/youzan/vant/issues
|
||||
|
||||
2
.github/CONTRIBUTING.md
vendored
2
.github/CONTRIBUTING.md
vendored
@ -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:vant-ui/vant.git
|
||||
git clone git@github.com:youzan/vant.git
|
||||
|
||||
# Install dependencies
|
||||
pnpm i
|
||||
|
||||
@ -9,14 +9,14 @@ body:
|
||||
在提交 Bug 报告前，请注意：
|
||||
|
||||
- 确认你的问题无法通过官方文档得到解决。
|
||||
- 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues)，并且没有发现同样的问题。
|
||||
- 如果不是反馈 Bug，请到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖。
|
||||
- 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues)，并且没有发现同样的问题。
|
||||
- 如果不是反馈 Bug，请到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖。
|
||||
|
||||
- type: input
|
||||
id: reproduce
|
||||
attributes:
|
||||
label: 重现链接
|
||||
description: 请提供一个尽可能简单的 [codesandbox](https://codesandbox.io/s/vant-3-issue-template-8fuq5o) 或 GitHub 仓库链接。不要填写无效的链接，这会导致你的 issue 被直接关闭。
|
||||
description: 请提供一个尽可能简单的 [codesandbox](https://codesandbox.io/s/m5v3f) 或 GitHub 仓库链接。不要填写无效的链接，这会导致你的 issue 被直接关闭。
|
||||
validations:
|
||||
required: true
|
||||
|
||||
|
||||
@ -9,14 +9,14 @@ body:
|
||||
在提交 Bug 报告前，请注意：
|
||||
|
||||
- 确认你的问题无法通过官方文档得到解决。
|
||||
- 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues)，并且没有发现同样的问题。
|
||||
- 如果不是反馈 Bug，请到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖。
|
||||
- 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues)，并且没有发现同样的问题。
|
||||
- 如果不是反馈 Bug，请到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖。
|
||||
|
||||
- type: input
|
||||
id: reproduce
|
||||
attributes:
|
||||
label: 重现链接
|
||||
description: 请提供一个尽可能简单的 [codesandbox](https://codesandbox.io/s/vant-3-issue-template-8fuq5o) 或 GitHub 仓库链接。不要填写无效的链接，这会导致你的 issue 被直接关闭。
|
||||
description: 请提供一个尽可能简单的 [codesandbox](https://codesandbox.io/s/m5v3f) 或 GitHub 仓库链接。不要填写无效的链接，这会导致你的 issue 被直接关闭。
|
||||
validations:
|
||||
required: true
|
||||
|
||||
|
||||
@ -9,8 +9,8 @@ body:
|
||||
在提交功能需求前，请注意：
|
||||
|
||||
- 确认这是一个通用功能，并且无法通过现有的 API 或 Slot 实现。
|
||||
- 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues)，并且没有发现同样的需求。
|
||||
- 可以先到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖，讨论一下需求是否合理。
|
||||
- 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues)，并且没有发现同样的需求。
|
||||
- 可以先到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖，讨论一下需求是否合理。
|
||||
|
||||
- type: textarea
|
||||
id: description
|
||||
|
||||
@ -9,8 +9,8 @@ body:
|
||||
在提交功能需求前，请注意：
|
||||
|
||||
- 确认这是一个通用功能，并且无法通过现有的 API 实现。
|
||||
- 确认你搜索过 [历史 issue](https://github.com/vant-ui/vant/issues)，并且没有发现同样的需求。
|
||||
- 可以先到 [Discussions 讨论区](https://github.com/vant-ui/vant/discussions) 发帖，讨论一下需求是否合理。
|
||||
- 确认你搜索过 [历史 issue](https://github.com/youzan/vant/issues)，并且没有发现同样的需求。
|
||||
- 可以先到 [Discussions 讨论区](https://github.com/youzan/vant/discussions) 发帖，讨论一下需求是否合理。
|
||||
|
||||
- type: textarea
|
||||
id: description
|
||||
|
||||
@ -7,7 +7,7 @@ body:
|
||||
id: reproduce
|
||||
attributes:
|
||||
label: Reproduction Link
|
||||
description: Please provide a simple [codesandbox](https://codesandbox.io/s/vant-3-issue-template-8fuq5o) or GitHub repository link. Do not fill in invalid links, this will cause your issue to be closed directly.
|
||||
description: Please provide a simple [codesandbox](https://codesandbox.io/s/m5v3f) or GitHub repository link. Do not fill in invalid links, this will cause your issue to be closed directly.
|
||||
validations:
|
||||
required: true
|
||||
|
||||
|
||||
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -1,6 +1,6 @@
|
||||
### Before submitting a pull request, please make sure the following is done:
|
||||
|
||||
1. Read the [contributing guide](https://github.com/vant-ui/vant/blob/dev/.github/CONTRIBUTING.md).
|
||||
1. Read the [contributing guide](https://github.com/youzan/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`).
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
name: Deploy V4 Site
|
||||
name: Deploy V3 Site
|
||||
|
||||
on:
|
||||
push:
|
||||
@ -6,8 +6,6 @@ on:
|
||||
paths:
|
||||
- 'packages/vant/docs/**'
|
||||
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
build-and-deploy:
|
||||
runs-on: ubuntu-latest
|
||||
@ -15,10 +13,12 @@ jobs:
|
||||
- name: Checkout 🛎️
|
||||
uses: actions/checkout@v2
|
||||
with:
|
||||
ref: 'next'
|
||||
ref: 'dev'
|
||||
|
||||
- name: Install pnpm
|
||||
run: npm i pnpm@7 -g
|
||||
uses: pnpm/action-setup@v2.0.1
|
||||
with:
|
||||
version: 6.20.3
|
||||
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
@ -36,5 +36,4 @@ jobs:
|
||||
with:
|
||||
branch: gh-pages
|
||||
folder: packages/vant/site-dist
|
||||
target-folder: v4
|
||||
clean: false
|
||||
4
.github/workflows/release-tag.yml
vendored
4
.github/workflows/release-tag.yml
vendored
@ -20,6 +20,6 @@ jobs:
|
||||
with:
|
||||
tag_name: ${{ github.ref }}
|
||||
body: |
|
||||
更新内容参见 [CHANGELOG](https://vant-ui.github.io/vant/#/zh-CN/changelog)。
|
||||
更新内容参见 [CHANGELOG](https://youzan.github.io/vant/#/zh-CN/changelog)。
|
||||
|
||||
Please refer to [CHANGELOG](https://vant-ui.github.io/vant/#/en-US/changelog) for details.
|
||||
Please refer to [CHANGELOG](https://youzan.github.io/vant/#/en-US/changelog) for details.
|
||||
|
||||
6
.github/workflows/sync-gitee.yml
vendored
6
.github/workflows/sync-gitee.yml
vendored
@ -2,9 +2,7 @@ name: Sync to Gitee
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [dev, 2.x, 3.x, gh-pages]
|
||||
|
||||
workflow_dispatch:
|
||||
branches: [dev, 2.x, gh-pages]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
@ -17,6 +15,6 @@ jobs:
|
||||
SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
|
||||
with:
|
||||
# GitHub 源仓库地址
|
||||
source-repo: git@github.com:vant-ui/vant.git
|
||||
source-repo: git@github.com:youzan/vant.git
|
||||
# Gitee 目标仓库地址
|
||||
destination-repo: git@gitee.com:vant-contrib/vant.git
|
||||
|
||||
23
.github/workflows/test.yml
vendored
23
.github/workflows/test.yml
vendored
@ -1,15 +1,6 @@
|
||||
name: CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- '**'
|
||||
|
||||
pull_request:
|
||||
branches:
|
||||
- dev
|
||||
|
||||
workflow_dispatch:
|
||||
on: [push, pull_request]
|
||||
|
||||
jobs:
|
||||
lint:
|
||||
@ -18,7 +9,9 @@ jobs:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- name: Install pnpm
|
||||
run: npm i pnpm@7 -g
|
||||
uses: pnpm/action-setup@v2.0.1
|
||||
with:
|
||||
version: 6.20.3
|
||||
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
@ -37,7 +30,9 @@ jobs:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- name: Install pnpm
|
||||
run: npm i pnpm@7 -g
|
||||
uses: pnpm/action-setup@v2.0.1
|
||||
with:
|
||||
version: 6.20.3
|
||||
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
@ -61,7 +56,9 @@ jobs:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- name: Install pnpm
|
||||
run: npm i pnpm@7 -g
|
||||
uses: pnpm/action-setup@v2.0.1
|
||||
with:
|
||||
version: 6.20.3
|
||||
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -15,5 +15,6 @@ package-lock.json
|
||||
es
|
||||
lib
|
||||
dist
|
||||
vetur
|
||||
**/site-dist
|
||||
changelog.generated.md
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
npx --no-install nano-staged
|
||||
npx --no-install lint-staged
|
||||
|
||||
2
.npmrc
2
.npmrc
@ -1,3 +1 @@
|
||||
registry=https://registry.npmmirror.com/
|
||||
|
||||
strict-peer-dependencies=false
|
||||
|
||||
3
.stylelintrc
Normal file
3
.stylelintrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": ["@vant/stylelint-config"]
|
||||
}
|
||||
5
LICENSE
5
LICENSE
@ -1,7 +1,4 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) Youzan
|
||||
Copyright (c) Chen Jiahan and other contributors
|
||||
Copyright 2016-present Youzan
|
||||
|
||||
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:
|
||||
|
||||
|
||||
46
README.md
46
README.md
@ -1,23 +1,24 @@
|
||||
<p align="center">
|
||||
<img alt="logo" src="https://fastly.jsdelivr.net/npm/@vant/assets/logo.png" width="120" height="120" style="margin-bottom: 10px;">
|
||||
<img alt="logo" src="https://img.yzcdn.cn/vant/logo.png" width="120" height="120" style="margin-bottom: 10px;">
|
||||
</p>
|
||||
|
||||
<h1 align="center">Vant</h1>
|
||||
|
||||
<p align="center">Lightweight Mobile UI Components built on Vue</p>
|
||||
<p align="center">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/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/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/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>
|
||||
|
||||
🌈 <a href="https://vant-ui.github.io/vant">文档网站（GitHub）</a>
|
||||
🌈 <a href="https://youzan.github.io/vant">文档网站（GitHub）</a>
|
||||
|
||||
🇨🇳 <a href="./README.zh-CN.md">中文版介绍</a>
|
||||
</p>
|
||||
@ -27,8 +28,7 @@
|
||||
## Features
|
||||
|
||||
- 🚀 1KB Component average size (min+gzip)
|
||||
- 🚀 70+ High quality components
|
||||
- 🚀 Zero third-party dependencies
|
||||
- 🚀 65+ High quality components
|
||||
- 💪 90%+ Unit test coverage
|
||||
- 💪 Written in TypeScript
|
||||
- 📖 Extensive documentation and demos
|
||||
@ -37,9 +37,8 @@
|
||||
- 🍭 Support Tree Shaking
|
||||
- 🍭 Support Custom Theme
|
||||
- 🍭 Support Accessibility (still improving)
|
||||
- 🍭 Support Dark Mode (Requires upgrade to [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/en-US/config-provider))
|
||||
- 🍭 Support SSR
|
||||
- 🌍 Support i18n, built-in 20+ languages
|
||||
- 🍭 Support i18n
|
||||
- 🌍 Support SSR
|
||||
|
||||
## Install
|
||||
|
||||
@ -67,34 +66,30 @@ 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://vant-ui.github.io/vant#/en-US/quickstart).
|
||||
See more in [Quickstart](https://youzan.github.io/vant#/en-US/quickstart).
|
||||
|
||||
## Browser Support
|
||||
|
||||
Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.
|
||||
|
||||
Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
|
||||
Vant 3 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
|
||||
|
||||
## Official Ecosystem
|
||||
|
||||
| Project | Description |
|
||||
| --- | --- |
|
||||
| [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/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 |
|
||||
| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI |
|
||||
| [vant-demo](https://github.com/youzan/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 |
|
||||
|
||||
## Community Ecosystem
|
||||
|
||||
@ -106,19 +101,18 @@ Vant 3/4 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3)
|
||||
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
|
||||
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
|
||||
| [@antmjs/vantui](https://github.com/antmjs/vantui) | Mobile UI Components based on Vant, supporting Taro and React |
|
||||
| [sfc-playground-vant](https://github.com/zhixiaoqiang/sfc-playground-vant) | Try Vant in the Playground. Currently only Vant 3+ is supported |
|
||||
|
||||
## Links
|
||||
|
||||
- [Documentation](https://vant-ui.github.io/vant)
|
||||
- [Changelog](https://vant-ui.github.io/vant#/en-US/changelog)
|
||||
- [Documentation](https://youzan.github.io/vant)
|
||||
- [Changelog](https://youzan.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
|
||||
|
||||
You can scan the following QR code to access the demo：
|
||||
|
||||
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/preview-qrcode.png" width="220" height="220" >
|
||||
<img src="https://img.yzcdn.cn/vant/preview_qrcode_20180528.png" width="220" height="220" >
|
||||
|
||||
## Core Team
|
||||
|
||||
@ -132,7 +126,7 @@ Core contributors of Vant and Vant Weapp:
|
||||
|
||||
Thanks to the following friends for their contributions to Vant:
|
||||
|
||||
<a href="https://github.com/vant-ui/vant/graphs/contributors">
|
||||
<a href="https://github.com/youzan/vant/graphs/contributors">
|
||||
<img src="https://opencollective.com/vant/contributors.svg?width=890&button=false" alt="contributors">
|
||||
</a>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<p align="center">
|
||||
<img alt="logo" src="https://fastly.jsdelivr.net/npm/@vant/assets/logo.png" width="120" style="margin-bottom: 10px;">
|
||||
<img alt="logo" src="https://img.yzcdn.cn/vant/logo.png" width="120" style="margin-bottom: 10px;">
|
||||
</p>
|
||||
|
||||
<h1 align="center">Vant</h1>
|
||||
@ -8,42 +8,41 @@
|
||||
|
||||
<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/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/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/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>
|
||||
|
||||
🌈 <a href="https://vant-ui.github.io/vant">文档网站（GitHub）</a>
|
||||
🌈 <a href="https://youzan.github.io/vant">文档网站（GitHub）</a>
|
||||
</p>
|
||||
|
||||
---
|
||||
|
||||
### 介绍
|
||||
|
||||
Vant 是一个**轻量、可靠的移动端组件库**，于 2017 年开源。
|
||||
Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
|
||||
|
||||
目前 Vant 官方提供了 [Vue 2 版本](https://vant-contrib.gitee.io/vant/v2)、[Vue 3 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/3lang3/react-vant)和[支付宝小程序版本](https://github.com/ant-move/Vant-Aliapp)。
|
||||
|
||||
## 特性
|
||||
|
||||
- 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
|
||||
- 🚀 70+ 个高质量组件，覆盖移动端主流场景
|
||||
- 🚀 零外部依赖，不依赖三方 npm 包
|
||||
- 🚀 65+ 个高质量组件，覆盖移动端主流场景
|
||||
- 💪 使用 TypeScript 编写，提供完整的类型定义
|
||||
- 💪 单元测试覆盖率超过 90%，提供稳定性保障
|
||||
- 📖 提供丰富的中英文文档和组件示例
|
||||
- 📖 提供完善的中英文文档和组件示例
|
||||
- 📖 提供 Sketch 和 Axure 设计资源
|
||||
- 🍭 支持 Vue 2、Vue 3 和微信小程序
|
||||
- 🍭 支持主题定制，内置 700+ 个主题变量
|
||||
- 🍭 支持按需引入和 Tree Shaking
|
||||
- 🍭 支持无障碍访问（持续改进中）
|
||||
- 🍭 支持深色模式（从 [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/zh-CN/config-provider) 开始支持）
|
||||
- 🍭 支持服务器端渲染
|
||||
- 🌍 支持国际化，内置 20+ 种语言包
|
||||
- 🌍 支持国际化和语言包定制
|
||||
|
||||
## 安装
|
||||
|
||||
@ -71,14 +70,10 @@ 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);
|
||||
```
|
||||
|
||||
@ -88,7 +83,7 @@ vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手
|
||||
|
||||
Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
|
||||
|
||||
Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。
|
||||
Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。
|
||||
|
||||
## 官方生态
|
||||
|
||||
@ -96,11 +91,11 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
|
||||
|
||||
| 项目 | 描述 |
|
||||
| --- | --- |
|
||||
| [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/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 的辅助库 |
|
||||
| [vant-weapp](https://github.com/youzan/vant-weapp) | Vant 微信小程序版 |
|
||||
| [vant-demo](https://github.com/youzan/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 的辅助库 |
|
||||
|
||||
## 社区生态
|
||||
|
||||
@ -114,7 +109,6 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
|
||||
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
|
||||
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
|
||||
| [@antmjs/vantui](https://github.com/antmjs/vantui) | 基于 Vant Weapp 开发的多端组件库，同时支持 Taro 和 React |
|
||||
| [sfc-playground-vant](https://github.com/zhixiaoqiang/sfc-playground-vant) | Vant Playground. 当前仅支持 Vant 3.0 以上 |
|
||||
|
||||
## 链接
|
||||
|
||||
@ -126,7 +120,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
|
||||
|
||||
可以手机扫码以下二维码访问手机端 demo：
|
||||
|
||||
<img src="https://fastly.jsdelivr.net/npm/@vant/assets/preview-qrcode.png" width="220" height="220" >
|
||||
<img src="https://img.yzcdn.cn/vant/preview_qrcode_20180528.png" width="220" height="220" >
|
||||
|
||||
## 核心团队
|
||||
|
||||
@ -140,7 +134,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
|
||||
|
||||
感谢以下小伙伴们为 Vant 发展做出的贡献：
|
||||
|
||||
<a href="https://github.com/vant-ui/vant/graphs/contributors">
|
||||
<a href="https://github.com/youzan/vant/graphs/contributors">
|
||||
<img src="https://opencollective.com/vant/contributors.svg?width=890&button=false" alt="contributors">
|
||||
</a>
|
||||
|
||||
@ -148,7 +142,7 @@ Vant 3/4 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一
|
||||
|
||||
修改代码请阅读我们的 [贡献指南](https://vant-contrib.gitee.io/vant/#/zh-CN/contribution)。
|
||||
|
||||
使用过程中发现任何问题都可以提 [Issue](https://github.com/vant-ui/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/vant-ui/vant/pulls)。
|
||||
使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
|
||||
|
||||
## 开源协议
|
||||
|
||||
|
||||
41
package.json
41
package.json
@ -2,36 +2,29 @@
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"prepare": "husky install",
|
||||
"dev": "pnpm --dir ./packages/vant dev",
|
||||
"lint": "pnpm --dir ./packages/vant lint",
|
||||
"test": "pnpm --dir ./packages/vant test",
|
||||
"test:watch": "pnpm --dir ./packages/vant test:watch",
|
||||
"build": "pnpm --dir ./packages/vant build",
|
||||
"build:site": "pnpm --dir ./packages/vant build:site"
|
||||
"dev": "pnpm dev --dir ./packages/vant",
|
||||
"lint": "pnpm lint --dir ./packages/vant",
|
||||
"test": "pnpm test --dir ./packages/vant",
|
||||
"test:watch": "pnpm test:watch --dir ./packages/vant",
|
||||
"build": "pnpm build --dir ./packages/vant",
|
||||
"build:site": "pnpm build:site --dir ./packages/vant"
|
||||
},
|
||||
"nano-staged": {
|
||||
"lint-staged": {
|
||||
"*.md": "prettier --write",
|
||||
"*.{ts,tsx,js,vue,less}": "prettier --write",
|
||||
"*.{ts,tsx,js,vue}": "eslint --fix"
|
||||
"*.{ts,tsx,js,vue}": "eslint --fix",
|
||||
"*.{vue,css,less}": "stylelint --fix"
|
||||
},
|
||||
"packageManager": "pnpm@7.11.0",
|
||||
"packageManager": "pnpm",
|
||||
"devDependencies": {
|
||||
"@vant/cli": "workspace:*",
|
||||
"@vant/eslint-config": "workspace:*",
|
||||
"eslint": "^8.23.0",
|
||||
"husky": "^8.0.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"
|
||||
]
|
||||
}
|
||||
"@vant/stylelint-config": "workspace:*",
|
||||
"eslint": "^8.2.0",
|
||||
"husky": "^7.0.4",
|
||||
"lint-staged": "^12.1.2",
|
||||
"prettier": "^2.5.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"stylelint": "^13.13.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
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.
|
||||
@ -15,17 +15,19 @@
|
||||
"build": "vant-cli build",
|
||||
"release": "vant-cli release",
|
||||
"test:coverage": "open test/coverage/index.html",
|
||||
"build-site": "vant-cli build-site && npx gh-pages -d site-dist"
|
||||
"build-site": "vant-cli build-site && gh-pages -d site-dist"
|
||||
},
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "nano-staged",
|
||||
"pre-commit": "lint-staged",
|
||||
"commit-msg": "vant-cli commit-lint"
|
||||
}
|
||||
},
|
||||
"nano-staged": {
|
||||
"*.{ts,tsx,js,jsx,vue}": "eslint --fix"
|
||||
"lint-staged": {
|
||||
"*.{ts,tsx,js,jsx,vue}": "eslint --fix",
|
||||
"*.{vue,css,less,scss}": "stylelint --fix"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.6.11",
|
||||
@ -33,6 +35,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vant/cli": "^2.0.0",
|
||||
"babel-plugin-import": "^1.13.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
@ -42,6 +45,11 @@
|
||||
"@vant"
|
||||
]
|
||||
},
|
||||
"stylelint": {
|
||||
"extends": [
|
||||
"@vant/stylelint-config"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true
|
||||
},
|
||||
|
||||
@ -10,7 +10,7 @@ module.exports = {
|
||||
},
|
||||
site: {
|
||||
title: '<%= name %>',
|
||||
logo: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
|
||||
logo: 'https://img.yzcdn.cn/vant/logo.png',
|
||||
nav: [
|
||||
{
|
||||
title: '开发指南',
|
||||
|
||||
@ -15,5 +15,6 @@ test/coverage
|
||||
es
|
||||
lib
|
||||
dist
|
||||
vetur
|
||||
site
|
||||
changelog.generated.md
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
npx --no-install nano-staged
|
||||
npx --no-install lint-staged
|
||||
|
||||
@ -17,15 +17,17 @@
|
||||
"build": "vant-cli build",
|
||||
"build:site": "vant-cli build-site",
|
||||
"release": "vant-cli release --tag next",
|
||||
"release:site": "pnpm build:site && npx gh-pages -d site-dist",
|
||||
"release:site": "pnpm build:site && gh-pages -d site-dist",
|
||||
"test:watch": "vant-cli test --watch",
|
||||
"test:coverage": "open test/coverage/index.html"
|
||||
},
|
||||
"author": "",
|
||||
"nano-staged": {
|
||||
"license": "MIT",
|
||||
"lint-staged": {
|
||||
"*.md": "prettier --write",
|
||||
"*.{ts,tsx,js,vue,less,scss}": "prettier --write",
|
||||
"*.{ts,tsx,js,vue}": "eslint --fix"
|
||||
"*.{ts,tsx,js,vue}": "eslint --fix",
|
||||
"*.{vue,css,less,scss}": "stylelint --fix"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
@ -41,6 +43,11 @@
|
||||
"@vant"
|
||||
]
|
||||
},
|
||||
"stylelint": {
|
||||
"extends": [
|
||||
"@vant/stylelint-config"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true
|
||||
},
|
||||
|
||||
@ -7,7 +7,3 @@
|
||||
<demo-button color="#03a9f4" style="margin-left: 15px">按钮</demo-button>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DemoButton from '../index.vue';
|
||||
</script>
|
||||
|
||||
@ -10,7 +10,7 @@ export default {
|
||||
},
|
||||
site: {
|
||||
title: '<%= name %>',
|
||||
logo: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
|
||||
logo: 'https://img.yzcdn.cn/vant/logo.png',
|
||||
nav: [
|
||||
{
|
||||
title: '开发指南',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "create-vant-cli-app",
|
||||
"version": "2.0.1",
|
||||
"description": "Create Vant CLI App",
|
||||
"version": "2.0.0",
|
||||
"description": "Create Vant Cli App",
|
||||
"main": "lib/index.js",
|
||||
"bin": {
|
||||
"create-vant-cli-app": "./lib/index.js"
|
||||
@ -24,24 +24,24 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/vant-ui/vant.git",
|
||||
"url": "https://github.com/youzan/vant.git",
|
||||
"directory": "packages/create-vant-cli-app"
|
||||
},
|
||||
"bugs": "https://github.com/vant-ui/vant/issues",
|
||||
"bugs": "https://github.com/youzan/vant/issues",
|
||||
"author": "chenjiahan",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@types/fs-extra": "^9.0.13",
|
||||
"@types/inquirer": "^8.2.3",
|
||||
"release-it": "^15.4.1",
|
||||
"typescript": "^4.8.2"
|
||||
"@types/inquirer": "^8.1.3",
|
||||
"release-it": "^14.11.6",
|
||||
"typescript": "~4.5.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.2",
|
||||
"consola": "^2.11.3",
|
||||
"fast-glob": "^3.2.11",
|
||||
"fs-extra": "^10.1.0",
|
||||
"inquirer": "^8.2.4",
|
||||
"picocolors": "^1.0.0"
|
||||
"fast-glob": "^3.2.4",
|
||||
"fs-extra": "^10.0.0",
|
||||
"inquirer": "^8.0.0"
|
||||
},
|
||||
"release-it": {
|
||||
"git": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import fs from 'fs-extra';
|
||||
import glob from 'fast-glob';
|
||||
import color from 'picocolors';
|
||||
import chalk from 'chalk';
|
||||
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 ${color.green(this.outputDir)}\n`);
|
||||
consola.info(`Creating project in ${chalk.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(`${color.green('create')} ${name}`);
|
||||
consola.success(`${chalk.green('create')} ${name}`);
|
||||
}
|
||||
|
||||
end() {
|
||||
const { name } = this.inputs;
|
||||
|
||||
console.log();
|
||||
consola.success(`Successfully created ${color.yellow(name)}.`);
|
||||
consola.success(`Successfully created ${chalk.yellow(name)}.`);
|
||||
consola.success(
|
||||
`Run ${color.yellow(
|
||||
`Run ${chalk.yellow(
|
||||
`cd ${name} && git init && yarn && yarn dev`
|
||||
)} to start development!`
|
||||
);
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
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.
|
||||
@ -1,6 +1,6 @@
|
||||
# Vant Area Data
|
||||
|
||||
中国省市区数据，适用于 Vant Area 组件。
|
||||
省市区数据，适用于 Vant Area 组件。
|
||||
|
||||
## 安装
|
||||
|
||||
@ -20,7 +20,3 @@ pnpm add @vant/area-data
|
||||
```ts
|
||||
import { areaList } from '@vant/area-data';
|
||||
```
|
||||
|
||||
## 数据更新
|
||||
|
||||
中国的行政区划每年都会有变动，如果发现省市区数据未及时更新，欢迎提 Pull Request 帮助我们更新。
|
||||
|
||||
@ -1,19 +1,10 @@
|
||||
{
|
||||
"name": "@vant/area-data",
|
||||
"version": "1.3.2",
|
||||
"version": "1.2.2",
|
||||
"description": "Vant 省市区数据",
|
||||
"main": "dist/index.cjs.js",
|
||||
"module": "dist/index.esm.mjs",
|
||||
"module": "dist/index.esm.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/index.esm.mjs",
|
||||
"require": "./dist/index.cjs.js"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"clean": "rimraf ./dist",
|
||||
"dev": "node ./build.js -w",
|
||||
@ -29,16 +20,16 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/vant-ui/vant.git",
|
||||
"url": "https://github.com/youzan/vant.git",
|
||||
"directory": "packages/vant-area-data"
|
||||
},
|
||||
"bugs": "https://github.com/vant-ui/vant/issues",
|
||||
"bugs": "https://github.com/youzan/vant/issues",
|
||||
"author": "chenjiahan",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"esbuild": "^0.14.54",
|
||||
"release-it": "^15.4.1",
|
||||
"typescript": "^4.8.2"
|
||||
"esbuild": "^0.14.21",
|
||||
"release-it": "^14.2.2",
|
||||
"typescript": "~4.5.2"
|
||||
},
|
||||
"release-it": {
|
||||
"git": {
|
||||
|
||||
@ -1150,10 +1150,10 @@ export const areaList = {
|
||||
232701: '漠河市',
|
||||
232721: '呼玛县',
|
||||
232722: '塔河县',
|
||||
232761: '加格达奇区',
|
||||
232762: '松岭区',
|
||||
232763: '新林区',
|
||||
232764: '呼中区',
|
||||
232790: '松岭区',
|
||||
232791: '呼中区',
|
||||
232792: '加格达奇区',
|
||||
232793: '新林区',
|
||||
310101: '黄浦区',
|
||||
310104: '徐汇区',
|
||||
310105: '长宁区',
|
||||
@ -1175,7 +1175,6 @@ export const areaList = {
|
||||
320105: '建邺区',
|
||||
320106: '鼓楼区',
|
||||
320111: '浦口区',
|
||||
320112: '江北新区',
|
||||
320113: '栖霞区',
|
||||
320114: '雨花台区',
|
||||
320115: '江宁区',
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
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.
|
||||
@ -1,40 +1,36 @@
|
||||
# Vant CLI
|
||||
# Vant Cli
|
||||
|
||||
Vant CLI is a tool for building vue component library. You can quickly build a full-featured Vue component library with vant-cli.
|
||||
Vant Cli 是一个 Vue 组件库构建工具，通过 Vant Cli 可以快速搭建一套功能完备的 Vue 组件库。
|
||||
|
||||
🇨🇳 <a href="./README.zh-CN.md">查看中文版介绍</a>
|
||||
### 特性
|
||||
|
||||
---
|
||||
- 提供丰富的命令，涵盖从开发测试到构建发布的完整流程
|
||||
- 基于约定的目录结构，自动生成优雅的文档站点和组件示例
|
||||
- 内置 ESlint、Stylelint 校验规则，提交代码时自动执行校验
|
||||
- 构建后的组件库默认支持按需引入、主题定制、Tree Shaking
|
||||
|
||||
### Features
|
||||
### 快速上手
|
||||
|
||||
- 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 built-in.
|
||||
- Support Tree Shaking/Theme Customization/Import on Demand
|
||||
|
||||
### Quickstart
|
||||
|
||||
To create a Vant CLI project, run:
|
||||
执行以下命令可以快速创建一个基于 Vant Cli 的项目：
|
||||
|
||||
```bash
|
||||
yarn create vant-cli-app
|
||||
```
|
||||
|
||||
### Install Manually
|
||||
### 手动安装
|
||||
|
||||
```shell
|
||||
# via npm
|
||||
# 通过 npm
|
||||
npm i @vant/cli -D
|
||||
|
||||
# via yarn
|
||||
# 通过 yarn
|
||||
yarn add @vant/cli -D
|
||||
|
||||
# via pnpm
|
||||
# 通过 pnpm
|
||||
pnpm add @vant/cli -D
|
||||
```
|
||||
|
||||
Please add the followed config to `package.json` file.
|
||||
安装完成后，请将以下配置添加到 package.json 文件中
|
||||
|
||||
```json
|
||||
{
|
||||
@ -47,15 +43,19 @@ Please add the followed config to `package.json` file.
|
||||
"release": "vant-cli release",
|
||||
"build-site": "vant-cli build-site"
|
||||
},
|
||||
"nano-staged": {
|
||||
"lint-staged": {
|
||||
"*.md": "prettier --write",
|
||||
"*.{ts,tsx,js,vue,less,scss}": "prettier --write",
|
||||
"*.{ts,tsx,js,vue}": "eslint --fix"
|
||||
"*.{ts,tsx,js,vue}": "eslint --fix",
|
||||
"*.{vue,css,less,scss}": "stylelint --fix"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"extends": ["@vant"]
|
||||
},
|
||||
"stylelint": {
|
||||
"extends": ["@vant/stylelint-config"]
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true
|
||||
},
|
||||
@ -63,9 +63,9 @@ Please add the followed config to `package.json` file.
|
||||
}
|
||||
```
|
||||
|
||||
## More Details
|
||||
## 详细文档
|
||||
|
||||
- [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)
|
||||
- [命令](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/commands.md)
|
||||
- [配置指南](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.md)
|
||||
- [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)
|
||||
- [更新日志](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md)
|
||||
|
||||
@ -1,68 +0,0 @@
|
||||
# Vant CLI
|
||||
|
||||
Vant CLI 是一个基于 Vite 实现的 Vue 组件库构建工具，通过 Vant CLI 可以快速搭建一套功能完备的 Vue 组件库。
|
||||
|
||||
### 特性
|
||||
|
||||
- 基于 Vite 实现，享受愉悦的开发体验
|
||||
- 提供丰富的命令，涵盖从开发测试到构建发布的完整流程
|
||||
- 基于约定的目录结构，自动生成优雅的文档站点和组件示例
|
||||
- 内置 ESLint 校验规则，提交代码时自动执行校验
|
||||
- 构建后的组件库默认支持按需引入、主题定制、Tree Shaking
|
||||
|
||||
### 快速上手
|
||||
|
||||
执行以下命令可以快速创建一个基于 Vant CLI 的项目：
|
||||
|
||||
```bash
|
||||
yarn create vant-cli-app
|
||||
```
|
||||
|
||||
### 手动安装
|
||||
|
||||
```shell
|
||||
# 通过 npm
|
||||
npm i @vant/cli -D
|
||||
|
||||
# 通过 yarn
|
||||
yarn add @vant/cli -D
|
||||
|
||||
# 通过 pnpm
|
||||
pnpm add @vant/cli -D
|
||||
```
|
||||
|
||||
安装完成后，请将以下配置添加到 package.json 文件中
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"dev": "vant-cli dev",
|
||||
"test": "vant-cli test",
|
||||
"lint": "vant-cli lint",
|
||||
"build": "vant-cli build",
|
||||
"prepare": "husky install",
|
||||
"release": "vant-cli release",
|
||||
"build-site": "vant-cli build-site"
|
||||
},
|
||||
"nano-staged": {
|
||||
"*.md": "prettier --write",
|
||||
"*.{ts,tsx,js,vue,less,scss}": "prettier --write",
|
||||
"*.{ts,tsx,js,vue}": "eslint --fix"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"extends": ["@vant"]
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true
|
||||
},
|
||||
"browserslist": ["Chrome >= 51", "iOS >= 10"]
|
||||
}
|
||||
```
|
||||
|
||||
## 详细文档
|
||||
|
||||
- [命令](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)
|
||||
@ -1,66 +1,5 @@
|
||||
# 更新日志
|
||||
|
||||
## 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`
|
||||
|
||||
- 修复编译 script setup 错误的问题
|
||||
|
||||
## v4.0.1
|
||||
|
||||
`2022-03-03`
|
||||
|
||||
- 支持复制示例代码到剪贴板
|
||||
- 修复官网更新日志的版本链接及 issue 链接异常的问题
|
||||
- 修复 ReDoS 安全问题
|
||||
|
||||
## v4.0.0
|
||||
|
||||
`2022-02-07`
|
||||
@ -71,7 +10,7 @@ yarn add stylelint@13 @vant/stylelint-config
|
||||
- 使用 vite 代替 webpack 进行构建，移除了所有 webpack 相关依赖
|
||||
- 使用 esbuild 进行代码转义和压缩
|
||||
- babel preset 添加了 `cjs` 后缀，现在需要通过 `@vant/cli/preset.cjs` 引入
|
||||
- vant.config.js 重命名为 `vant.config.mjs`，由 CommonJS 变更为 ESModule 格式
|
||||
- vant.config.js 重命名为 `vant.config.mjs`，由 commonJs 变更为 ESModule 格式
|
||||
- 站点构建产物的目录由 `site` 调整为 `site-dist`
|
||||
- 不再支持 webpack.config.js 配置文件
|
||||
- 不再支持 less import 语法中使用波浪号
|
||||
@ -443,15 +382,15 @@ yarn add sass
|
||||
|
||||
`2020-03-29`
|
||||
|
||||
- 优化网站导航栏在大屏上的适配 ([#5928](https://github.com/vant-ui/vant/pull/5928))
|
||||
- 优化网站导航栏在大屏上的适配 ([#5928](https://github.com/youzan/vant/pull/5928))
|
||||
|
||||
### v2.3.0
|
||||
|
||||
`2020-03-25`
|
||||
|
||||
- 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))
|
||||
- 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))
|
||||
- 升级 @vant/markdown-vetur 2.0.0
|
||||
|
||||
### v2.2.8
|
||||
@ -485,7 +424,7 @@ yarn add sass
|
||||
|
||||
`2020-02-14`
|
||||
|
||||
- 修复在 windows 上构建出的样式入口文件路径错误的问题 ([#5655](https://github.com/vant-ui/vant/pull/5655)
|
||||
- 修复在 windows 上构建出的样式入口文件路径错误的问题 ([#5655](https://github.com/youzan/vant/pull/5655)
|
||||
|
||||
### v2.2.3
|
||||
|
||||
@ -497,14 +436,14 @@ yarn add sass
|
||||
|
||||
`2020-02-05`
|
||||
|
||||
- 修复在 windows 上获取 markdown 路径错误的问题 ([#5626](https://github.com/vant-ui/vant/pull/5626))
|
||||
- 修复在 windows 上获取 markdown 路径错误的问题 ([#5626](https://github.com/youzan/vant/pull/5626))
|
||||
|
||||
### v2.2.1
|
||||
|
||||
`2020-02-04`
|
||||
|
||||
- 升级 babel@7.8
|
||||
- 修复切换版本时跳转 undefined 的问题 ([#5620](https://github.com/vant-ui/vant/pull/5620))
|
||||
- 修复切换版本时跳转 undefined 的问题 ([#5620](https://github.com/youzan/vant/pull/5620))
|
||||
|
||||
### v2.2.0
|
||||
|
||||
@ -532,7 +471,7 @@ yarn add sass
|
||||
|
||||
`2020-01-12`
|
||||
|
||||
- 支持自定义 PostCSS 配置
|
||||
- 支持自定义 Postcss 配置
|
||||
- 支持自定义 devServer 端口
|
||||
- 优化文档站点的 meta 字段
|
||||
- 新增 API 文档中的版本标签样式
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Plugin } from 'release-it';
|
||||
import { execSync } from 'child_process';
|
||||
const releaseIt = require('release-it');
|
||||
const { execSync } = require('child_process');
|
||||
|
||||
class VantCliReleasePlugin extends Plugin {
|
||||
class VantCliReleasePlugin extends releaseIt.Plugin {
|
||||
async beforeRelease() {
|
||||
// log an empty line
|
||||
console.log('');
|
||||
@ -11,4 +11,4 @@ class VantCliReleasePlugin extends Plugin {
|
||||
}
|
||||
}
|
||||
|
||||
export default VantCliReleasePlugin;
|
||||
module.exports = VantCliReleasePlugin;
|
||||
@ -1,6 +1,6 @@
|
||||
# Commands
|
||||
# 命令
|
||||
|
||||
You can add built-in commands to `npm scripts` to use it.
|
||||
Vant Cli 中内置了一系列的命令，可以将命令添加到 npm scripts 中进行使用。
|
||||
|
||||
```json
|
||||
// package.json
|
||||
@ -15,7 +15,7 @@ You can add built-in commands to `npm scripts` to use it.
|
||||
}
|
||||
```
|
||||
|
||||
Additionally, [npx](https://github.com/npm/npx) can used to be run those commands.
|
||||
也可以通过 npm 自带的 [npx](https://github.com/npm/npx) 直接执行某个命令：
|
||||
|
||||
```bash
|
||||
npx vant-cli dev
|
||||
@ -23,15 +23,17 @@ npx vant-cli dev
|
||||
|
||||
### dev
|
||||
|
||||
Start local dev server for browsering components and demo.
|
||||
运行本地开发环境。
|
||||
|
||||
运行 dev 命令时，Vant Cli 会通过启动一个本地服务器，用于在开发过程中对文档和示例进行预览。
|
||||
|
||||
### build
|
||||
|
||||
Build Vue component library.
|
||||
构建组件库。
|
||||
|
||||
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)
|
||||
运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，详见 [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)。
|
||||
|
||||
Please add the followed config to `package.json` when publish to npm.
|
||||
发布 npm 时，请将以下配置加入到 `package.json` 中，使 npm 包能被正确识别:
|
||||
|
||||
```json
|
||||
// package.json
|
||||
@ -44,19 +46,19 @@ Please add the followed config to `package.json` when publish to npm.
|
||||
|
||||
### build-site
|
||||
|
||||
Build documentation website. Files will be output to `site` directory.
|
||||
构建文档站点，在 `site` 目录生成可用于生产环境的文档站点代码。
|
||||
|
||||
### release
|
||||
|
||||
Publish to npm. `build` and `changelog` will be automatically execute when run `release`.
|
||||
发布组件库，发布前会自动执行 build 和 changelog 命令，并通过 [release-it](https://github.com/release-it/release-it) 发布 npm 包。
|
||||
|
||||
### changelog
|
||||
## changelog
|
||||
|
||||
Generate changelog based on commit records.
|
||||
基于 commit 记录生成更新日志，基于 [conventional-changelog](https://github.com/conventional-changelog/conventional-changelog) 实现。
|
||||
|
||||
### commit-lint
|
||||
## commit-lint
|
||||
|
||||
Validate the format of commit message. Need `husky` to do this.
|
||||
校验 commit message 的格式是否符合规范，需要配合 `husky` 在提交 commit 时触发。
|
||||
|
||||
```bash
|
||||
npx husky add .husky/commit-msg 'npx --no-install vant-cli commit-lint $1'
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
# 命令
|
||||
|
||||
Vant CLI 中内置了一系列的命令，可以将命令添加到 npm scripts 中进行使用。
|
||||
|
||||
```json
|
||||
// package.json
|
||||
{
|
||||
"scripts": {
|
||||
"dev": "vant-cli dev",
|
||||
"test": "vant-cli test",
|
||||
"lint": "vant-cli lint",
|
||||
"release": "vant-cli release",
|
||||
"build-site": "vant-cli build-site"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
也可以通过 npm 自带的 [npx](https://github.com/npm/npx) 直接执行某个命令：
|
||||
|
||||
```bash
|
||||
npx vant-cli dev
|
||||
```
|
||||
|
||||
### dev
|
||||
|
||||
运行本地开发环境。
|
||||
|
||||
运行 dev 命令时，Vant CLI 会通过启动一个本地服务器，用于在开发过程中对文档和示例进行预览。
|
||||
|
||||
### build
|
||||
|
||||
构建组件库。
|
||||
|
||||
运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，详见 [目录结构](https://github.com/vant-ui/vant/tree/dev/packages/vant-cli/docs/directory.zh-CN.md)。
|
||||
|
||||
发布 npm 时，请将以下配置加入到 `package.json` 中，使 npm 包能被正确识别:
|
||||
|
||||
```json
|
||||
// package.json
|
||||
{
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
"files": ["es", "lib"]
|
||||
}
|
||||
```
|
||||
|
||||
### build-site
|
||||
|
||||
构建文档站点，在 `site` 目录生成可用于生产环境的文档站点代码。
|
||||
|
||||
### release
|
||||
|
||||
发布组件库，发布前会自动执行 build 和 changelog 命令，并通过 [release-it](https://github.com/release-it/release-it) 发布 npm 包。
|
||||
|
||||
### changelog
|
||||
|
||||
基于 commit 记录生成更新日志，基于 [conventional-changelog](https://github.com/conventional-changelog/conventional-changelog) 实现。
|
||||
|
||||
### commit-lint
|
||||
|
||||
校验 commit message 的格式是否符合规范，需要配合 `husky` 在提交 commit 时触发。
|
||||
|
||||
```bash
|
||||
npx husky add .husky/commit-msg 'npx --no-install vant-cli commit-lint $1'
|
||||
```
|
||||
@ -1,6 +1,6 @@
|
||||
# Config
|
||||
# 配置指南
|
||||
|
||||
- [Config](#----)
|
||||
- [配置指南](#----)
|
||||
- [vant.config.mjs](#vantconfigmjs)
|
||||
- [name](#name)
|
||||
- [build.css.base](#buildcssbase)
|
||||
@ -21,49 +21,49 @@
|
||||
- [site.simulator.url](#sitesimulatorurl)
|
||||
- [site.htmlMeta](#sitehtmlmeta)
|
||||
- [site.enableVConsole](#siteenablevconsole)
|
||||
- [PostCSS](#postcss)
|
||||
- [Default Config](#-----1)
|
||||
- [Postcss](#postcss)
|
||||
- [默认配置](#-----1)
|
||||
- [browserslist](#browserslist)
|
||||
|
||||
## vant.config.mjs
|
||||
|
||||
`vant.config.mjs` includes bundle and documentation site config. Please create this file and place it in your project root directory. Here is a basic example:
|
||||
`vant.config.mjs` 中包含了 `vant-cli` 的打包配置和文档站点配置，请创建此文件并置于项目根目录下。下面是一份基本配置的示例：
|
||||
|
||||
```js
|
||||
export default {
|
||||
// component library name
|
||||
// 组件库名称
|
||||
name: 'demo-ui',
|
||||
// bundle config
|
||||
// 构建配置
|
||||
build: {
|
||||
site: {
|
||||
publicPath: '/demo-ui/',
|
||||
},
|
||||
},
|
||||
// documentation site config
|
||||
// 文档站点配置
|
||||
site: {
|
||||
// title
|
||||
// 标题
|
||||
title: 'Demo UI',
|
||||
// logo
|
||||
logo: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
|
||||
// description
|
||||
// 图标
|
||||
logo: 'https://img.yzcdn.cn/vant/logo.png',
|
||||
// 描述
|
||||
description: '示例组件库',
|
||||
// left nav
|
||||
// 左侧导航
|
||||
nav: [
|
||||
{
|
||||
title: 'example',
|
||||
title: '开发指南',
|
||||
items: [
|
||||
{
|
||||
path: 'home',
|
||||
title: 'home',
|
||||
title: '介绍',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'basic components',
|
||||
title: '基础组件',
|
||||
items: [
|
||||
{
|
||||
path: 'my-button',
|
||||
title: 'MyButton',
|
||||
title: 'MyButton 按钮',
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -77,16 +77,16 @@ export default {
|
||||
- Type: `string`
|
||||
- Default: `''`
|
||||
|
||||
Component library name. kebab-case recommended.
|
||||
组件库名称，建议使用中划线分割，如 `demo-ui`。
|
||||
|
||||
### build.css.base
|
||||
|
||||
- Type: `string`
|
||||
- Default: `'style/base.less'`
|
||||
|
||||
Global style file path. Support absolute path and relative path both.
|
||||
全局样式文件的路径，可以为相对路径或绝对路径。
|
||||
|
||||
Note: relative path is calculated based on `src`.
|
||||
相对路径基于 `src` 目录计算。
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
@ -103,7 +103,7 @@ module.exports = {
|
||||
- Type: `string`
|
||||
- Default: `'less'`
|
||||
|
||||
CSS preprocessor config, support `less` and `sass`. Use `less` by default.
|
||||
CSS 预处理器配置，目前支持 `less` 和 `sass` 两种预处理器，默认使用 `less`。
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
@ -115,31 +115,14 @@ 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`
|
||||
- Default: `/`
|
||||
|
||||
Equivalent to vite `build.outDir`.
|
||||
等价于 vite 的 `build.outDir` 配置。
|
||||
|
||||
Generally, documentation site will be deployed to subpath of domain. For example: `https://my.github.io/demo-ui/`, `publicPath` should be `/demo-ui/`.
|
||||
一般来说，我们的文档网站会部署在一个域名的子路径上，如 `https://my.github.io/demo-ui/`，这时候 `publicPath` 需要跟子路径保持一致，即 `/demo-ui/`。
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
@ -169,24 +152,24 @@ module.exports = {
|
||||
- Type: `boolean`
|
||||
- Default: `false`
|
||||
|
||||
Should export components by Named Export.
|
||||
是否通过 Named Export 对组件进行导出。
|
||||
|
||||
When set to `false`, `export default from 'xxx'` will be used to export module.
|
||||
未开启此选项时，会通过 `export default from 'xxx'` 导出组件内部的默认模块。
|
||||
|
||||
When set to `true`, `export * from 'xxx'` will be used to export all modules and type definition.
|
||||
开启此选项后，会通过 `export * from 'xxx'` 导出组件内部的所有模块、类型定义。
|
||||
|
||||
### build.configureVite
|
||||
|
||||
- Type: `(config: InlineConfig): InlineConfig`
|
||||
- Default: `undefined`
|
||||
|
||||
Custom vite config(`@vant/cli>= 4.0.0`)
|
||||
vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 vite 配置（从 4.0.0 版本开始支持）。
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
build: {
|
||||
configureVite(config) {
|
||||
// add vite plugin
|
||||
// 添加一个自定义插件
|
||||
config.plugins.push(vitePluginXXX);
|
||||
return config;
|
||||
},
|
||||
@ -194,6 +177,8 @@ module.exports = {
|
||||
};
|
||||
```
|
||||
|
||||
在自定义配置时，可以通过 `process.env.BUILD_TARGET` 对构建目标进行区分：
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
build: {
|
||||
@ -201,11 +186,11 @@ module.exports = {
|
||||
const { BUILD_TARGET } = process.env;
|
||||
|
||||
if (BUILD_TARGET === 'package') {
|
||||
// component library bundle config
|
||||
// 修改组件库构建配置
|
||||
}
|
||||
|
||||
if (BUILD_TARGET === 'site') {
|
||||
// documentation site bundle config
|
||||
// 修改文档站点构建配置
|
||||
}
|
||||
|
||||
return config;
|
||||
@ -219,90 +204,51 @@ module.exports = {
|
||||
- Type: `'npm' | 'yarn' | 'pnpm'`
|
||||
- Default: `undefined`
|
||||
|
||||
`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`
|
||||
- Default: `''`
|
||||
|
||||
Documentation site title.
|
||||
文档站点的标题。
|
||||
|
||||
### site.logo
|
||||
|
||||
- Type: `string`
|
||||
- Default: `''`
|
||||
|
||||
Documentation site logo.
|
||||
文档站点的 Logo。
|
||||
|
||||
### site.description
|
||||
|
||||
- Type: `string`
|
||||
- Default: `''`
|
||||
|
||||
Documentation site description.
|
||||
标题下方的描述文案。
|
||||
|
||||
### site.nav
|
||||
|
||||
- Type: `object[]`
|
||||
- Default: `undefined`
|
||||
|
||||
Documentation site left nav. Each item of `nav` means a navigation group.
|
||||
文档站点的左侧导航，数组中的每个对象表示一个导航分组。
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
site: {
|
||||
nav: [
|
||||
{
|
||||
// group title
|
||||
title: 'Development Guide',
|
||||
// nav items
|
||||
// 分组标题
|
||||
title: '开发指南',
|
||||
// 导航项
|
||||
items: [
|
||||
{
|
||||
// nav router
|
||||
// 导航项路由
|
||||
path: 'home',
|
||||
// nav title
|
||||
title: 'title',
|
||||
// should hide phone emulator(false by default)
|
||||
// 导航项文案
|
||||
title: '介绍',
|
||||
// 是否隐藏当前页右侧的手机模拟器（默认不隐藏）
|
||||
hideSimulator: true,
|
||||
},
|
||||
],
|
||||
@ -317,7 +263,7 @@ module.exports = {
|
||||
- Type: `object[]`
|
||||
- Default: `undefined`
|
||||
|
||||
Documentation site muti-version config.
|
||||
文档站点多版本配置，当组件库存在多个版本的文档时，可以通过`site.versions`在顶部导航配置一个版本切换按钮。
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
@ -325,7 +271,7 @@ module.exports = {
|
||||
versions: [
|
||||
{
|
||||
label: 'v1',
|
||||
link: 'https://vant-ui.github.io/vant/v1/',
|
||||
link: 'https://youzan.github.io/vant/v1/',
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -335,17 +281,17 @@ module.exports = {
|
||||
### site.baiduAnalytics
|
||||
|
||||
- Type: `object`
|
||||
- Default: `undefined`
|
||||
- Default: `undefied`
|
||||
|
||||
Documentation site baidu analysis config. The script of Baidu Statistic will be automatically loaded when build documentation website.
|
||||
文档网站的百度统计配置，添加这项配置后，会自动在构建文档网站时加载百度统计的脚本。
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
site: {
|
||||
baiduAnalytics: {
|
||||
// 打开百度统计 ->『管理』->『代码获取』
|
||||
// find the followed URL: "https://hm.baidu.com/hm.js?xxxxx"
|
||||
// add `xxxxx` in the seed
|
||||
// 找到下面这串 URL: "https://hm.baidu.com/hm.js?xxxxx"
|
||||
// 将 `xxxxx` 填写在 seed 中即可
|
||||
seed: 'xxxxx',
|
||||
},
|
||||
},
|
||||
@ -357,50 +303,45 @@ module.exports = {
|
||||
- Type: `object`
|
||||
- Default: `undefined`
|
||||
|
||||
Documentation site search config. Based on [docsearch](https://docsearch.algolia.com/docs/behavior) of algolia.
|
||||
文档网站的搜索配置，基于 algolia 提供的 docsearch 服务实现。
|
||||
|
||||
配置内容参见 [docsearch](https://docsearch.algolia.com/docs/behavior)。
|
||||
|
||||
### site.hideSimulator
|
||||
|
||||
- Type: `boolean`
|
||||
- Default: `false`
|
||||
|
||||
Should hide phone emulator, `false` by default.
|
||||
是否隐藏所有页面右侧的手机模拟器，默认不隐藏
|
||||
|
||||
### site.simulator.url
|
||||
|
||||
- Type: `string`
|
||||
- Default: -
|
||||
|
||||
Customize iframe URL.
|
||||
自定义手机模拟器的 iframe URL 地址。
|
||||
|
||||
### site.htmlMeta
|
||||
|
||||
- Type: `Record<string, string>`
|
||||
- Default: `undefined`
|
||||
|
||||
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.
|
||||
配置 HTML 中的 meta 标签，对象的 key 为 name，value 为 content。
|
||||
|
||||
### site.enableVConsole
|
||||
|
||||
- Type: `boolean`
|
||||
- Default: `false`
|
||||
|
||||
Whether to enable [vConsole](https://github.com/Tencent/vConsole) debugging in dev, usually used for mobile debugging.
|
||||
是否在 dev 时开启 [vConsole](https://github.com/Tencent/vConsole) 调试，用于移动端 debug。
|
||||
|
||||
## PostCSS
|
||||
## Postcss
|
||||
|
||||
PostCSS can be configured through the `postcss.config.js` file in the root directory.
|
||||
通过根目录下的`postcss.config.js`文件可以对 Postcss 进行配置。
|
||||
|
||||
### Default Config
|
||||
### 默认配置
|
||||
|
||||
PostCSS default config:
|
||||
`vant-cli` 中默认的 Postcss 配置如下：
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
@ -412,9 +353,9 @@ module.exports = {
|
||||
|
||||
## browserslist
|
||||
|
||||
Add browserslist field to `package.json` file is recommended. It's used by `autoprefixer` to determine the version of target browser, ensuring compatibility of compiled code.
|
||||
推荐在 `package.json` 文件里添加 browserslist 字段，这个值会被 `autoprefixer` 用来确定目标浏览器的版本，保证编译后代码的兼容性。
|
||||
|
||||
You can add the following config for mobile:
|
||||
在移动端浏览器中使用，可以添加如下配置：
|
||||
|
||||
```json
|
||||
{
|
||||
|
||||
@ -1,427 +0,0 @@
|
||||
# 配置指南
|
||||
|
||||
- [配置指南](#----)
|
||||
- [vant.config.mjs](#vantconfigmjs)
|
||||
- [name](#name)
|
||||
- [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)
|
||||
- [site.nav](#sitenav)
|
||||
- [site.versions](#siteversions)
|
||||
- [site.baiduAnalytics](#sitebaiduanalytics)
|
||||
- [site.searchConfig](#sitesearchconfig)
|
||||
- [site.hideSimulator](#sitehidesimulator)
|
||||
- [site.simulator.url](#sitesimulatorurl)
|
||||
- [site.htmlMeta](#sitehtmlmeta)
|
||||
- [site.enableVConsole](#siteenablevconsole)
|
||||
- [PostCSS](#postcss)
|
||||
- [默认配置](#-----1)
|
||||
- [browserslist](#browserslist)
|
||||
|
||||
## vant.config.mjs
|
||||
|
||||
`vant.config.mjs` 中包含了 `vant-cli` 的打包配置和文档站点配置，请创建此文件并置于项目根目录下。下面是一份基本配置的示例：
|
||||
|
||||
```js
|
||||
export default {
|
||||
// 组件库名称
|
||||
name: 'demo-ui',
|
||||
// 构建配置
|
||||
build: {
|
||||
site: {
|
||||
publicPath: '/demo-ui/',
|
||||
},
|
||||
},
|
||||
// 文档站点配置
|
||||
site: {
|
||||
// 标题
|
||||
title: 'Demo UI',
|
||||
// 图标
|
||||
logo: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
|
||||
// 描述
|
||||
description: '示例组件库',
|
||||
// 左侧导航
|
||||
nav: [
|
||||
{
|
||||
title: '开发指南',
|
||||
items: [
|
||||
{
|
||||
path: 'home',
|
||||
title: '介绍',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '基础组件',
|
||||
items: [
|
||||
{
|
||||
path: 'my-button',
|
||||
title: 'MyButton 按钮',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### name
|
||||
|
||||
- Type: `string`
|
||||
- Default: `''`
|
||||
|
||||
组件库名称，建议使用中划线分割，如 `demo-ui`。
|
||||
|
||||
### build.css.base
|
||||
|
||||
- Type: `string`
|
||||
- Default: `'style/base.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 = {
|
||||
build: {
|
||||
css: {
|
||||
preprocessor: 'sass',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### build.css.removeSourceFile
|
||||
|
||||
- Type: `boolean`
|
||||
- Default: `'false'`
|
||||
|
||||
是否在构建后移除样式文件的源代码。
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
build: {
|
||||
css: {
|
||||
removeSourceFile: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### build.site.publicPath
|
||||
|
||||
- Type: `string`
|
||||
- Default: `/`
|
||||
|
||||
等价于 vite 的 `build.outDir` 配置。
|
||||
|
||||
一般来说，我们的文档网站会部署在一个域名的子路径上，如 `https://my.github.io/demo-ui/`，这时候 `publicPath` 需要跟子路径保持一致，即 `/demo-ui/`。
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
build: {
|
||||
site: {
|
||||
publicPath: '/demo-ui/',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### build.srcDir
|
||||
|
||||
- Type: `string`
|
||||
- Default: `src`
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
build: {
|
||||
srcDir: 'myDir',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### build.namedExport
|
||||
|
||||
- Type: `boolean`
|
||||
- Default: `false`
|
||||
|
||||
是否通过 Named Export 对组件进行导出。
|
||||
|
||||
未开启此选项时，会通过 `export default from 'xxx'` 导出组件内部的默认模块。
|
||||
|
||||
开启此选项后，会通过 `export * from 'xxx'` 导出组件内部的所有模块、类型定义。
|
||||
|
||||
### build.configureVite
|
||||
|
||||
- Type: `(config: InlineConfig): InlineConfig`
|
||||
- Default: `undefined`
|
||||
|
||||
vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 vite 配置（从 4.0.0 版本开始支持）。
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
build: {
|
||||
configureVite(config) {
|
||||
// 添加一个自定义插件
|
||||
config.plugins.push(vitePluginXXX);
|
||||
return config;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
在自定义配置时，可以通过 `process.env.BUILD_TARGET` 对构建目标进行区分：
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
build: {
|
||||
configureVite(config) {
|
||||
const { BUILD_TARGET } = process.env;
|
||||
|
||||
if (BUILD_TARGET === 'package') {
|
||||
// 修改组件库构建配置
|
||||
}
|
||||
|
||||
if (BUILD_TARGET === 'site') {
|
||||
// 修改文档站点构建配置
|
||||
}
|
||||
|
||||
return config;
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### build.packageManager
|
||||
|
||||
- Type: `'npm' | 'yarn' | 'pnpm'`
|
||||
- Default: `undefined`
|
||||
|
||||
指定使用的包管理器。
|
||||
|
||||
### 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`
|
||||
- Default: `''`
|
||||
|
||||
文档站点的标题。
|
||||
|
||||
### site.logo
|
||||
|
||||
- Type: `string`
|
||||
- Default: `''`
|
||||
|
||||
文档站点的 Logo。
|
||||
|
||||
### site.description
|
||||
|
||||
- Type: `string`
|
||||
- Default: `''`
|
||||
|
||||
标题下方的描述文案。
|
||||
|
||||
### site.nav
|
||||
|
||||
- Type: `object[]`
|
||||
- Default: `undefined`
|
||||
|
||||
文档站点的左侧导航，数组中的每个对象表示一个导航分组。
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
site: {
|
||||
nav: [
|
||||
{
|
||||
// 分组标题
|
||||
title: '开发指南',
|
||||
// 导航项
|
||||
items: [
|
||||
{
|
||||
// 导航项路由
|
||||
path: 'home',
|
||||
// 导航项文案
|
||||
title: '介绍',
|
||||
// 是否隐藏当前页右侧的手机模拟器（默认不隐藏）
|
||||
hideSimulator: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### site.versions
|
||||
|
||||
- Type: `object[]`
|
||||
- Default: `undefined`
|
||||
|
||||
文档站点多版本配置，当组件库存在多个版本的文档时，可以通过`site.versions`在顶部导航配置一个版本切换按钮。
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
site: {
|
||||
versions: [
|
||||
{
|
||||
label: 'v1',
|
||||
link: 'https://vant-ui.github.io/vant/v1/',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### site.baiduAnalytics
|
||||
|
||||
- Type: `object`
|
||||
- Default: `undefined`
|
||||
|
||||
文档网站的百度统计配置，添加这项配置后，会自动在构建文档网站时加载百度统计的脚本。
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
site: {
|
||||
baiduAnalytics: {
|
||||
// 打开百度统计 ->『管理』->『代码获取』
|
||||
// 找到下面这串 URL: "https://hm.baidu.com/hm.js?xxxxx"
|
||||
// 将 `xxxxx` 填写在 seed 中即可
|
||||
seed: 'xxxxx',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### site.searchConfig
|
||||
|
||||
- Type: `object`
|
||||
- Default: `undefined`
|
||||
|
||||
文档网站的搜索配置，基于 algolia 提供的 docsearch 服务实现。
|
||||
|
||||
配置内容参见 [docsearch](https://docsearch.algolia.com/docs/behavior)。
|
||||
|
||||
### site.hideSimulator
|
||||
|
||||
- Type: `boolean`
|
||||
- Default: `false`
|
||||
|
||||
是否隐藏所有页面右侧的手机模拟器，默认不隐藏
|
||||
|
||||
### site.simulator.url
|
||||
|
||||
- Type: `string`
|
||||
- Default: -
|
||||
|
||||
自定义手机模拟器的 iframe URL 地址。
|
||||
|
||||
### site.htmlMeta
|
||||
|
||||
- Type: `Record<string, string>`
|
||||
- Default: `undefined`
|
||||
|
||||
配置 HTML 中的 meta 标签，对象的 key 为 name，value 为 content。
|
||||
|
||||
### site.headHtml
|
||||
|
||||
- Type: `string`
|
||||
- Default: `undefined`
|
||||
|
||||
在 `<head>` 标签中插入一段自定义的 HTML 内容。
|
||||
|
||||
### site.enableVConsole
|
||||
|
||||
- Type: `boolean`
|
||||
- Default: `false`
|
||||
|
||||
是否在 dev 时开启 [vConsole](https://github.com/Tencent/vConsole) 调试，用于移动端 debug。
|
||||
|
||||
## PostCSS
|
||||
|
||||
通过根目录下的`postcss.config.js`文件可以对 PostCSS 进行配置。
|
||||
|
||||
### 默认配置
|
||||
|
||||
`vant-cli` 中默认的 PostCSS 配置如下：
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## browserslist
|
||||
|
||||
推荐在 `package.json` 文件里添加 browserslist 字段，这个值会被 `autoprefixer` 用来确定目标浏览器的版本，保证编译后代码的兼容性。
|
||||
|
||||
在移动端浏览器中使用，可以添加如下配置：
|
||||
|
||||
```json
|
||||
{
|
||||
"browserslist": ["Chrome >= 51", "iOS >= 10"]
|
||||
}
|
||||
```
|
||||
@ -1,91 +1,91 @@
|
||||
# Directory Structure
|
||||
# 目录结构
|
||||
|
||||
## Source Code Directory
|
||||
## 源代码目录
|
||||
|
||||
The basic directory structure of the component library based on Vant CLI is as follows:
|
||||
基于 Vant Cli 搭建的组件库的基本目录结构如下所示：
|
||||
|
||||
```
|
||||
project
|
||||
├─ src # component library source code
|
||||
│ ├─ button # button source code
|
||||
│ └─ dialog # dialog source code
|
||||
├─ src # 组件源代码
|
||||
│ ├─ button # button 组件源代码
|
||||
│ └─ dialog # dialog 组件源代码
|
||||
│
|
||||
├─ docs # static doc directory
|
||||
│ ├─ home.md # documentation site home
|
||||
│ └─ changelog.md # changelog
|
||||
├─ docs # 静态文档目录
|
||||
│ ├─ home.md # 文档首页
|
||||
│ └─ changelog.md # 更新日志
|
||||
│
|
||||
├─ vant.config.mjs # Vant CLI config file
|
||||
├─ vant.config.mjs # Vant Cli 配置文件
|
||||
├─ package.json
|
||||
└─ README.md
|
||||
```
|
||||
|
||||
The directories for individual components are as follows:
|
||||
单个组件的目录如下：
|
||||
|
||||
```
|
||||
button
|
||||
├─ demo # component demo directory
|
||||
│ └─ index.vue # component demo
|
||||
├─ index.vue # component source code
|
||||
└─ README.md # component doc
|
||||
├─ demo # 示例目录
|
||||
│ └─ index.vue # 组件示例
|
||||
├─ index.vue # 组件源码
|
||||
└─ README.md # 组件文档
|
||||
```
|
||||
|
||||
When writing SFC, the corresponding JS and CSS files will be generated after bundle process, and the CSS file will be automatically imported into the JS file.
|
||||
使用 .vue 文件编写组件时，编译后会生成对应的 JS 和 CSS 文件，且 JS 文件中会自动引入 CSS 文件。
|
||||
|
||||
If you need to separate JS and CSS to implement functions such as theme customization, you need to use separate JS and CSS files when writing code, as shown below:
|
||||
如果需要将 JS 和 CSS 解耦，实现主题定制等功能，在编写代码时就要使用独立的 JS 和 CSS 文件，如下所示：
|
||||
|
||||
```
|
||||
button
|
||||
├─ demo # component demo directory
|
||||
│ └─ index.vue # component demo entry
|
||||
├─ index.js # component entry
|
||||
├─ index.less # component style，support scss and less
|
||||
└─ README.md # component doc
|
||||
├─ demo # 组件示例
|
||||
│ └─ index.vue # 组件示例入口
|
||||
├─ index.js # 组件入口
|
||||
├─ index.less # 组件样式，可以为 less 或 scss
|
||||
└─ README.md # 组件文档
|
||||
```
|
||||
|
||||
When using this directory structure, the developer of the component library needs to import the JS and CSS files respectively.
|
||||
采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件，也可以通过 babel-plugin-import 自动引入样式。
|
||||
|
||||
Theme customization can be achieved by importing style source files (less or scss) and modifying style variables.
|
||||
通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。
|
||||
|
||||
## Output Directory
|
||||
## 构建结果目录
|
||||
|
||||
Running the `build` command will generate production code in the `es` and `lib` directories with the following structure:
|
||||
运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，结构如下：
|
||||
|
||||
```
|
||||
project
|
||||
├─ es # ESM Directory
|
||||
│ ├─ button # button component directory
|
||||
│ ├─ dialog # dialog component directory
|
||||
│ └─ index.js # All component files entry (ESModule)
|
||||
├─ es # es 目录下的代码遵循 esmodule 规范
|
||||
│ ├─ button # button 组件编译后的代码目录
|
||||
│ ├─ dialog # dialog 组件编译后的代码目录
|
||||
│ └─ index.js # 引入所有组件的入口 (ESModule)
|
||||
│
|
||||
└─ lib # Commonjs directory
|
||||
├─ button # button component library
|
||||
├─ dialog # dialog component library
|
||||
├─ index.js # All component files entry (Commonjs)
|
||||
├─ index.less # All component styles entry(Uncompiled)
|
||||
├─ index.css # Bundle component styles for CDN
|
||||
├─ [name].js # Bundle script for UMD
|
||||
├─ [name].es.js # Bundle script for ESM
|
||||
├─ [name].min.js # Bundle and minified script for UMD
|
||||
└─ [name].es.min.js # Bundle and minified script for ESM
|
||||
└─ lib # lib 目录下的代码遵循 commonjs 规范
|
||||
├─ button # button 组件编译后的代码目录
|
||||
├─ dialog # dialog 组件编译后的代码目录
|
||||
├─ index.js # 引入所有组件的入口
|
||||
├─ index.less # 所有组件未编译的样式入口
|
||||
├─ index.css # 打包后的组件样式，用于 CDN 引入
|
||||
├─ [name].js # 打包后的组件脚本，UMD 格式
|
||||
├─ [name].es.js # 打包后的组件脚本，ESModule 格式
|
||||
├─ [name].min.js # 打包和压缩后的组件脚本，UMD 格式
|
||||
└─ [name].es.min.js # 打包和压缩后的组件脚本，ESModule 格式
|
||||
```
|
||||
|
||||
The compiled directory of a single component is as follows:
|
||||
单个组件编译后的目录如下：
|
||||
|
||||
```
|
||||
button
|
||||
├─ index.js # Bundle script file
|
||||
├─ index.css # Bundle CSS file
|
||||
├─ index.less # Uncompiled CSS file, less or scss
|
||||
└─ style # Style entry on demand directory
|
||||
├─ index.js # Compiled styles on demand
|
||||
└─ less.js # Uncompiled styles on demand, for theme customization
|
||||
├─ index.js # 组件编译后的 JS 文件
|
||||
├─ index.css # 组件编译后的 CSS 文件
|
||||
├─ index.less # 组件编译前的 CSS 文件，可以为 less 或 scss
|
||||
└─ style # 按需引入样式的入口
|
||||
├─ index.js # 按需引入编译后的样式
|
||||
└─ less.js # 按需引入未编译的样式，可用于主题定制
|
||||
```
|
||||
|
||||
### Generate type definition
|
||||
### 生成类型声明
|
||||
|
||||
When the component library is written in TS and the `tsconfig.declaration.json` file exists in the root directory, Vant CLI will automatically generate the `.d.ts` type declaration file.
|
||||
当组件库使用 TS 编写，且根目录下存在 `tsconfig.declaration.json` 文件，Vant Cli 会自动生成 `.d.ts` 类型声明文件。
|
||||
|
||||
The format of `tsconfig.declaration.json` is as follows:
|
||||
`tsconfig.declaration.json` 的参考格式如下：
|
||||
|
||||
```json
|
||||
{
|
||||
@ -100,7 +100,7 @@ The format of `tsconfig.declaration.json` is as follows:
|
||||
}
|
||||
```
|
||||
|
||||
Please add the `typings` field in `package.json` after generate type declaration:
|
||||
成功生成类型声明后，请在 `package.json` 中添加类型入口声明：
|
||||
|
||||
```json
|
||||
{
|
||||
|
||||
@ -1,109 +0,0 @@
|
||||
# 目录结构
|
||||
|
||||
## 源代码目录
|
||||
|
||||
基于 Vant CLI 搭建的组件库的基本目录结构如下所示：
|
||||
|
||||
```
|
||||
project
|
||||
├─ src # 组件源代码
|
||||
│ ├─ button # button 组件源代码
|
||||
│ └─ dialog # dialog 组件源代码
|
||||
│
|
||||
├─ docs # 静态文档目录
|
||||
│ ├─ home.md # 文档首页
|
||||
│ └─ changelog.md # 更新日志
|
||||
│
|
||||
├─ vant.config.mjs # Vant CLI 配置文件
|
||||
├─ package.json
|
||||
└─ README.md
|
||||
```
|
||||
|
||||
单个组件的目录如下：
|
||||
|
||||
```
|
||||
button
|
||||
├─ demo # 示例目录
|
||||
│ └─ index.vue # 组件示例
|
||||
├─ index.vue # 组件源码
|
||||
└─ README.md # 组件文档
|
||||
```
|
||||
|
||||
使用 .vue 文件编写组件时，编译后会生成对应的 JS 和 CSS 文件，且 JS 文件中会自动引入 CSS 文件。
|
||||
|
||||
如果需要将 JS 和 CSS 解耦，实现主题定制等功能，在编写代码时就要使用独立的 JS 和 CSS 文件，如下所示：
|
||||
|
||||
```
|
||||
button
|
||||
├─ demo # 组件示例
|
||||
│ └─ index.vue # 组件示例入口
|
||||
├─ index.js # 组件入口
|
||||
├─ index.less # 组件样式，可以为 less 或 scss
|
||||
└─ README.md # 组件文档
|
||||
```
|
||||
|
||||
采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件。
|
||||
|
||||
通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。
|
||||
|
||||
## 构建结果目录
|
||||
|
||||
运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，结构如下：
|
||||
|
||||
```
|
||||
project
|
||||
├─ es # es 目录下的代码遵循 esmodule 规范
|
||||
│ ├─ button # button 组件编译后的代码目录
|
||||
│ ├─ dialog # dialog 组件编译后的代码目录
|
||||
│ └─ index.js # 引入所有组件的入口 (ESModule)
|
||||
│
|
||||
└─ lib # lib 目录下的代码遵循 commonjs 规范
|
||||
├─ button # button 组件编译后的代码目录
|
||||
├─ dialog # dialog 组件编译后的代码目录
|
||||
├─ index.js # 引入所有组件的入口
|
||||
├─ index.less # 所有组件未编译的样式入口
|
||||
├─ index.css # 打包后的组件样式，用于 CDN 引入
|
||||
├─ [name].js # 打包后的组件脚本，UMD 格式
|
||||
├─ [name].es.js # 打包后的组件脚本，ESModule 格式
|
||||
├─ [name].min.js # 打包和压缩后的组件脚本，UMD 格式
|
||||
└─ [name].es.min.js # 打包和压缩后的组件脚本，ESModule 格式
|
||||
```
|
||||
|
||||
单个组件编译后的目录如下：
|
||||
|
||||
```
|
||||
button
|
||||
├─ index.js # 组件编译后的 JS 文件
|
||||
├─ index.css # 组件编译后的 CSS 文件
|
||||
├─ index.less # 组件编译前的 CSS 文件，可以为 less 或 scss
|
||||
└─ style # 按需引入样式的入口
|
||||
├─ index.js # 按需引入编译后的样式
|
||||
└─ less.js # 按需引入未编译的样式，可用于主题定制
|
||||
```
|
||||
|
||||
### 生成类型声明
|
||||
|
||||
当组件库使用 TS 编写，且根目录下存在 `tsconfig.declaration.json` 文件，Vant CLI 会自动生成 `.d.ts` 类型声明文件。
|
||||
|
||||
`tsconfig.declaration.json` 的参考格式如下：
|
||||
|
||||
```json
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"declaration": true,
|
||||
"declarationDir": ".",
|
||||
"emitDeclarationOnly": true
|
||||
},
|
||||
"include": ["es/**/*", "lib/**/*"],
|
||||
"exclude": ["node_modules", "**/test/**/*", "**/demo/**/*"]
|
||||
}
|
||||
```
|
||||
|
||||
成功生成类型声明后，请在 `package.json` 中添加类型入口声明：
|
||||
|
||||
```json
|
||||
{
|
||||
"typings": "lib/index.d.ts"
|
||||
}
|
||||
```
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vant/cli",
|
||||
"version": "4.0.4",
|
||||
"version": "4.0.1",
|
||||
"type": "module",
|
||||
"main": "lib/index.js",
|
||||
"typings": "lib/index.d.ts",
|
||||
@ -32,63 +32,64 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/vant-ui/vant.git",
|
||||
"url": "https://github.com/youzan/vant.git",
|
||||
"directory": "packages/vant-cli"
|
||||
},
|
||||
"bugs": "https://github.com/vant-ui/vant/issues",
|
||||
"bugs": "https://github.com/youzan/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",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"vue": "^3.2.38"
|
||||
"vue": "^3.2.27"
|
||||
},
|
||||
"dependencies": {
|
||||
"@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",
|
||||
"@babel/core": "^7.16.0",
|
||||
"@babel/preset-typescript": "^7.16.0",
|
||||
"@docsearch/css": "3.0.0-alpha.50",
|
||||
"@docsearch/js": "3.0.0-alpha.50",
|
||||
"@types/jest": "^27.0.3",
|
||||
"@vant/eslint-config": "^3.3.2",
|
||||
"@vant/markdown-vetur": "^2.2.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",
|
||||
"@vue/babel-plugin-jsx": "^1.1.1",
|
||||
"autoprefixer": "^10.4.8",
|
||||
"commander": "^9.4.0",
|
||||
"autoprefixer": "^10.4.0",
|
||||
"chalk": "^4.1.2",
|
||||
"commander": "^8.3.0",
|
||||
"consola": "^2.15.3",
|
||||
"conventional-changelog": "^3.1.25",
|
||||
"esbuild": "^0.14.54",
|
||||
"eslint": "^8.23.0",
|
||||
"conventional-changelog": "^3.1.24",
|
||||
"esbuild": "^0.14.21",
|
||||
"eslint": "^8.1.0",
|
||||
"execa": "^5.1.1",
|
||||
"fast-glob": "^3.2.11",
|
||||
"fs-extra": "^10.1.0",
|
||||
"fast-glob": "^3.2.7",
|
||||
"fs-extra": "^10.0.0",
|
||||
"gh-pages": "^3.2.3",
|
||||
"hash-sum": "^2.0.0",
|
||||
"highlight.js": "^11.6.0",
|
||||
"husky": "^8.0.1",
|
||||
"jest": "^27.5.1",
|
||||
"jest-canvas-mock": "^2.4.0",
|
||||
"highlight.js": "^11.3.1",
|
||||
"husky": "^7.0.4",
|
||||
"jest": "^27.3.1",
|
||||
"jest-canvas-mock": "^2.3.1",
|
||||
"jest-serializer-html": "^7.1.0",
|
||||
"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"
|
||||
"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.8.0",
|
||||
"vite-plugin-html": "^2.1.1",
|
||||
"vite-plugin-md": "^0.11.4",
|
||||
"vue-router": "^4.0.12"
|
||||
},
|
||||
"release-it": {
|
||||
"git": {
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
import { ref } from 'vue';
|
||||
/**
|
||||
* 同步父窗口和 iframe 的 vue-router 状态
|
||||
*/
|
||||
|
||||
import { config } from 'site-desktop-shared';
|
||||
|
||||
let queue = [];
|
||||
@ -59,49 +62,6 @@ 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') {
|
||||
@ -1,15 +1,16 @@
|
||||
@import './vars.less';
|
||||
@import './var';
|
||||
@import './font.less';
|
||||
|
||||
body {
|
||||
min-width: 1100px;
|
||||
margin: 0;
|
||||
overflow-x: auto;
|
||||
color: var(--van-doc-text-color-2);
|
||||
color: @van-doc-black;
|
||||
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: var(--van-doc-background);
|
||||
background-color: @van-doc-background-color;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
@ -41,8 +42,8 @@ a {
|
||||
.van-doc-row {
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: var(--van-doc-row-max-width)) {
|
||||
width: var(--van-doc-row-max-width);
|
||||
@media (min-width: @van-doc-row-max-width) {
|
||||
width: @van-doc-row-max-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
163
packages/vant-cli/site/common/style/font.less
Normal file
163
packages/vant-cli/site/common/style/font.less
Normal file
@ -0,0 +1,163 @@
|
||||
/* 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;
|
||||
}
|
||||
@ -1,18 +1,20 @@
|
||||
@import './var';
|
||||
|
||||
code {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 16px 20px;
|
||||
overflow-x: auto;
|
||||
color: var(--van-doc-code-color);
|
||||
color: @van-doc-code-color;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
|
||||
font-family: @van-doc-code-font-family;
|
||||
line-height: 26px;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
-webkit-font-smoothing: auto;
|
||||
background-color: var(--van-doc-code-background);
|
||||
border-radius: var(--van-doc-border-radius);
|
||||
background-color: #f8f8f8;
|
||||
border-radius: @van-doc-border-radius;
|
||||
}
|
||||
|
||||
pre {
|
||||
@ -31,7 +33,7 @@ pre {
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
color: var(--van-doc-code-color);
|
||||
color: @van-doc-code-color;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
@ -40,18 +42,18 @@ pre {
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable,
|
||||
.hljs-addition {
|
||||
color: var(--van-doc-green);
|
||||
color: @van-doc-green;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: var(--van-doc-code-comment-color);
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.hljs-params,
|
||||
.hljs-keyword,
|
||||
.hljs-attribute {
|
||||
color: var(--van-doc-purple);
|
||||
color: @van-doc-purple;
|
||||
}
|
||||
|
||||
.hljs-deletion,
|
||||
|
||||
27
packages/vant-cli/site/common/style/var.less
Normal file
27
packages/vant-cli/site/common/style/var.less
Normal file
@ -0,0 +1,27 @@
|
||||
@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;
|
||||
@ -1,74 +0,0 @@
|
||||
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);
|
||||
}
|
||||
@ -8,7 +8,6 @@
|
||||
:simulator="simulator"
|
||||
:has-simulator="hasSimulator"
|
||||
:lang-configs="langConfigs"
|
||||
:dark-mode-class="darkModeClass"
|
||||
>
|
||||
<router-view />
|
||||
</van-doc>
|
||||
@ -28,7 +27,6 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
hasSimulator: true,
|
||||
darkModeClass: config.site.darkModeClass,
|
||||
};
|
||||
},
|
||||
|
||||
@ -72,18 +70,18 @@ export default {
|
||||
watch: {
|
||||
// eslint-disable-next-line
|
||||
'$route.path'() {
|
||||
this.setTitleAndToggleSimulator();
|
||||
this.setTitleAndToogleSimulator();
|
||||
},
|
||||
|
||||
lang(val) {
|
||||
setLang(val);
|
||||
this.setTitleAndToggleSimulator();
|
||||
this.setTitleAndToogleSimulator();
|
||||
},
|
||||
|
||||
config: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.setTitleAndToggleSimulator();
|
||||
this.setTitleAndToogleSimulator();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
@ -102,7 +100,7 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
setTitleAndToggleSimulator() {
|
||||
setTitleAndToogleSimulator() {
|
||||
let { title } = this.config;
|
||||
|
||||
const navItems = this.config.nav.reduce(
|
||||
|
||||
@ -18,18 +18,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.van-doc-container {
|
||||
box-sizing: border-box;
|
||||
padding-left: var(--van-doc-nav-width);
|
||||
padding-left: @van-doc-nav-width;
|
||||
overflow: hidden;
|
||||
|
||||
&--with-simulator {
|
||||
padding-right: calc(
|
||||
var(--van-doc-simulator-width) + var(--van-doc-padding)
|
||||
);
|
||||
padding-right: @van-doc-simulator-width + @van-doc-padding;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
padding-right: calc(var(--van-doc-simulator-width) - 8px);
|
||||
padding-right: @van-doc-simulator-width - 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,12 +82,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.van-doc-card {
|
||||
margin-bottom: 24px;
|
||||
padding: 24px;
|
||||
background-color: var(--van-doc-background-2);
|
||||
border-radius: var(--van-doc-border-radius);
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
border-radius: @van-doc-border-radius;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
|
||||
> pre code {
|
||||
position: relative;
|
||||
@ -142,15 +144,15 @@ export default {
|
||||
> table a,
|
||||
> blockquote a {
|
||||
margin: 0 1px;
|
||||
color: var(--van-doc-link-color);
|
||||
color: @van-doc-blue;
|
||||
-webkit-font-smoothing: auto;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
color: darken(@van-doc-blue, 10%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
color: darken(@van-doc-blue, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -158,6 +160,7 @@ export default {
|
||||
> h4,
|
||||
> h5,
|
||||
> h6 {
|
||||
color: @van-doc-black;
|
||||
font-weight: normal;
|
||||
line-height: 1.6;
|
||||
|
||||
@ -186,19 +189,23 @@ export default {
|
||||
|
||||
> p {
|
||||
margin-top: 8px;
|
||||
color: var(--van-doc-text-color-3);
|
||||
}
|
||||
|
||||
> p,
|
||||
> blockquote p {
|
||||
color: @van-doc-text-color;
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
|
||||
strong {
|
||||
color: var(--van-doc-text-color-1);
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
> table {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
color: var(--van-doc-text-color-3);
|
||||
color: @van-doc-text-color;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
border-collapse: collapse;
|
||||
@ -219,7 +226,7 @@ export default {
|
||||
|
||||
td {
|
||||
padding: 8px;
|
||||
border-top: 1px solid var(--van-doc-border-color);
|
||||
border-top: 1px solid @van-doc-code-background-color;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
@ -228,10 +235,10 @@ export default {
|
||||
code {
|
||||
margin: 0;
|
||||
padding: 2px 6px;
|
||||
color: var(--van-doc-blue);
|
||||
color: @van-doc-blue;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
background-color: rgba(25, 137, 250, 0.15);
|
||||
background-color: fade(@van-doc-blue, 10%);
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
@ -243,9 +250,9 @@ export default {
|
||||
|
||||
em {
|
||||
display: inline-block;
|
||||
color: var(--van-doc-green);
|
||||
color: @van-doc-green;
|
||||
font-size: 14px;
|
||||
font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
|
||||
font-family: @van-doc-code-font-family;
|
||||
font-style: normal;
|
||||
max-width: 300px;
|
||||
-webkit-font-smoothing: auto;
|
||||
@ -261,7 +268,7 @@ export default {
|
||||
position: relative;
|
||||
margin: 5px 0 5px 10px;
|
||||
padding-left: 15px;
|
||||
color: var(--van-doc-text-color-3);
|
||||
color: @van-doc-text-color;
|
||||
font-size: 15px;
|
||||
line-height: 26px;
|
||||
|
||||
@ -273,7 +280,7 @@ export default {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-top: 10px;
|
||||
border: 1px solid currentColor;
|
||||
border: 1px solid @van-doc-dark-grey;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
}
|
||||
@ -303,17 +310,15 @@ export default {
|
||||
> blockquote {
|
||||
margin: 16px 0 0;
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
color: var(--van-doc-blockquote-color);
|
||||
background-color: var(--van-doc-blockquote-background);
|
||||
border-radius: var(--van-doc-border-radius);
|
||||
background-color: #ecf9ff;
|
||||
border-radius: @van-doc-border-radius;
|
||||
}
|
||||
|
||||
> img,
|
||||
> p img {
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
border-radius: var(--van-doc-border-radius);
|
||||
border-radius: @van-doc-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
@ -328,6 +333,7 @@ export default {
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: @van-doc-black;
|
||||
font-weight: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
|
||||
@ -24,16 +24,6 @@
|
||||
</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"
|
||||
@ -79,7 +69,6 @@
|
||||
<script>
|
||||
import SearchInput from './SearchInput.vue';
|
||||
import { packageVersion } from 'site-desktop-shared';
|
||||
import { getDefaultTheme, syncThemeToChild } from '../../common/iframe-sync';
|
||||
|
||||
export default {
|
||||
name: 'VanDocHeader',
|
||||
@ -93,12 +82,10 @@ export default {
|
||||
config: Object,
|
||||
versions: Array,
|
||||
langConfigs: Array,
|
||||
darkModeClass: String,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentTheme: getDefaultTheme(),
|
||||
packageVersion,
|
||||
showVersionPop: false,
|
||||
};
|
||||
@ -125,32 +112,9 @@ 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;
|
||||
|
||||
@ -183,16 +147,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.van-doc-header {
|
||||
width: 100%;
|
||||
background-color: var(--van-doc-header-background);
|
||||
background-color: #001938;
|
||||
user-select: none;
|
||||
|
||||
&__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--van-doc-header-top-height);
|
||||
padding: 0 var(--van-doc-padding);
|
||||
height: @van-doc-header-top-height;
|
||||
padding: 0 @van-doc-padding;
|
||||
|
||||
&-nav {
|
||||
flex: 1;
|
||||
@ -268,7 +234,7 @@ export default {
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--van-doc-link-color);
|
||||
color: @van-doc-blue;
|
||||
background-color: #f7f8fa;
|
||||
}
|
||||
}
|
||||
@ -302,8 +268,6 @@ export default {
|
||||
}
|
||||
|
||||
&__link {
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
|
||||
@ -71,19 +71,22 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.van-doc-nav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
min-width: var(--van-doc-nav-width);
|
||||
max-width: var(--van-doc-nav-width);
|
||||
padding: 8px 0;
|
||||
min-width: @van-doc-nav-width;
|
||||
max-width: @van-doc-nav-width;
|
||||
padding: @van-doc-padding 0;
|
||||
overflow-y: scroll;
|
||||
background-color: var(--van-doc-background-2);
|
||||
background-color: #fff;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
|
||||
@media (min-width: var(--van-doc-row-max-width)) {
|
||||
@media (min-width: @van-doc-row-max-width) {
|
||||
left: 50%;
|
||||
margin-left: calc((var(--van-doc-row-max-width) / 2 * -1));
|
||||
margin-left: -(@van-doc-row-max-width / 2);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@ -107,8 +110,8 @@ export default {
|
||||
}
|
||||
|
||||
&__title {
|
||||
padding: 24px 0 0 var(--van-doc-padding);
|
||||
color: var(--van-doc-text-color-2);
|
||||
padding: 8px 0 8px @van-doc-padding;
|
||||
color: #455a64;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
line-height: 28px;
|
||||
@ -118,19 +121,21 @@ export default {
|
||||
a {
|
||||
display: block;
|
||||
margin: 8px 0;
|
||||
padding: 6px 0 6px var(--van-doc-padding);
|
||||
color: var(--van-doc-text-color-3);
|
||||
padding: 8px 0 8px @van-doc-padding;
|
||||
color: #455a64;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: var(--van-doc-link-color);
|
||||
color: @van-doc-green;
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
background-color: #ebfff0;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
span {
|
||||
|
||||
@ -3,6 +3,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@docsearch/css';
|
||||
import docsearch from '@docsearch/js';
|
||||
|
||||
export default {
|
||||
name: 'VanDocSearch',
|
||||
|
||||
@ -24,12 +27,9 @@ export default {
|
||||
methods: {
|
||||
initDocsearch() {
|
||||
if (this.searchConfig) {
|
||||
import('@docsearch/css');
|
||||
import('@docsearch/js').then((docsearch) => {
|
||||
docsearch.default({
|
||||
...this.searchConfig,
|
||||
container: '#docsearch',
|
||||
});
|
||||
docsearch({
|
||||
...this.searchConfig,
|
||||
container: '#docsearch',
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -38,6 +38,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
#docsearch {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@ -44,31 +44,34 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.van-doc-simulator {
|
||||
position: absolute;
|
||||
top: calc(var(--van-doc-padding) + var(--van-doc-header-top-height));
|
||||
right: var(--van-doc-padding);
|
||||
top: @van-doc-padding + @van-doc-header-top-height;
|
||||
right: @van-doc-padding;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
width: var(--van-doc-simulator-width);
|
||||
min-width: var(--van-doc-simulator-width);
|
||||
width: @van-doc-simulator-width;
|
||||
min-width: @van-doc-simulator-width;
|
||||
overflow: hidden;
|
||||
background: var(--van-doc-background-2);
|
||||
border-radius: var(--van-doc-border-radius);
|
||||
background: #fafafa;
|
||||
border-radius: @van-doc-border-radius;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
right: auto;
|
||||
left: 750px;
|
||||
}
|
||||
|
||||
@media (min-width: var(--van-doc-row-max-width)) {
|
||||
@media (min-width: @van-doc-row-max-width) {
|
||||
right: 50%;
|
||||
margin-right: calc(var(--van-doc-row-max-width) / 2 * -1 + 24px);
|
||||
margin-right: -(@van-doc-row-max-width / 2) + 24px;
|
||||
}
|
||||
|
||||
&-fixed {
|
||||
position: fixed;
|
||||
top: var(--van-doc-padding);
|
||||
top: @van-doc-padding;
|
||||
}
|
||||
|
||||
iframe {
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
: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" />
|
||||
@ -40,9 +39,8 @@ export default {
|
||||
lang: String,
|
||||
versions: Array,
|
||||
simulator: String,
|
||||
langConfigs: Array,
|
||||
hasSimulator: Boolean,
|
||||
darkModeClass: String,
|
||||
langConfigs: Array,
|
||||
config: {
|
||||
type: Object,
|
||||
required: true,
|
||||
@ -110,3 +108,7 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
</style>
|
||||
|
||||
@ -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-sync';
|
||||
import { listenToSyncPath, syncPathToChild } from '../common/iframe-router';
|
||||
|
||||
if (isMobile) {
|
||||
location.replace('mobile.html' + location.hash);
|
||||
|
||||
@ -15,9 +15,6 @@
|
||||
<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 || [];
|
||||
@ -30,7 +27,7 @@
|
||||
</script>
|
||||
<% } %>
|
||||
</head>
|
||||
<body>
|
||||
<body ontouchstart>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/desktop/main.js"></script>
|
||||
</body>
|
||||
|
||||
@ -15,9 +15,6 @@
|
||||
<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>
|
||||
@ -39,7 +36,7 @@
|
||||
</script>
|
||||
<% } %>
|
||||
</head>
|
||||
<body>
|
||||
<body ontouchstart>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/mobile/main.js"></script>
|
||||
</body>
|
||||
|
||||
@ -10,49 +10,21 @@
|
||||
</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;
|
||||
|
||||
@ -20,11 +20,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.van-doc-demo-block {
|
||||
&__title {
|
||||
margin: 0;
|
||||
padding: 32px 16px 16px;
|
||||
color: var(--van-doc-text-color-4);
|
||||
color: @van-doc-text-light-blue;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
@ -52,11 +52,14 @@ 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 {
|
||||
@ -91,7 +94,7 @@ export default {
|
||||
|
||||
&__desc {
|
||||
margin: 0 0 40px;
|
||||
color: var(--van-doc-text-color-4);
|
||||
color: rgba(69, 90, 100, 0.6);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,10 +43,12 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import '../../common/style/var';
|
||||
|
||||
.demo-home-nav {
|
||||
&__title {
|
||||
margin: 24px 0 8px 16px;
|
||||
color: var(--van-doc-text-color-4);
|
||||
color: rgba(69, 90, 100, 0.6);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@ -55,20 +57,20 @@ export default {
|
||||
display: flex;
|
||||
margin: 0 0 12px;
|
||||
padding-left: 20px;
|
||||
color: var(--van-doc-text-color-3);
|
||||
color: #323233;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
background-color: var(--van-doc-background-3);
|
||||
background: #f7f8fa;
|
||||
border-radius: 99px;
|
||||
transition: opacity 0.3s;
|
||||
transition: background 0.3s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
background: darken(#f7f8fa, 3%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
background: darken(#f7f8fa, 6%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 56px;
|
||||
background-color: var(--van-doc-background-3);
|
||||
background-color: #fff;
|
||||
|
||||
&__title {
|
||||
font-weight: 600;
|
||||
|
||||
@ -13,8 +13,3 @@ 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,
|
||||
});
|
||||
|
||||
@ -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-sync';
|
||||
import { listenToSyncPath, syncPathToParent } from '../common/iframe-router';
|
||||
|
||||
const { locales, defaultLang } = config.site;
|
||||
|
||||
|
||||
@ -1,26 +1,25 @@
|
||||
import { Command } from 'commander';
|
||||
|
||||
import { cliVersion } from './index.js';
|
||||
import {
|
||||
dev,
|
||||
lint,
|
||||
test,
|
||||
clean,
|
||||
build,
|
||||
release,
|
||||
changelog,
|
||||
buildSite,
|
||||
commitLint,
|
||||
cliVersion,
|
||||
} from './index.js';
|
||||
|
||||
const program = new Command();
|
||||
|
||||
program.version(`@vant/cli ${cliVersion}`);
|
||||
|
||||
program
|
||||
.command('dev')
|
||||
.description('Run dev server')
|
||||
.action(async () => {
|
||||
const { dev } = await import('./commands/dev.js');
|
||||
return dev();
|
||||
});
|
||||
program.command('dev').description('Run dev server').action(dev);
|
||||
|
||||
program
|
||||
.command('lint')
|
||||
.description('Run ESLint')
|
||||
.action(async () => {
|
||||
const { lint } = await import('./commands/lint.js');
|
||||
return lint();
|
||||
});
|
||||
program.command('lint').description('Run eslint and stylelint').action(lint);
|
||||
|
||||
program
|
||||
.command('test')
|
||||
@ -46,58 +45,34 @@ 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(async (options) => {
|
||||
const { test } = await import('./commands/jest.js');
|
||||
return test(options);
|
||||
});
|
||||
.action(test);
|
||||
|
||||
program
|
||||
.command('clean')
|
||||
.description('Clean all dist files')
|
||||
.action(async () => {
|
||||
const { clean } = await import('./commands/clean.js');
|
||||
return clean();
|
||||
});
|
||||
program.command('clean').description('Clean all dist files').action(clean);
|
||||
|
||||
program
|
||||
.command('build')
|
||||
.description('Compile components in production mode')
|
||||
.action(async () => {
|
||||
const { build } = await import('./commands/build.js');
|
||||
return build();
|
||||
});
|
||||
.action(build);
|
||||
|
||||
program
|
||||
.command('release')
|
||||
.description('Compile components and release it')
|
||||
.option('--tag <tag>', 'Release tag')
|
||||
.action(async (options) => {
|
||||
const { release } = await import('./commands/release.js');
|
||||
return release(options);
|
||||
});
|
||||
.action(release);
|
||||
|
||||
program
|
||||
.command('build-site')
|
||||
.description('Compile site in production mode')
|
||||
.action(async () => {
|
||||
const { buildSite } = await import('./commands/build-site.js');
|
||||
return buildSite();
|
||||
});
|
||||
.action(buildSite);
|
||||
|
||||
program
|
||||
.command('changelog')
|
||||
.description('Generate changelog')
|
||||
.action(async () => {
|
||||
const { changelog } = await import('./commands/changelog.js');
|
||||
return changelog();
|
||||
});
|
||||
.action(changelog);
|
||||
|
||||
program
|
||||
.command('commit-lint <gitParams>')
|
||||
.description('Lint commit message')
|
||||
.action(async (gitParams) => {
|
||||
const { commitLint } = await import('./commands/commit-lint.js');
|
||||
return commitLint(gitParams);
|
||||
});
|
||||
.action(commitLint);
|
||||
|
||||
program.parse();
|
||||
|
||||
@ -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 { createSpinner, consola } from '../common/logger.js';
|
||||
import { ora, 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, getVantConfig } from '../common/constant.js';
|
||||
import { SRC_DIR, LIB_DIR, ES_DIR } from '../common/constant.js';
|
||||
import { genPackageStyle } from '../compiler/gen-package-style.js';
|
||||
import { genWebStormTypes } from '../compiler/web-types/index.js';
|
||||
import { genVeturConfig } from '../compiler/gen-vetur-config.js';
|
||||
import {
|
||||
isDir,
|
||||
isSfc,
|
||||
@ -135,10 +135,9 @@ async function buildPackageStyleEntry() {
|
||||
}
|
||||
|
||||
async function buildBundledOutputs() {
|
||||
const config = getVantConfig();
|
||||
setModuleEnv('esmodule');
|
||||
await compileBundles();
|
||||
genWebStormTypes(config.build?.tagPrefix);
|
||||
genVeturConfig();
|
||||
}
|
||||
|
||||
const tasks = [
|
||||
@ -179,14 +178,14 @@ const tasks = [
|
||||
async function runBuildTasks() {
|
||||
for (let i = 0; i < tasks.length; i++) {
|
||||
const { task, text } = tasks[i];
|
||||
const spinner = createSpinner(text).start();
|
||||
const spinner = ora(text).start();
|
||||
|
||||
try {
|
||||
/* eslint-disable no-await-in-loop */
|
||||
await task();
|
||||
spinner.success({ text });
|
||||
spinner.succeed(text);
|
||||
} catch (err) {
|
||||
spinner.error({ text });
|
||||
spinner.fail(text);
|
||||
console.log(err);
|
||||
throw err;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { join, dirname } from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { ROOT } from '../common/constant.js';
|
||||
import { createSpinner, slimPath } from '../common/logger.js';
|
||||
import { ora, 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 = createSpinner('Generating changelog...').start();
|
||||
const spinner = ora('Generating changelog...').start();
|
||||
|
||||
return new Promise((resolve) => {
|
||||
conventionalChangelog(
|
||||
@ -68,9 +68,7 @@ export async function changelog(): Promise<void> {
|
||||
)
|
||||
.pipe(createWriteStream(DIST_FILE))
|
||||
.on('close', () => {
|
||||
spinner.success({
|
||||
text: `Changelog generated at ${slimPath(DIST_FILE)}`,
|
||||
});
|
||||
spinner.succeed(`Changelog generated at ${slimPath(DIST_FILE)}`);
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
|
||||
@ -3,6 +3,7 @@ import {
|
||||
ES_DIR,
|
||||
LIB_DIR,
|
||||
DIST_DIR,
|
||||
VETUR_DIR,
|
||||
SITE_DIST_DIR,
|
||||
} from '../common/constant.js';
|
||||
|
||||
@ -13,6 +14,7 @@ export async function clean() {
|
||||
remove(ES_DIR),
|
||||
remove(LIB_DIR),
|
||||
remove(DIST_DIR),
|
||||
remove(VETUR_DIR),
|
||||
remove(SITE_DIST_DIR),
|
||||
]);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import execa from 'execa';
|
||||
import { consola, createSpinner } from '../common/logger.js';
|
||||
import { consola, ora } 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 = createSpinner(messages.start).start();
|
||||
const spinner = ora(messages.start).start();
|
||||
|
||||
return new Promise((resolve) => {
|
||||
execa(cmd, options, {
|
||||
@ -21,11 +21,11 @@ function runCommand(
|
||||
env: { FORCE_COLOR: true },
|
||||
})
|
||||
.then(() => {
|
||||
spinner.success({ text: messages.succeed });
|
||||
spinner.succeed(messages.succeed);
|
||||
resolve(true);
|
||||
})
|
||||
.catch((err: any) => {
|
||||
spinner.error({ text: messages.failed });
|
||||
spinner.fail(messages.failed);
|
||||
consola.error(err.stderr || err.stdout);
|
||||
resolve(false);
|
||||
});
|
||||
@ -44,10 +44,23 @@ 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) {
|
||||
if (!eslintPassed || !stylelintPassed) {
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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, '../compiler/vant-cli-release-plugin.js');
|
||||
const PLUGIN_PATH = join(__dirname, '../../cjs/vant-cli-release-plugin.cjs');
|
||||
|
||||
export async function release(command: { tag?: string }) {
|
||||
await releaseIt({
|
||||
|
||||
@ -21,6 +21,7 @@ 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');
|
||||
@ -42,15 +43,7 @@ export const STYLE_DEPS_JSON_FILE = join(DIST_DIR, 'style-deps.json');
|
||||
export const POSTCSS_CONFIG_FILE = join(CJS_DIR, 'postcss.config.cjs');
|
||||
export const JEST_CONFIG_FILE = join(CJS_DIR, 'jest.config.cjs');
|
||||
|
||||
export const SCRIPT_EXTS = [
|
||||
'.js',
|
||||
'.jsx',
|
||||
'.vue',
|
||||
'.ts',
|
||||
'.tsx',
|
||||
'.mjs',
|
||||
'.cjs',
|
||||
];
|
||||
export const SCRIPT_EXTS = ['.js', '.jsx', '.vue', '.ts', '.tsx'];
|
||||
export const STYLE_EXTS = ['.css', '.less', '.scss'];
|
||||
|
||||
export function getPackageJson() {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { createSpinner } from 'nanospinner';
|
||||
import color from 'picocolors';
|
||||
import ora from 'ora';
|
||||
import chalk from 'chalk';
|
||||
import consola from 'consola';
|
||||
import { ROOT } from '../common/constant.js';
|
||||
|
||||
export function slimPath(path: string) {
|
||||
return color.yellow(path.replace(ROOT, ''));
|
||||
return chalk.yellow(path.replace(ROOT, ''));
|
||||
}
|
||||
|
||||
export { createSpinner, consola };
|
||||
export { ora, consola };
|
||||
|
||||
@ -1,41 +1,68 @@
|
||||
import fse from 'fs-extra';
|
||||
import { join } from 'path';
|
||||
import { build } from 'vite';
|
||||
import { getPackageJson, getVantConfig } from '../common/constant.js';
|
||||
import { getPackageJson, getVantConfig, LIB_DIR } from '../common/constant.js';
|
||||
import { mergeCustomViteConfig } from '../common/index.js';
|
||||
import { getViteConfigForPackage } from '../config/vite.package.js';
|
||||
import type { LibraryFormats } from 'vite';
|
||||
|
||||
export type BundleOption = {
|
||||
minify?: boolean;
|
||||
formats: LibraryFormats[];
|
||||
external?: string[];
|
||||
// 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 external = Object.keys(dependencies);
|
||||
const externals = Object.keys(dependencies);
|
||||
|
||||
const DEFAULT_OPTIONS: BundleOption[] = [
|
||||
{
|
||||
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,
|
||||
},
|
||||
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],
|
||||
}),
|
||||
];
|
||||
|
||||
const bundleOptions: BundleOption[] =
|
||||
getVantConfig().build?.bundleOptions || DEFAULT_OPTIONS;
|
||||
|
||||
await Promise.all(
|
||||
bundleOptions.map((config) =>
|
||||
build(mergeCustomViteConfig(getViteConfigForPackage(config)))
|
||||
)
|
||||
configs.map((config) => build(mergeCustomViteConfig(config)))
|
||||
);
|
||||
await genEntryForSSR();
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import fse from 'fs-extra';
|
||||
import babel from '@babel/core';
|
||||
import esbuild, { type Format } from 'esbuild';
|
||||
import { sep } from 'path';
|
||||
import { isJsx, replaceExt, getVantConfig } from '../common/index.js';
|
||||
import { isJsx, replaceExt } from '../common/index.js';
|
||||
import { replaceCSSImportExt } from '../common/css.js';
|
||||
import { replaceScriptImportExt } from './get-deps.js';
|
||||
|
||||
@ -16,15 +16,12 @@ export async function compileScript(
|
||||
return;
|
||||
}
|
||||
|
||||
const extensionMap = getVantConfig().build?.extensions;
|
||||
const extension = extensionMap?.[format] || '.js';
|
||||
|
||||
let code = readFileSync(filePath, 'utf-8');
|
||||
|
||||
if (!filePath.includes(`${sep}style${sep}`)) {
|
||||
code = replaceCSSImportExt(code);
|
||||
}
|
||||
code = replaceScriptImportExt(code, filePath, extension);
|
||||
code = replaceScriptImportExt(code, '.vue', '');
|
||||
|
||||
if (isJsx(filePath)) {
|
||||
const babelResult = await babel.transformAsync(code, {
|
||||
@ -53,8 +50,7 @@ export async function compileScript(
|
||||
|
||||
({ code } = esbuildResult);
|
||||
|
||||
const jsFilePath = replaceExt(filePath, extension);
|
||||
|
||||
const jsFilePath = replaceExt(filePath, '.js');
|
||||
removeSync(filePath);
|
||||
outputFileSync(jsFilePath, code);
|
||||
}
|
||||
|
||||
@ -1,12 +1,7 @@
|
||||
import fse from 'fs-extra';
|
||||
import path from 'path';
|
||||
import hash from 'hash-sum';
|
||||
import {
|
||||
parse,
|
||||
SFCBlock,
|
||||
compileTemplate,
|
||||
compileScript,
|
||||
} from 'vue/compiler-sfc';
|
||||
import { parse, SFCBlock, compileTemplate } from 'vue/compiler-sfc';
|
||||
import { replaceExt } from '../common/index.js';
|
||||
|
||||
const { remove, readFileSync, outputFile } = fse;
|
||||
@ -78,26 +73,20 @@ export async function compileSfc(filePath: string): Promise<any> {
|
||||
const scopeId = hasScoped ? `data-v-${hash(source)}` : '';
|
||||
|
||||
// compile js part
|
||||
if (descriptor.script || descriptor.scriptSetup) {
|
||||
const lang =
|
||||
descriptor.script?.lang || descriptor.scriptSetup?.lang || 'js';
|
||||
if (descriptor.script) {
|
||||
const lang = descriptor.script.lang || 'js';
|
||||
const scriptFilePath = replaceExt(filePath, `.${lang}`);
|
||||
|
||||
tasks.push(
|
||||
new Promise((resolve) => {
|
||||
let script = '';
|
||||
|
||||
let bindingMetadata;
|
||||
if (descriptor.scriptSetup) {
|
||||
const { bindings, content } = compileScript(descriptor, {
|
||||
id: scopeId,
|
||||
});
|
||||
script += content;
|
||||
bindingMetadata = bindings;
|
||||
} else {
|
||||
script += descriptor.script!.content;
|
||||
// the generated render fn lacks type definitions
|
||||
if (lang === 'ts') {
|
||||
script += '// @ts-nocheck\n';
|
||||
}
|
||||
|
||||
script += descriptor.script!.content;
|
||||
script = injectStyle(script, styles, filePath);
|
||||
script = script.replace(EXPORT, `const ${VUEIDS} =`);
|
||||
|
||||
@ -106,9 +95,6 @@ export async function compileSfc(filePath: string): Promise<any> {
|
||||
id: scopeId,
|
||||
source: template.content,
|
||||
filename: filePath,
|
||||
compilerOptions: {
|
||||
bindingMetadata,
|
||||
},
|
||||
}).code;
|
||||
|
||||
script = injectRender(script, render);
|
||||
@ -120,12 +106,6 @@ 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);
|
||||
})
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import color from 'picocolors';
|
||||
import chalk from 'chalk';
|
||||
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 = color.cyan(`vite v${version}`);
|
||||
console.log(`\n ${viteInfo}` + color.green(` dev server running at:\n`));
|
||||
const viteInfo = chalk.cyan(`vite v${version}`);
|
||||
console.log(`\n ${viteInfo}` + chalk.green(` dev server running at:\n`));
|
||||
server.printUrls();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
import { parse } from 'path';
|
||||
import fse from 'fs-extra';
|
||||
import { getVantConfig, replaceExt } from '../common/index.js';
|
||||
import { readFileSync, writeFileSync } from 'fs';
|
||||
import { 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);
|
||||
|
||||
@ -32,11 +30,6 @@ 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);
|
||||
}
|
||||
|
||||
@ -12,7 +12,6 @@ import {
|
||||
ES_DIR,
|
||||
SRC_DIR,
|
||||
LIB_DIR,
|
||||
getVantConfig,
|
||||
STYLE_DEPS_JSON_FILE,
|
||||
} from '../common/constant.js';
|
||||
|
||||
@ -88,10 +87,8 @@ 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({
|
||||
@ -101,7 +98,7 @@ export function genComponentStyle(
|
||||
ext: '.css',
|
||||
});
|
||||
|
||||
if (CSS_LANG !== 'css' && hasSourceFile) {
|
||||
if (CSS_LANG !== 'css') {
|
||||
genEntry({
|
||||
baseFile,
|
||||
component,
|
||||
|
||||
@ -22,7 +22,7 @@ export function checkStyleExists(component: string) {
|
||||
// analyze component dependencies
|
||||
function analyzeComponentDeps(components: string[], component: string) {
|
||||
const checkList: string[] = [];
|
||||
const componentEntry = fillExt(join(SRC_DIR, component, 'index')).path;
|
||||
const componentEntry = fillExt(join(SRC_DIR, component, 'index'));
|
||||
const record = new Set();
|
||||
|
||||
function search(filePath: string) {
|
||||
|
||||
25
packages/vant-cli/src/compiler/gen-vetur-config.ts
Normal file
25
packages/vant-cli/src/compiler/gen-vetur-config.ts
Normal file
@ -0,0 +1,25 @@
|
||||
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,
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import { join } from 'path';
|
||||
import { SCRIPT_EXTS, STYLE_EXTS } from '../common/constant.js';
|
||||
import { SCRIPT_EXTS } from '../common/constant.js';
|
||||
import { readFileSync, existsSync } from 'fs';
|
||||
|
||||
let depsMap: Record<string, string[]> = {};
|
||||
@ -8,19 +8,12 @@ let existsCache: Record<string, boolean> = {};
|
||||
// https://regexr.com/47jlq
|
||||
const IMPORT_RE =
|
||||
/import\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
|
||||
const EXPORT_FROM_RE =
|
||||
/@?export\s+?(?:(?:(?:[\w*\s{},]*)\s+from(\s+)?)|)(?:(?:".*?")|(?:'.*?'))[\s]*?(?:;|$|)/g;
|
||||
|
||||
function matchImports(code: string): string[] {
|
||||
const imports = code.match(IMPORT_RE) || [];
|
||||
return imports.filter((line) => !line.includes('import type'));
|
||||
}
|
||||
|
||||
function matchExportFroms(code: string): string[] {
|
||||
const exportFroms = code.match(EXPORT_FROM_RE) || [];
|
||||
return exportFroms.filter((line) => !line.includes('export type'));
|
||||
}
|
||||
|
||||
function exists(filePath: string) {
|
||||
if (!(filePath in existsCache)) {
|
||||
existsCache[filePath] = existsSync(filePath);
|
||||
@ -33,36 +26,23 @@ export function fillExt(filePath: string) {
|
||||
for (let i = 0; i < SCRIPT_EXTS.length; i++) {
|
||||
const completePath = `${filePath}${SCRIPT_EXTS[i]}`;
|
||||
if (exists(completePath)) {
|
||||
return {
|
||||
path: completePath,
|
||||
isIndex: false,
|
||||
};
|
||||
return completePath;
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < SCRIPT_EXTS.length; i++) {
|
||||
const completePath = `${filePath}/index${SCRIPT_EXTS[i]}`;
|
||||
if (exists(completePath)) {
|
||||
return {
|
||||
path: completePath,
|
||||
isIndex: true,
|
||||
};
|
||||
return completePath;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
path: '',
|
||||
isIndex: false,
|
||||
};
|
||||
}
|
||||
|
||||
function getImportRelativePath(code: string) {
|
||||
const divider = code.includes('"') ? '"' : "'";
|
||||
return code.split(divider)[1];
|
||||
return '';
|
||||
}
|
||||
|
||||
function getPathByImport(code: string, filePath: string) {
|
||||
const relativePath = getImportRelativePath(code);
|
||||
const divider = code.includes('"') ? '"' : "'";
|
||||
const relativePath = code.split(divider)[1];
|
||||
|
||||
if (relativePath.includes('.')) {
|
||||
return fillExt(join(filePath, '..', relativePath));
|
||||
@ -84,7 +64,7 @@ export function getDeps(filePath: string) {
|
||||
const code = readFileSync(filePath, 'utf-8');
|
||||
const imports = matchImports(code);
|
||||
const paths = imports
|
||||
.map((item) => getPathByImport(item, filePath)?.path)
|
||||
.map((item) => getPathByImport(item, filePath))
|
||||
.filter((item) => !!item) as string[];
|
||||
|
||||
depsMap[filePath] = paths;
|
||||
@ -94,58 +74,14 @@ export function getDeps(filePath: string) {
|
||||
return paths;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Replace .vue extension
|
||||
* @example "import App from 'App.vue';" => "import App from 'App.xxx';"
|
||||
*
|
||||
* 2. if using .mjs or .cjs, complete the import path
|
||||
* @example import './foo' -> import './foo.mjs'
|
||||
* @example import './foo' -> import './foo/index.mjs'
|
||||
*/
|
||||
export function replaceScriptImportExt(
|
||||
code: string,
|
||||
filePath: string,
|
||||
ext: string
|
||||
) {
|
||||
const imports = [...matchImports(code), ...matchExportFroms(code)];
|
||||
// "import App from 'App.vue';" => "import App from 'App.xxx';"
|
||||
export function replaceScriptImportExt(code: string, from: string, to: string) {
|
||||
const importLines = matchImports(code);
|
||||
|
||||
const updateImport = (index: number, newImport: string) => {
|
||||
code = code.replace(imports[index], newImport);
|
||||
imports[index] = newImport;
|
||||
};
|
||||
|
||||
imports.forEach((line, index) => {
|
||||
if (line.includes('.vue')) {
|
||||
updateImport(index, line.replace('.vue', ext));
|
||||
}
|
||||
importLines.forEach((importLine) => {
|
||||
const result = importLine.replace(from, to);
|
||||
code = code.replace(importLine, result);
|
||||
});
|
||||
|
||||
if (ext === '.mjs' || ext === '.cjs') {
|
||||
imports.forEach((line, index) => {
|
||||
const isStyleImport = STYLE_EXTS.some((ext) => line.includes(ext));
|
||||
if (isStyleImport) {
|
||||
return;
|
||||
}
|
||||
|
||||
const pathInfo = getPathByImport(line, filePath);
|
||||
|
||||
if (pathInfo) {
|
||||
const relativePath = getImportRelativePath(line);
|
||||
|
||||
if (pathInfo.isIndex) {
|
||||
const newLine = line.replace(
|
||||
relativePath,
|
||||
`${relativePath}/index${ext}`
|
||||
);
|
||||
|
||||
updateImport(index, newLine);
|
||||
} else {
|
||||
const newLine = line.replace(relativePath, relativePath + ext);
|
||||
updateImport(index, newLine);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return code;
|
||||
}
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
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,
|
||||
});
|
||||
}
|
||||
@ -1,47 +1,40 @@
|
||||
import { join } from 'path';
|
||||
import { setBuildTarget } from '../common/index.js';
|
||||
import { CWD, ES_DIR, getVantConfig, LIB_DIR } from '../common/constant.js';
|
||||
import type { InlineConfig } from 'vite';
|
||||
import type { BundleOption } from '../compiler/compile-bundles.js';
|
||||
import type { InlineConfig, LibraryFormats } from 'vite';
|
||||
|
||||
export function getViteConfigForPackage({
|
||||
minify,
|
||||
formats,
|
||||
external = [],
|
||||
}: BundleOption): InlineConfig {
|
||||
external,
|
||||
}: {
|
||||
minify: boolean;
|
||||
formats: LibraryFormats[];
|
||||
external: string[];
|
||||
}): 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');
|
||||
const { name } = getVantConfig();
|
||||
|
||||
return {
|
||||
root: CWD,
|
||||
|
||||
logLevel: 'silent',
|
||||
|
||||
define: shouldReplaceEnv
|
||||
? {
|
||||
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
|
||||
}
|
||||
: undefined,
|
||||
|
||||
build: {
|
||||
lib: {
|
||||
name,
|
||||
entry,
|
||||
entry: join(ES_DIR, 'index.js'),
|
||||
formats,
|
||||
fileName: (format: string) => {
|
||||
const suffix = format === 'umd' ? '' : `.${format}`;
|
||||
return minify ? `${name}${suffix}.min.js` : `${name}${suffix}.js`;
|
||||
},
|
||||
},
|
||||
|
||||
// terser has better compression than esbuild
|
||||
minify: minify ? 'terser' : false,
|
||||
rollupOptions: {
|
||||
external: [...external, 'vue'],
|
||||
external,
|
||||
output: {
|
||||
dir: LIB_DIR,
|
||||
exports: 'named',
|
||||
|
||||
@ -137,7 +137,6 @@ 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;
|
||||
|
||||
@ -179,7 +178,6 @@ 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),
|
||||
@ -204,9 +202,9 @@ export function getViteConfigForSiteProd(): InlineConfig {
|
||||
base: publicPath,
|
||||
build: {
|
||||
outDir,
|
||||
reportCompressedSize: false,
|
||||
brotliSize: false,
|
||||
emptyOutDir: true,
|
||||
// https://github.com/vant-ui/vant/issues/9703
|
||||
// https://github.com/youzan/vant/issues/9703
|
||||
cssTarget: ['chrome53'],
|
||||
rollupOptions: {
|
||||
input: {
|
||||
|
||||
@ -1,9 +1,30 @@
|
||||
// @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,
|
||||
};
|
||||
|
||||
2
packages/vant-cli/src/module.d.ts
vendored
2
packages/vant-cli/src/module.d.ts
vendored
@ -1,6 +1,6 @@
|
||||
// some modules with missing type definitions
|
||||
declare module 'execa';
|
||||
declare module 'hash-sum';
|
||||
declare module '@babel/core';
|
||||
declare module 'release-it';
|
||||
declare module 'conventional-changelog';
|
||||
declare module '@vant/markdown-vetur';
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
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.
|
||||
@ -1,32 +0,0 @@
|
||||
# @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';
|
||||
```
|
||||
@ -1 +0,0 @@
|
||||
require('../vant-use/build');
|
||||
@ -1,52 +0,0 @@
|
||||
{
|
||||
"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}"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
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);
|
||||
};
|
||||
@ -1,4 +0,0 @@
|
||||
export * from './toast';
|
||||
export * from './notify';
|
||||
export * from './dialog';
|
||||
export * from './image-preview';
|
||||
@ -1,27 +0,0 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user