CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vant--cli

A comprehensive TypeScript CLI tool for building Vue component libraries with development server, build pipeline, and documentation generation.

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

Vant CLI

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.

Package Information

  • Package Name: @vant/cli
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install -g @vant/cli or use with npx @vant/cli
  • Node Requirements: >=16.0.0

Core Imports

Primary usage as CLI tool:

npx vant-cli <command>

For programmatic access to version information:

import { cliVersion } from "@vant/cli";

For CommonJS:

const { cliVersion } = require("@vant/cli");

Basic Usage

# Start development server
vant-cli dev

# Build production package
vant-cli build

# Clean build artifacts
vant-cli clean

# Lint source code
vant-cli lint

# Build documentation site
vant-cli build-site

# Release package
vant-cli release --tag latest --gitTag

For version information:

import { cliVersion } from "@vant/cli";
console.log(`Vant CLI version: ${cliVersion}`);

Architecture

Vant CLI is built around several key components:

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

Capabilities

CLI Commands

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

# Development server
vant-cli dev

# Production builds
vant-cli build
vant-cli build-site

# Maintenance
vant-cli clean
vant-cli lint

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

# Utilities  
vant-cli commit-lint <gitParams>

CLI Commands

Version Information

Access to CLI version information for programmatic use.

// Version access
const cliVersion: string;

Core Utilities

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

// File type detection utilities (internal APIs)
function isSfc(path: string): boolean;
function isStyle(path: string): boolean;
function isScript(path: string): boolean;
function isAsset(path: string): boolean;

// String transformation utilities (internal APIs)
function camelize(str: string): string;
function pascalize(str: string): string;
function decamelize(str: string, sep?: string): string;

// Component analysis utilities (internal APIs)
function getComponents(): string[];
function hasExportOrDefineOptions(code: string): boolean;

Core Utilities

Build System

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

// SFC compilation
interface SFCDescriptor {
  template?: { content: string; };
  script?: { content: string; };
  styles: Array<{ content: string; }>;
}
function parseSfc(filename: string): SFCDescriptor;
function compileSfc(filePath: string): Promise<any>;

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

// Bundle configuration
interface BundleOption {
  minify?: boolean;
  formats: LibraryFormats[];
  external?: string[];
}
function compileBundles(): Promise<void>;

Build System

Configuration System

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

// Configuration access
interface VantConfig {
  name?: string;
  build?: BuildConfig;
  site?: SiteConfig;
}

interface BuildConfig {
  srcDir?: string;
  tagPrefix?: string;
  namedExport?: boolean;
  packageManager?: 'npm' | 'yarn' | 'pnpm';
  css?: CSSConfig;
  configureVite?: (config: InlineConfig) => InlineConfig | void;
}

function getVantConfig(): VantConfig;
function getPackageJson(): object;

Configuration

Types

// Version information (public export)
const cliVersion: string;

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

// Configuration file interface (vant.config.mjs)
interface VantConfig {
  name?: string;
  build?: {
    srcDir?: string;
    tagPrefix?: string;
    namedExport?: boolean;
    skipInstall?: string[];
    packageManager?: 'npm' | 'yarn' | 'pnpm';
    extensions?: {
      esm?: string;
    };
    bundleOptions?: BundleOption[];
    css?: {
      preprocessor?: 'css' | 'less' | 'sass';
      base?: string;
      removeSourceFile?: boolean;
    };
    configureVite?: (config: InlineConfig) => InlineConfig | void;
  };
  site?: {
    defaultLang?: string;
    darkModeClass?: string;
    lightModeClass?: string;
    enableVConsole?: boolean;
    versions?: Array<{ label: string; link: string }>;
    locales?: Record<string, LocaleConfig>;
  };
}

// Bundle configuration (internal)
interface BundleOption {
  minify?: boolean;
  formats: LibraryFormats[];
  external?: string[];
}

// Locale configuration for site
interface LocaleConfig {
  title?: string;
  description?: string;
  lang?: string;
  nav?: Array<{
    title: string;
    items?: Array<{
      path: string;
      title: string;
    }>;
  }>;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vant/cli@7.1.x
Publish Source
CLI
Badge
tessl/npm-vant--cli badge