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:
哭你几哇
@@ -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
|
||||
├─ src # 组件源代码
|
||||
│ ├─ button # button 组件源代码
|
||||
│ └─ dialog # dialog 组件源代码
|
||||
├─ src # component library source code
|
||||
│ ├─ button # button source code
|
||||
│ └─ dialog # dialog source code
|
||||
│
|
||||
├─ docs # 静态文档目录
|
||||
│ ├─ home.md # 文档首页
|
||||
│ └─ changelog.md # 更新日志
|
||||
├─ docs # static doc directory
|
||||
│ ├─ home.md # documentation site home
|
||||
│ └─ changelog.md # changelog
|
||||
│
|
||||
├─ vant.config.mjs # Vant CLI 配置文件
|
||||
├─ vant.config.mjs # Vant CLI config file
|
||||
├─ package.json
|
||||
└─ README.md
|
||||
```
|
||||
|
||||
单个组件的目录如下：
|
||||
The directories for individual components are as follows:
|
||||
|
||||
```
|
||||
button
|
||||
├─ demo # 示例目录
|
||||
│ └─ index.vue # 组件示例
|
||||
├─ index.vue # 组件源码
|
||||
└─ README.md # 组件文档
|
||||
├─ demo # component demo directory
|
||||
│ └─ index.vue # component demo
|
||||
├─ index.vue # componet source code
|
||||
└─ 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
|
||||
├─ demo # 组件示例
|
||||
│ └─ index.vue # 组件示例入口
|
||||
├─ index.js # 组件入口
|
||||
├─ index.less # 组件样式，可以为 less 或 scss
|
||||
└─ README.md # 组件文档
|
||||
├─ 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
|
||||
```
|
||||
|
||||
采用这种目录结构时，组件的使用者需要分别引入 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
|
||||
├─ es # es 目录下的代码遵循 esmodule 规范
|
||||
│ ├─ button # button 组件编译后的代码目录
|
||||
│ ├─ dialog # dialog 组件编译后的代码目录
|
||||
│ └─ index.js # 引入所有组件的入口 (ESModule)
|
||||
├─ es # ESM Directory
|
||||
│ ├─ button # button component directory
|
||||
│ ├─ dialog # dialog component directory
|
||||
│ └─ index.js # All component files entry (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 格式
|
||||
└─ 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
|
||||
```
|
||||
|
||||
单个组件编译后的目录如下：
|
||||
The compiled directory of a single component is as follows:
|
||||
|
||||
```
|
||||
button
|
||||
├─ index.js # 组件编译后的 JS 文件
|
||||
├─ index.css # 组件编译后的 CSS 文件
|
||||
├─ index.less # 组件编译前的 CSS 文件，可以为 less 或 scss
|
||||
└─ style # 按需引入样式的入口
|
||||
├─ index.js # 按需引入编译后的样式
|
||||
└─ less.js # 按需引入未编译的样式，可用于主题定制
|
||||
├─ 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
|
||||
```
|
||||
|
||||
### 生成类型声明
|
||||
### 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
|
||||
{
|
||||
@@ -100,7 +100,7 @@ button
|
||||
}
|
||||
```
|
||||
|
||||
成功生成类型声明后，请在 `package.json` 中添加类型入口声明：
|
||||
Please add the `typings` field in `package.json` after generate type declaration:
|
||||
|
||||
```json
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user