0
# Vue CLI
1

2
Vue CLI is a comprehensive command-line tool for Vue.js development that provides project scaffolding, plugin management, build tools, and a complete development workflow. It offers an interactive project creation experience with customizable presets, extensive configuration options, and a rich plugin ecosystem.
3

4
## Package Information
5

6
- **Package Name**: @vue/cli
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install -g @vue/cli`
10

11
## Core Imports
12

13
For programmatic usage (plugin development):
14

15
```typescript
16
import { Creator, Generator, GeneratorAPI, PromptModuleAPI } from "@vue/cli";
17
```
18

19
For CommonJS:
20

21
```javascript
22
const { Creator, Generator, GeneratorAPI, PromptModuleAPI } = require("@vue/cli");
23
```
24

25
## Basic Usage
26

27
```bash
28
# Create a new Vue project
29
vue create my-project
30

31
# Add a plugin to existing project
32
vue add @vue/router
33

34
# Start development server
35
vue serve
36

37
# Build for production
38
vue build
39

40
# Open Vue CLI UI
41
vue ui
42
```
43

44
## Architecture
45

46
Vue CLI is built around several key components:
47

48
- **CLI Interface**: 14 commands accessible via `vue <command>` for project lifecycle management
49
- **Creator System**: Project creation orchestrator with interactive prompts and preset handling
50
- **Plugin Architecture**: Extensible generator system with hooks for file generation and configuration
51
- **Generator API**: Comprehensive API for plugin developers to modify projects and extend functionality
52
- **Preset System**: Reusable project configurations with support for local and remote presets
53
- **Configuration Management**: Unified config handling for build tools, linting, testing, and development servers
54

55
## Capabilities
56

57
### Project Creation
58

59
Interactive project scaffolding with customizable presets, feature selection, and package manager choice.
60

61
```bash { .api }
62
vue create <app-name> [options]
63

64
Options:
65
  -p, --preset <presetName>      Skip prompts and use saved or remote preset
66
  -d, --default                  Skip prompts and use default preset
67
  -i, --inlinePreset <json>      Skip prompts and use inline JSON string as preset
68
  -m, --packageManager <command> Use specified npm client when installing dependencies
69
  -r, --registry <url>           Use specified npm registry when installing dependencies (only for npm)
70
  -g, --git [message]            Force git initialization with initial commit message
71
  -n, --no-git                   Skip git initialization
72
  -f, --force                    Overwrite target directory if it exists
73
  --merge                        Merge target directory if it exists
74
  -c, --clone                    Use git clone when fetching remote preset
75
  -x, --proxy <proxyUrl>         Use specified proxy when creating project
76
  -b, --bare                     Scaffold project without beginner instructions
77
  --skipGetStarted               Skip displaying "Get started" instructions
78

79
vue init <template> <app-name>       # (legacy) generate a project from a remote template (requires @vue/cli-init)
80
```
81

82
[Project Creation](./project-creation.md)
83

84
### Plugin Management
85

86
Install, invoke, and manage Vue CLI plugins in existing projects.
87

88
```bash { .api }
89
vue add <plugin> [pluginOptions]
90
vue invoke <plugin> [pluginOptions]
91

92
Options:
93
  --registry <url>    Use specified npm registry when installing dependencies (only for npm)
94
```
95

96
[Plugin Management](./plugin-management.md)
97

98
### Development Tools
99

100
Development server, build tools, and configuration inspection.
101

102
```bash { .api }
103
vue serve                        # alias of "npm run serve" in the current project
104
vue build                        # alias of "npm run build" in the current project
105
vue inspect [paths...]           # inspect the webpack config in a project
106

107
Inspect Options:
108
  --mode <mode>                  Specify mode
109
  --rule <ruleName>              Inspect a specific module rule
110
  --plugin <pluginName>          Inspect a specific plugin
111
  --rules                        List all module rule names
112
  --plugins                      List all plugin names
113
  -v --verbose                   Show full function definitions in output
114
```
115

116
[Development Tools](./development-tools.md)
117

118
### Configuration Management
119

120
CLI configuration, preset management, and project settings.
121

122
```bash { .api }
123
vue config [value]               # inspect and modify the config
124

125
Config Options:
126
  -g, --get <path>               Get value from option
127
  -s, --set <path> <value>       Set option value
128
  -d, --delete <path>            Delete option from config
129
  -e, --edit                     Open config with default editor
130
  --json                         Outputs JSON result only
131
```
132

133
[Configuration Management](./configuration-management.md)
134

135
### Project Maintenance
136

137
Update checking, upgrade utilities, and migration tools.
138

139
```bash { .api }
140
vue outdated                     # (experimental) check for outdated vue cli service / plugins
141
vue upgrade [plugin-name]        # (experimental) upgrade vue cli service / plugins
142
vue migrate [plugin-name]        # (experimental) run migrator for an already-installed cli plugin
143

144
Maintenance Options:
145
  --next                         Also check for alpha / beta / rc versions when upgrading
146
  -t, --to <version>             Upgrade <package-name> to a version that is not latest
147
  -f, --from <version>           Skip probing installed plugin, assuming it is upgraded from the designated version
148
  -r, --registry <url>           Use specified npm registry when installing dependencies
149
  --all                          Upgrade all plugins
150
```
151

152
[Project Maintenance](./project-maintenance.md)
153

154
### Graphical Interface
155

156
Web-based project management interface.
157

158
```bash { .api }
159
vue ui                           # start and open the vue-cli ui
160

161
UI Options:
162
  -H, --host <host>              Host used for the UI server (default: localhost)
163
  -p, --port <port>              Port used for the UI server (by default search for available port)
164
  -D, --dev                      Run in dev mode
165
  --quiet                        Don't output starting messages
166
  --headless                     Don't open browser on start and output port
167
```
168

169
[Graphical Interface](./graphical-interface.md)
170

171
### Programmatic API
172

173
APIs for plugin development and programmatic project creation.
174

175
```typescript { .api }
176
class Creator extends EventEmitter {
177
  constructor(name: string, context: string, promptModules: PromptModule[]);
178
  create(cliOptions?: CreateOptions, preset?: Preset): Promise<void>;
179
  promptAndResolvePreset(answers?: Answers): Promise<Preset>;
180
  resolvePreset(name: string, clone?: boolean): Promise<Preset>;
181
}
182

183
class GeneratorAPI {
184
  constructor(id: string, generator: Generator, options: any, rootOptions: Preset);
185
  
186
  resolve(...paths: string[]): string;
187
  hasPlugin(id: string, versionRange?: string): boolean;
188
  extendPackage(fields: object | ((pkg: object) => object), options?: ExtendPackageOptions): void;
189
  render(source: string | object | FileMiddleware, additionalData?: object, ejsOptions?: object): void;
190
  postProcessFiles(cb: PostProcessFilesCallback): void;
191
  onCreateComplete(cb: (...args: any[]) => any): void;
192
  
193
  readonly cliVersion: string;
194
  readonly cliServiceVersion: string;
195
  readonly entryFile: 'src/main.ts' | 'src/main.js';
196
  readonly invoking: boolean;
197
}
198

199
class PromptModuleAPI {
200
  constructor(creator: Creator);
201
  
202
  injectFeature(feature: CheckboxChoiceOptions): void;
203
  injectPrompt(prompt: DistinctQuestion): void;
204
  injectOptionForPrompt(name: string, option: ChoiceOptions): void;
205
  onPromptComplete(cb: OnPromptCompleteCb): void;
206
}
207
```
208

209
[Programmatic API](./programmatic-api.md)
210

211
## Types
212

213
```typescript { .api }
214
interface Preset {
215
  bare?: boolean;
216
  projectName?: string;
217
  useConfigFiles?: boolean;
218
  plugins?: Record<string, any>;
219
  configs?: Record<string, any>;
220
  cssPreprocessor?: 'sass' | 'dart-sass' | 'less' | 'stylus';
221
  [props: string]: any;
222
}
223

224
interface ExtendPackageOptions {
225
  prune?: boolean;
226
  merge?: boolean;
227
  warnIncompatibleVersions?: boolean;
228
  forceOverwrite?: boolean;
229
}
230

231
interface CreateOptions {
232
  cwd?: string;
233
  proxy?: string;
234
  packageManager?: string;
235
  registry?: string;
236
  git?: boolean | string;
237
  force?: boolean;
238
  merge?: boolean;
239
  clone?: boolean;
240
  bare?: boolean;
241
  skipGetStarted?: boolean;
242
}
243

244
type GeneratorPlugin = (
245
  api: GeneratorAPI,
246
  options: any,
247
  rootOptions: Preset,
248
  invoking: boolean
249
) => any;
250

251
type FileMiddleware = (files: RenderFile, render: typeof ejs.render) => void;
252
type PostProcessFilesCallback = (files: RenderFile) => void;
253
type OnPromptCompleteCb<T = any> = (
254
  answers: T,
255
  options: { useConfigFiles: boolean; plugins: Record<string, any> }
256
) => void;
257

258
interface RenderFile {
259
  [path: string]: string | Buffer;
260
}
261
```