mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(vant-cli): translate vant-cli docs to en (#10537)
* docs(vant-cli): translate commands doc to en * docs(vant-cli): translate config doc to en * docs(vant-cli): translate directory doc to en * docs(vant-cli): fix doc link
This commit is contained in:
哭你几哇
GitHub
parent
13fea24739
commit
7ae1028427
@ -1,6 +1,6 @@
|
|||||||
# 命令
|
# Commands
|
||||||
|
|
||||||
Vant CLI 中内置了一系列的命令，可以将命令添加到 npm scripts 中进行使用。
|
You can add built-in commands to `npm scripts` to use it.
|
||||||
|
|
||||||
```json
|
```json
|
||||||
// package.json
|
// package.json
|
||||||
@ -15,7 +15,7 @@ Vant CLI 中内置了一系列的命令，可以将命令添加到 npm scripts
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
也可以通过 npm 自带的 [npx](https://github.com/npm/npx) 直接执行某个命令：
|
Additionally, [npx](https://github.com/npm/npx) can used to be run those commands.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx vant-cli dev
|
npx vant-cli dev
|
||||||
@ -23,17 +23,15 @@ npx vant-cli dev
|
|||||||
|
|
||||||
### dev
|
### dev
|
||||||
|
|
||||||
运行本地开发环境。
|
Start local dev server for browsering components and demo.
|
||||||
|
|
||||||
运行 dev 命令时，Vant CLI 会通过启动一个本地服务器，用于在开发过程中对文档和示例进行预览。
|
|
||||||
|
|
||||||
### build
|
### build
|
||||||
|
|
||||||
构建组件库。
|
Build Vue component library.
|
||||||
|
|
||||||
运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，详见 [目录结构](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)。
|
Files will be output to `es` and `lib` directory. More details [directory structure](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/directory.md)
|
||||||
|
|
||||||
发布 npm 时，请将以下配置加入到 `package.json` 中，使 npm 包能被正确识别:
|
Please add the followed config to `package.json` when publish to npm.
|
||||||
|
|
||||||
```json
|
```json
|
||||||
// package.json
|
// package.json
|
||||||
@ -46,19 +44,19 @@ npx vant-cli dev
|
|||||||
|
|
||||||
### build-site
|
### build-site
|
||||||
|
|
||||||
构建文档站点，在 `site` 目录生成可用于生产环境的文档站点代码。
|
Build documentation website. Files will be output to `site` directory.
|
||||||
|
|
||||||
### release
|
### release
|
||||||
|
|
||||||
发布组件库，发布前会自动执行 build 和 changelog 命令，并通过 [release-it](https://github.com/release-it/release-it) 发布 npm 包。
|
Publish to npm. `build` and `changlog` will be automatically execute when run `release`.
|
||||||
|
|
||||||
## changelog
|
## changelog
|
||||||
|
|
||||||
基于 commit 记录生成更新日志，基于 [conventional-changelog](https://github.com/conventional-changelog/conventional-changelog) 实现。
|
Generate changelog based on commit records.
|
||||||
|
|
||||||
## commit-lint
|
## commit-lint
|
||||||
|
|
||||||
校验 commit message 的格式是否符合规范，需要配合 `husky` 在提交 commit 时触发。
|
Validate the format of commit message. Need `husky` to do this.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx husky add .husky/commit-msg 'npx --no-install vant-cli commit-lint $1'
|
npx husky add .husky/commit-msg 'npx --no-install vant-cli commit-lint $1'
|
||||||
|
|||||||
65
packages/vant-cli/docs/commands.zh-CN.md
Normal file
65
packages/vant-cli/docs/commands.zh-CN.md
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
# 命令
|
||||||
|
|
||||||
|
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/youzan/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)
|
- [vant.config.mjs](#vantconfigmjs)
|
||||||
- [name](#name)
|
- [name](#name)
|
||||||
- [build.css.base](#buildcssbase)
|
- [build.css.base](#buildcssbase)
|
||||||
@ -22,48 +22,48 @@
|
|||||||
- [site.htmlMeta](#sitehtmlmeta)
|
- [site.htmlMeta](#sitehtmlmeta)
|
||||||
- [site.enableVConsole](#siteenablevconsole)
|
- [site.enableVConsole](#siteenablevconsole)
|
||||||
- [PostCSS](#postcss)
|
- [PostCSS](#postcss)
|
||||||
- [默认配置](#-----1)
|
- [Default Config](#-----1)
|
||||||
- [browserslist](#browserslist)
|
- [browserslist](#browserslist)
|
||||||
|
|
||||||
## vant.config.mjs
|
## vant.config.mjs
|
||||||
|
|
||||||
`vant.config.mjs` 中包含了 `vant-cli` 的打包配置和文档站点配置，请创建此文件并置于项目根目录下。下面是一份基本配置的示例：
|
`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:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
// 组件库名称
|
// component library name
|
||||||
name: 'demo-ui',
|
name: 'demo-ui',
|
||||||
// 构建配置
|
// bundle config
|
||||||
build: {
|
build: {
|
||||||
site: {
|
site: {
|
||||||
publicPath: '/demo-ui/',
|
publicPath: '/demo-ui/',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// 文档站点配置
|
// documentation site config
|
||||||
site: {
|
site: {
|
||||||
// 标题
|
// title
|
||||||
title: 'Demo UI',
|
title: 'Demo UI',
|
||||||
// 图标
|
// logo
|
||||||
logo: 'https://cdn.jsdelivr.net/npm/@vant/assets/logo.png',
|
logo: 'https://cdn.jsdelivr.net/npm/@vant/assets/logo.png',
|
||||||
// 描述
|
// description
|
||||||
description: '示例组件库',
|
description: '示例组件库',
|
||||||
// 左侧导航
|
// left nav
|
||||||
nav: [
|
nav: [
|
||||||
{
|
{
|
||||||
title: '开发指南',
|
title: 'example',
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
path: 'home',
|
path: 'home',
|
||||||
title: '介绍',
|
title: 'home',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '基础组件',
|
title: 'basic components',
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
path: 'my-button',
|
path: 'my-button',
|
||||||
title: 'MyButton 按钮',
|
title: 'MyButton',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@ -77,16 +77,16 @@ export default {
|
|||||||
- Type: `string`
|
- Type: `string`
|
||||||
- Default: `''`
|
- Default: `''`
|
||||||
|
|
||||||
组件库名称，建议使用中划线分割，如 `demo-ui`。
|
Component library name. kebab-case recommended.
|
||||||
|
|
||||||
### build.css.base
|
### build.css.base
|
||||||
|
|
||||||
- Type: `string`
|
- Type: `string`
|
||||||
- Default: `'style/base.less'`
|
- Default: `'style/base.less'`
|
||||||
|
|
||||||
全局样式文件的路径，可以为相对路径或绝对路径。
|
Global style file path. Support absolute path and relative path both.
|
||||||
|
|
||||||
相对路径基于 `src` 目录计算。
|
Note: relative path is calculated based on `src`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
module.exports = {
|
module.exports = {
|
||||||
@ -103,7 +103,7 @@ module.exports = {
|
|||||||
- Type: `string`
|
- Type: `string`
|
||||||
- Default: `'less'`
|
- Default: `'less'`
|
||||||
|
|
||||||
CSS 预处理器配置，目前支持 `less` 和 `sass` 两种预处理器，默认使用 `less`。
|
CSS preprocess Config, support `less` and `sass`. Use `less` by default.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
module.exports = {
|
module.exports = {
|
||||||
@ -120,9 +120,9 @@ module.exports = {
|
|||||||
- Type: `string`
|
- Type: `string`
|
||||||
- Default: `/`
|
- Default: `/`
|
||||||
|
|
||||||
等价于 vite 的 `build.outDir` 配置。
|
Equivalent to vite `build.outDir`.
|
||||||
|
|
||||||
一般来说，我们的文档网站会部署在一个域名的子路径上，如 `https://my.github.io/demo-ui/`，这时候 `publicPath` 需要跟子路径保持一致，即 `/demo-ui/`。
|
Genrally, documentation site will be deployed to subpath of domain. For examle: `https://my.github.io/demo-ui/`, `publicPath` should be `/demo-ui/`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
module.exports = {
|
module.exports = {
|
||||||
@ -152,24 +152,24 @@ module.exports = {
|
|||||||
- Type: `boolean`
|
- Type: `boolean`
|
||||||
- Default: `false`
|
- Default: `false`
|
||||||
|
|
||||||
是否通过 Named Export 对组件进行导出。
|
Should export components by Named Export.
|
||||||
|
|
||||||
未开启此选项时，会通过 `export default from 'xxx'` 导出组件内部的默认模块。
|
When set to `false`, `export default from 'xxx'` will be used to export module.
|
||||||
|
|
||||||
开启此选项后，会通过 `export * from 'xxx'` 导出组件内部的所有模块、类型定义。
|
When set to `true`, `export * from 'xxx'` will be used to export all modules and type definition.
|
||||||
|
|
||||||
### build.configureVite
|
### build.configureVite
|
||||||
|
|
||||||
- Type: `(config: InlineConfig): InlineConfig`
|
- Type: `(config: InlineConfig): InlineConfig`
|
||||||
- Default: `undefined`
|
- Default: `undefined`
|
||||||
|
|
||||||
vant-cli 使用 vite 来构建组件库和文档站点，通过 `configureVite` 选项可以自定义 vite 配置（从 4.0.0 版本开始支持）。
|
Custom vite config(`@vant/cli>= 4.0.0`)
|
||||||
|
|
||||||
```js
|
```js
|
||||||
module.exports = {
|
module.exports = {
|
||||||
build: {
|
build: {
|
||||||
configureVite(config) {
|
configureVite(config) {
|
||||||
// 添加一个自定义插件
|
// add vite plugin
|
||||||
config.plugins.push(vitePluginXXX);
|
config.plugins.push(vitePluginXXX);
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
@ -177,8 +177,6 @@ module.exports = {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
在自定义配置时，可以通过 `process.env.BUILD_TARGET` 对构建目标进行区分：
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
module.exports = {
|
module.exports = {
|
||||||
build: {
|
build: {
|
||||||
@ -186,11 +184,11 @@ module.exports = {
|
|||||||
const { BUILD_TARGET } = process.env;
|
const { BUILD_TARGET } = process.env;
|
||||||
|
|
||||||
if (BUILD_TARGET === 'package') {
|
if (BUILD_TARGET === 'package') {
|
||||||
// 修改组件库构建配置
|
// component library bundle config
|
||||||
}
|
}
|
||||||
|
|
||||||
if (BUILD_TARGET === 'site') {
|
if (BUILD_TARGET === 'site') {
|
||||||
// 修改文档站点构建配置
|
// documentation site bundle config
|
||||||
}
|
}
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
@ -204,51 +202,51 @@ module.exports = {
|
|||||||
- Type: `'npm' | 'yarn' | 'pnpm'`
|
- Type: `'npm' | 'yarn' | 'pnpm'`
|
||||||
- Default: `undefined`
|
- Default: `undefined`
|
||||||
|
|
||||||
指定使用的包管理器。
|
`npm` package manager.
|
||||||
|
|
||||||
### site.title
|
### site.title
|
||||||
|
|
||||||
- Type: `string`
|
- Type: `string`
|
||||||
- Default: `''`
|
- Default: `''`
|
||||||
|
|
||||||
文档站点的标题。
|
Documentation site title.
|
||||||
|
|
||||||
### site.logo
|
### site.logo
|
||||||
|
|
||||||
- Type: `string`
|
- Type: `string`
|
||||||
- Default: `''`
|
- Default: `''`
|
||||||
|
|
||||||
文档站点的 Logo。
|
Documentation site logo.
|
||||||
|
|
||||||
### site.description
|
### site.description
|
||||||
|
|
||||||
- Type: `string`
|
- Type: `string`
|
||||||
- Default: `''`
|
- Default: `''`
|
||||||
|
|
||||||
标题下方的描述文案。
|
Documentation site description.
|
||||||
|
|
||||||
### site.nav
|
### site.nav
|
||||||
|
|
||||||
- Type: `object[]`
|
- Type: `object[]`
|
||||||
- Default: `undefined`
|
- Default: `undefined`
|
||||||
|
|
||||||
文档站点的左侧导航，数组中的每个对象表示一个导航分组。
|
Documentation site left nav. Each item of `nav` means a navigation group.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
module.exports = {
|
module.exports = {
|
||||||
site: {
|
site: {
|
||||||
nav: [
|
nav: [
|
||||||
{
|
{
|
||||||
// 分组标题
|
// group title
|
||||||
title: '开发指南',
|
title: 'Development Guide',
|
||||||
// 导航项
|
// nav items
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
// 导航项路由
|
// nav router
|
||||||
path: 'home',
|
path: 'home',
|
||||||
// 导航项文案
|
// nav title
|
||||||
title: '介绍',
|
title: 'title',
|
||||||
// 是否隐藏当前页右侧的手机模拟器（默认不隐藏）
|
// should hide phone emulator(false by default)
|
||||||
hideSimulator: true,
|
hideSimulator: true,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
@ -263,7 +261,7 @@ module.exports = {
|
|||||||
- Type: `object[]`
|
- Type: `object[]`
|
||||||
- Default: `undefined`
|
- Default: `undefined`
|
||||||
|
|
||||||
文档站点多版本配置，当组件库存在多个版本的文档时，可以通过`site.versions`在顶部导航配置一个版本切换按钮。
|
Documentation site muti-version config.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
module.exports = {
|
module.exports = {
|
||||||
@ -283,15 +281,15 @@ module.exports = {
|
|||||||
- Type: `object`
|
- Type: `object`
|
||||||
- Default: `undefied`
|
- Default: `undefied`
|
||||||
|
|
||||||
文档网站的百度统计配置，添加这项配置后，会自动在构建文档网站时加载百度统计的脚本。
|
Documentation site baidu analysis config. The script of Baidu Statistic will be automatically loaded when build documentation website.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
module.exports = {
|
module.exports = {
|
||||||
site: {
|
site: {
|
||||||
baiduAnalytics: {
|
baiduAnalytics: {
|
||||||
// 打开百度统计 ->『管理』->『代码获取』
|
// 打开百度统计 ->『管理』->『代码获取』
|
||||||
// 找到下面这串 URL: "https://hm.baidu.com/hm.js?xxxxx"
|
// find the followed URL: "https://hm.baidu.com/hm.js?xxxxx"
|
||||||
// 将 `xxxxx` 填写在 seed 中即可
|
// add `xxxxx` in the seed
|
||||||
seed: 'xxxxx',
|
seed: 'xxxxx',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -303,45 +301,43 @@ module.exports = {
|
|||||||
- Type: `object`
|
- Type: `object`
|
||||||
- Default: `undefined`
|
- Default: `undefined`
|
||||||
|
|
||||||
文档网站的搜索配置，基于 algolia 提供的 docsearch 服务实现。
|
Documentation site search config. Based on [docsearch](https://docsearch.algolia.com/docs/behavior) of algolia.
|
||||||
|
|
||||||
配置内容参见 [docsearch](https://docsearch.algolia.com/docs/behavior)。
|
|
||||||
|
|
||||||
### site.hideSimulator
|
### site.hideSimulator
|
||||||
|
|
||||||
- Type: `boolean`
|
- Type: `boolean`
|
||||||
- Default: `false`
|
- Default: `false`
|
||||||
|
|
||||||
是否隐藏所有页面右侧的手机模拟器，默认不隐藏
|
Should hide phone emulator, `false` by default.
|
||||||
|
|
||||||
### site.simulator.url
|
### site.simulator.url
|
||||||
|
|
||||||
- Type: `string`
|
- Type: `string`
|
||||||
- Default: -
|
- Default: -
|
||||||
|
|
||||||
自定义手机模拟器的 iframe URL 地址。
|
Customize iframe URL.
|
||||||
|
|
||||||
### site.htmlMeta
|
### site.htmlMeta
|
||||||
|
|
||||||
- Type: `Record<string, string>`
|
- Type: `Record<string, string>`
|
||||||
- Default: `undefined`
|
- Default: `undefined`
|
||||||
|
|
||||||
配置 HTML 中的 meta 标签，对象的 key 为 name，value 为 content。
|
Customize HTML meta tag, key means name, value means content.
|
||||||
|
|
||||||
### site.enableVConsole
|
### site.enableVConsole
|
||||||
|
|
||||||
- Type: `boolean`
|
- Type: `boolean`
|
||||||
- Default: `false`
|
- Default: `false`
|
||||||
|
|
||||||
是否在 dev 时开启 [vConsole](https://github.com/Tencent/vConsole) 调试，用于移动端 debug。
|
Should use [vConsole](https://github.com/Tencent/vConsole) to debug when dev. For mobile.
|
||||||
|
|
||||||
## PostCSS
|
## PostCSS
|
||||||
|
|
||||||
通过根目录下的`postcss.config.js`文件可以对 PostCSS 进行配置。
|
PostCSS can be configured through the `postcss.config.js` file in the root directory.
|
||||||
|
|
||||||
### 默认配置
|
### 默认配置
|
||||||
|
|
||||||
`vant-cli` 中默认的 PostCSS 配置如下：
|
PostCSS default config:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
module.exports = {
|
module.exports = {
|
||||||
@ -353,9 +349,9 @@ module.exports = {
|
|||||||
|
|
||||||
## browserslist
|
## browserslist
|
||||||
|
|
||||||
推荐在 `package.json` 文件里添加 browserslist 字段，这个值会被 `autoprefixer` 用来确定目标浏览器的版本，保证编译后代码的兼容性。
|
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.
|
||||||
|
|
||||||
在移动端浏览器中使用，可以添加如下配置：
|
You can add the following config for mobile:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
|
|||||||
364
packages/vant-cli/docs/config.zh-CN.md
Normal file
364
packages/vant-cli/docs/config.zh-CN.md
Normal file
@ -0,0 +1,364 @@
|
|||||||
|
# 配置指南
|
||||||
|
|
||||||
|
- [配置指南](#----)
|
||||||
|
- [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://cdn.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.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`
|
||||||
|
|
||||||
|
指定使用的包管理器。
|
||||||
|
|
||||||
|
### 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://youzan.github.io/vant/v1/',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### site.baiduAnalytics
|
||||||
|
|
||||||
|
- Type: `object`
|
||||||
|
- Default: `undefied`
|
||||||
|
|
||||||
|
文档网站的百度统计配置，添加这项配置后，会自动在构建文档网站时加载百度统计的脚本。
|
||||||
|
|
||||||
|
```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.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
|
||||||
|
|
||||||
基于 Vant CLI 搭建的组件库的基本目录结构如下所示：
|
The basic directory structure of the component library based on Vant CLI is as follows:
|
||||||
|
|
||||||
```
|
```
|
||||||
project
|
project
|
||||||
├─ src # 组件源代码
|
├─ src # component library source code
|
||||||
│ ├─ button # button 组件源代码
|
│ ├─ button # button source code
|
||||||
│ └─ dialog # dialog 组件源代码
|
│ └─ dialog # dialog source code
|
||||||
│
|
│
|
||||||
├─ docs # 静态文档目录
|
├─ docs # static doc directory
|
||||||
│ ├─ home.md # 文档首页
|
│ ├─ home.md # documentation site home
|
||||||
│ └─ changelog.md # 更新日志
|
│ └─ changelog.md # changelog
|
||||||
│
|
│
|
||||||
├─ vant.config.mjs # Vant CLI 配置文件
|
├─ vant.config.mjs # Vant CLI config file
|
||||||
├─ package.json
|
├─ package.json
|
||||||
└─ README.md
|
└─ README.md
|
||||||
```
|
```
|
||||||
|
|
||||||
单个组件的目录如下：
|
The directories for individual components are as follows:
|
||||||
|
|
||||||
```
|
```
|
||||||
button
|
button
|
||||||
├─ demo # 示例目录
|
├─ demo # component demo directory
|
||||||
│ └─ index.vue # 组件示例
|
│ └─ index.vue # component demo
|
||||||
├─ index.vue # 组件源码
|
├─ index.vue # componet source code
|
||||||
└─ README.md # 组件文档
|
└─ README.md # component doc
|
||||||
```
|
```
|
||||||
|
|
||||||
使用 .vue 文件编写组件时，编译后会生成对应的 JS 和 CSS 文件，且 JS 文件中会自动引入 CSS 文件。
|
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.
|
||||||
|
|
||||||
如果需要将 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:
|
||||||
|
|
||||||
```
|
```
|
||||||
button
|
button
|
||||||
├─ demo # 组件示例
|
├─ demo # component demo directory
|
||||||
│ └─ index.vue # 组件示例入口
|
│ └─ index.vue # component demo entry
|
||||||
├─ index.js # 组件入口
|
├─ index.js # component entry
|
||||||
├─ index.less # 组件样式，可以为 less 或 scss
|
├─ index.less # component style，support scss and less
|
||||||
└─ README.md # 组件文档
|
└─ README.md # component doc
|
||||||
```
|
```
|
||||||
|
|
||||||
采用这种目录结构时，组件的使用者需要分别引入 JS 和 CSS 文件，也可以通过 babel-plugin-import 自动引入样式。
|
When using this directory structure, the developer of the component library needs to import the JS and CSS files respectively, and the styles can also be imported automatically through babel-plugin-import.
|
||||||
|
|
||||||
通过引入样式源文件（less 或 scss）并修改样式变量，可以实现主题定制功能。
|
Theme customization can be achieved by importing style source files (less or scss) and modifying style variables.
|
||||||
|
|
||||||
## 构建结果目录
|
## Output Directory
|
||||||
|
|
||||||
运行 build 命令会在 `es` 和 `lib` 目录下生成可用于生产环境的组件代码，结构如下：
|
Running the `build` command will generate production code in the `es` and `lib` directories with the following structure:
|
||||||
|
|
||||||
```
|
```
|
||||||
project
|
project
|
||||||
├─ es # es 目录下的代码遵循 esmodule 规范
|
├─ es # ESM Directory
|
||||||
│ ├─ button # button 组件编译后的代码目录
|
│ ├─ button # button component directory
|
||||||
│ ├─ dialog # dialog 组件编译后的代码目录
|
│ ├─ dialog # dialog component directory
|
||||||
│ └─ index.js # 引入所有组件的入口 (ESModule)
|
│ └─ index.js # All component files entry (ESModule)
|
||||||
│
|
│
|
||||||
└─ lib # lib 目录下的代码遵循 commonjs 规范
|
└─ lib # Commonjs directory
|
||||||
├─ button # button 组件编译后的代码目录
|
├─ button # button component library
|
||||||
├─ dialog # dialog 组件编译后的代码目录
|
├─ dialog # dialog component library
|
||||||
├─ index.js # 引入所有组件的入口
|
├─ index.js # All component files entry (Commonjs)
|
||||||
├─ index.less # 所有组件未编译的样式入口
|
├─ index.less # All component styles entry(Uncompiled)
|
||||||
├─ index.css # 打包后的组件样式，用于 CDN 引入
|
├─ index.css # Bundle component styles for CDN
|
||||||
├─ [name].js # 打包后的组件脚本，UMD 格式
|
├─ [name].js # Bundle script for UMD
|
||||||
├─ [name].es.js # 打包后的组件脚本，ESModule 格式
|
├─ [name].es.js # Bundle script for ESM
|
||||||
├─ [name].min.js # 打包和压缩后的组件脚本，UMD 格式
|
├─ [name].min.js # Bundle and minified script for UMD
|
||||||
└─ [name].es.min.js # 打包和压缩后的组件脚本，ESModule 格式
|
└─ [name].es.min.js # Bundle and minified script for ESM
|
||||||
```
|
```
|
||||||
|
|
||||||
单个组件编译后的目录如下：
|
The compiled directory of a single component is as follows:
|
||||||
|
|
||||||
```
|
```
|
||||||
button
|
button
|
||||||
├─ index.js # 组件编译后的 JS 文件
|
├─ index.js # Bundle script file
|
||||||
├─ index.css # 组件编译后的 CSS 文件
|
├─ index.css # Bundle CSS file
|
||||||
├─ index.less # 组件编译前的 CSS 文件，可以为 less 或 scss
|
├─ index.less # Uncompiled CSS file, less or scss
|
||||||
└─ style # 按需引入样式的入口
|
└─ style # Style entry on demand directory
|
||||||
├─ index.js # 按需引入编译后的样式
|
├─ index.js # Compiled styles on demand
|
||||||
└─ less.js # 按需引入未编译的样式，可用于主题定制
|
└─ less.js # Uncompiled styles on demand, for theme customization
|
||||||
```
|
```
|
||||||
|
|
||||||
### 生成类型声明
|
### Generate type definition
|
||||||
|
|
||||||
当组件库使用 TS 编写，且根目录下存在 `tsconfig.declaration.json` 文件，Vant CLI 会自动生成 `.d.ts` 类型声明文件。
|
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.
|
||||||
|
|
||||||
`tsconfig.declaration.json` 的参考格式如下：
|
The format of `tsconfig.declaration.json` is as follows:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
@ -100,7 +100,7 @@ button
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
成功生成类型声明后，请在 `package.json` 中添加类型入口声明：
|
Please add the `typings` field in `package.json` after generate type declaration:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
|
|||||||
109
packages/vant-cli/docs/directory.zh-CN.md
Normal file
109
packages/vant-cli/docs/directory.zh-CN.md
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
# 目录结构
|
||||||
|
|
||||||
|
## 源代码目录
|
||||||
|
|
||||||
|
基于 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 文件，也可以通过 babel-plugin-import 自动引入样式。
|
||||||
|
|
||||||
|
通过引入样式源文件（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"
|
||||||
|
}
|
||||||
|
```
|
||||||
Loading…
x
Reference in New Issue
Block a user