0
# Vant CLI
1

2
Vant CLI is a comprehensive TypeScript CLI tool for building Vue component libraries. It provides a complete development workflow from initial setup to deployment, featuring automatic documentation generation, component building, theme customization support, and tree-shaking optimization.
3

4
## Package Information
5

6
- **Package Name**: @vant/cli
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install -g @vant/cli` or use with `npx @vant/cli`
10
- **Node Requirements**: >=16.0.0
11

12
## Core Imports
13

14
Primary usage as CLI tool:
15
```bash
16
npx vant-cli <command>
17
```
18

19
For programmatic access to version information:
20
```typescript
21
import { cliVersion } from "@vant/cli";
22
```
23

24
For CommonJS:
25
```javascript
26
const { cliVersion } = require("@vant/cli");
27
```
28

29
## Basic Usage
30

31
```bash
32
# Start development server
33
vant-cli dev
34

35
# Build production package
36
vant-cli build
37

38
# Clean build artifacts
39
vant-cli clean
40

41
# Lint source code
42
vant-cli lint
43

44
# Build documentation site
45
vant-cli build-site
46

47
# Release package
48
vant-cli release --tag latest --gitTag
49
```
50

51
For version information:
52
```typescript
53
import { cliVersion } from "@vant/cli";
54
console.log(`Vant CLI version: ${cliVersion}`);
55
```
56

57
## Architecture
58

59
Vant CLI is built around several key components:
60

61
- **CLI Commands**: Seven main commands for development, building, and maintenance workflows
62
- **Build System**: Rsbuild-based compilation with multi-format output (ES modules, CommonJS, UMD)
63
- **Development Server**: Hot-reload development server for documentation sites
64
- **Compiler Pipeline**: Comprehensive Vue SFC, TypeScript, and CSS compilation
65
- **Configuration System**: Flexible configuration via vant.config.mjs files
66
- **Package Management**: Automated dependency installation and release workflows
67

68
## Capabilities
69

70
### CLI Commands
71

72
Primary interface for Vue component library development workflows including development server, production builds, and maintenance tasks.
73

74
```bash { .api }
75
# Development server
76
vant-cli dev
77

78
# Production builds
79
vant-cli build
80
vant-cli build-site
81

82
# Maintenance
83
vant-cli clean
84
vant-cli lint
85

86
# Publishing
87
vant-cli release [--tag <tag>] [--gitTag]
88

89
# Utilities  
90
vant-cli commit-lint <gitParams>
91
```
92

93
[CLI Commands](./commands.md)
94

95
### Version Information
96

97
Access to CLI version information for programmatic use.
98

99
```typescript { .api }
100
// Version access
101
const cliVersion: string;
102
```
103

104
### Core Utilities
105

106
Essential utilities for file operations, path manipulation, and component analysis used throughout the build system.
107

108
```typescript { .api }
109
// File type detection utilities (internal APIs)
110
function isSfc(path: string): boolean;
111
function isStyle(path: string): boolean;
112
function isScript(path: string): boolean;
113
function isAsset(path: string): boolean;
114

115
// String transformation utilities (internal APIs)
116
function camelize(str: string): string;
117
function pascalize(str: string): string;
118
function decamelize(str: string, sep?: string): string;
119

120
// Component analysis utilities (internal APIs)
121
function getComponents(): string[];
122
function hasExportOrDefineOptions(code: string): boolean;
123
```
124

125
[Core Utilities](./utilities.md)
126

127
### Build System
128

129
Compilation system for Vue Single File Components, TypeScript, and CSS with multi-format output support.
130

131
```typescript { .api }
132
// SFC compilation
133
interface SFCDescriptor {
134
  template?: { content: string; };
135
  script?: { content: string; };
136
  styles: Array<{ content: string; }>;
137
}
138
function parseSfc(filename: string): SFCDescriptor;
139
function compileSfc(filePath: string): Promise<any>;
140

141
// Style compilation
142
function compileStyle(filePath: string): Promise<void>;
143

144
// Bundle configuration
145
interface BundleOption {
146
  minify?: boolean;
147
  formats: LibraryFormats[];
148
  external?: string[];
149
}
150
function compileBundles(): Promise<void>;
151
```
152

153
[Build System](./build-system.md)
154

155
### Configuration System
156

157
Configuration management for build settings, site generation, and development workflows.
158

159
```typescript { .api }
160
// Configuration access
161
interface VantConfig {
162
  name?: string;
163
  build?: BuildConfig;
164
  site?: SiteConfig;
165
}
166

167
interface BuildConfig {
168
  srcDir?: string;
169
  tagPrefix?: string;
170
  namedExport?: boolean;
171
  packageManager?: 'npm' | 'yarn' | 'pnpm';
172
  css?: CSSConfig;
173
  configureVite?: (config: InlineConfig) => InlineConfig | void;
174
}
175

176
function getVantConfig(): VantConfig;
177
function getPackageJson(): object;
178
```
179

180
[Configuration](./configuration.md)
181

182
## Types
183

184
```typescript { .api }
185
// Version information (public export)
186
const cliVersion: string;
187

188
// Command-line options for release command
189
interface ReleaseCommandOptions {
190
  tag?: string;     // npm tag (beta, alpha, rc, latest)
191
  gitTag?: boolean; // create git tag
192
}
193

194
// Configuration file interface (vant.config.mjs)
195
interface VantConfig {
196
  name?: string;
197
  build?: {
198
    srcDir?: string;
199
    tagPrefix?: string;
200
    namedExport?: boolean;
201
    skipInstall?: string[];
202
    packageManager?: 'npm' | 'yarn' | 'pnpm';
203
    extensions?: {
204
      esm?: string;
205
    };
206
    bundleOptions?: BundleOption[];
207
    css?: {
208
      preprocessor?: 'css' | 'less' | 'sass';
209
      base?: string;
210
      removeSourceFile?: boolean;
211
    };
212
    configureVite?: (config: InlineConfig) => InlineConfig | void;
213
  };
214
  site?: {
215
    defaultLang?: string;
216
    darkModeClass?: string;
217
    lightModeClass?: string;
218
    enableVConsole?: boolean;
219
    versions?: Array<{ label: string; link: string }>;
220
    locales?: Record<string, LocaleConfig>;
221
  };
222
}
223

224
// Bundle configuration (internal)
225
interface BundleOption {
226
  minify?: boolean;
227
  formats: LibraryFormats[];
228
  external?: string[];
229
}
230

231
// Locale configuration for site
232
interface LocaleConfig {
233
  title?: string;
234
  description?: string;
235
  lang?: string;
236
  nav?: Array<{
237
    title: string;
238
    items?: Array<{
239
      path: string;
240
      title: string;
241
    }>;
242
  }>;
243
}
244
```