CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue--cli

Command line interface for rapid Vue.js development

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Vue CLI

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.

Package Information

  • Package Name: @vue/cli
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install -g @vue/cli

Core Imports

For programmatic usage (plugin development):

import { Creator, Generator, GeneratorAPI, PromptModuleAPI } from "@vue/cli";

For CommonJS:

const { Creator, Generator, GeneratorAPI, PromptModuleAPI } = require("@vue/cli");

Basic Usage

# Create a new Vue project
vue create my-project

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

# Start development server
vue serve

# Build for production
vue build

# Open Vue CLI UI
vue ui

Architecture

Vue CLI is built around several key components:

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

Capabilities

Project Creation

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

vue create <app-name> [options]

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

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

Project Creation

Plugin Management

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

vue add <plugin> [pluginOptions]
vue invoke <plugin> [pluginOptions]

Options:
  --registry <url>    Use specified npm registry when installing dependencies (only for npm)

Plugin Management

Development Tools

Development server, build tools, and configuration inspection.

vue serve                        # alias of "npm run serve" in the current project
vue build                        # alias of "npm run build" in the current project
vue inspect [paths...]           # inspect the webpack config in a project

Inspect Options:
  --mode <mode>                  Specify mode
  --rule <ruleName>              Inspect a specific module rule
  --plugin <pluginName>          Inspect a specific plugin
  --rules                        List all module rule names
  --plugins                      List all plugin names
  -v --verbose                   Show full function definitions in output

Development Tools

Configuration Management

CLI configuration, preset management, and project settings.

vue config [value]               # inspect and modify the config

Config Options:
  -g, --get <path>               Get value from option
  -s, --set <path> <value>       Set option value
  -d, --delete <path>            Delete option from config
  -e, --edit                     Open config with default editor
  --json                         Outputs JSON result only

Configuration Management

Project Maintenance

Update checking, upgrade utilities, and migration tools.

vue outdated                     # (experimental) check for outdated vue cli service / plugins
vue upgrade [plugin-name]        # (experimental) upgrade vue cli service / plugins
vue migrate [plugin-name]        # (experimental) run migrator for an already-installed cli plugin

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

Project Maintenance

Graphical Interface

Web-based project management interface.

vue ui                           # start and open the vue-cli ui

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

Graphical Interface

Programmatic API

APIs for plugin development and programmatic project creation.

class Creator extends EventEmitter {
  constructor(name: string, context: string, promptModules: PromptModule[]);
  create(cliOptions?: CreateOptions, preset?: Preset): Promise<void>;
  promptAndResolvePreset(answers?: Answers): Promise<Preset>;
  resolvePreset(name: string, clone?: boolean): Promise<Preset>;
}

class GeneratorAPI {
  constructor(id: string, generator: Generator, options: any, rootOptions: Preset);
  
  resolve(...paths: string[]): string;
  hasPlugin(id: string, versionRange?: string): boolean;
  extendPackage(fields: object | ((pkg: object) => object), options?: ExtendPackageOptions): void;
  render(source: string | object | FileMiddleware, additionalData?: object, ejsOptions?: object): void;
  postProcessFiles(cb: PostProcessFilesCallback): void;
  onCreateComplete(cb: (...args: any[]) => any): void;
  
  readonly cliVersion: string;
  readonly cliServiceVersion: string;
  readonly entryFile: 'src/main.ts' | 'src/main.js';
  readonly invoking: boolean;
}

class PromptModuleAPI {
  constructor(creator: Creator);
  
  injectFeature(feature: CheckboxChoiceOptions): void;
  injectPrompt(prompt: DistinctQuestion): void;
  injectOptionForPrompt(name: string, option: ChoiceOptions): void;
  onPromptComplete(cb: OnPromptCompleteCb): void;
}

Programmatic API

Types

interface Preset {
  bare?: boolean;
  projectName?: string;
  useConfigFiles?: boolean;
  plugins?: Record<string, any>;
  configs?: Record<string, any>;
  cssPreprocessor?: 'sass' | 'dart-sass' | 'less' | 'stylus';
  [props: string]: any;
}

interface ExtendPackageOptions {
  prune?: boolean;
  merge?: boolean;
  warnIncompatibleVersions?: boolean;
  forceOverwrite?: boolean;
}

interface CreateOptions {
  cwd?: string;
  proxy?: string;
  packageManager?: string;
  registry?: string;
  git?: boolean | string;
  force?: boolean;
  merge?: boolean;
  clone?: boolean;
  bare?: boolean;
  skipGetStarted?: boolean;
}

type GeneratorPlugin = (
  api: GeneratorAPI,
  options: any,
  rootOptions: Preset,
  invoking: boolean
) => any;

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

interface RenderFile {
  [path: string]: string | Buffer;
}

docs

configuration-management.md

development-tools.md

graphical-interface.md

index.md

plugin-management.md

programmatic-api.md

project-creation.md

project-maintenance.md

tile.json