CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue--cli

Command line interface for rapid Vue.js development

Pending
Overview
Eval results
Files

configuration-management.mddocs/

Configuration Management

CLI configuration, preset management, and project settings for Vue CLI global and project-specific options.

Capabilities

Config Command

Inspect and modify Vue CLI global configuration stored in ~/.vuerc.

/**
 * Inspect and modify the CLI configuration
 * @param value - Optional value to set or get
 */
vue config [value]

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

Usage Examples:

# View entire configuration
vue config

# Get specific configuration value
vue config -g packageManager

# Set configuration value
vue config -s packageManager yarn

# Set nested configuration value
vue config -s "presets.my-preset.useConfigFiles" true

# Delete configuration option
vue config -d packageManager

# Edit configuration in default editor
vue config -e

# Output configuration as JSON
vue config --json

Config Function (Programmatic)

Programmatic interface for configuration management.

/**
 * Manage CLI configuration programmatically
 * @param value - Configuration value to set
 * @param options - Configuration operation options
 */
async function config(value?: string, options?: ConfigOptions): Promise<void>;

interface ConfigOptions {
  /** Get value from configuration path */
  get?: string;
  /** Set configuration path to value */
  set?: string;
  /** Delete configuration path */
  delete?: string;
  /** Open configuration in editor */
  edit?: boolean;
  /** Output as JSON only */
  json?: boolean;
}

Usage Examples:

import { config } from "@vue/cli";

// Get configuration value
await config(undefined, { get: 'packageManager' });

// Set configuration value
await config('yarn', { set: 'packageManager' });

// Delete configuration
await config(undefined, { delete: 'packageManager' });

Configuration Options

Global CLI configuration options available in ~/.vuerc.

/**
 * Vue CLI configuration structure
 */
interface VueCliConfig {
  /** Default package manager (npm, yarn, pnpm) */
  packageManager?: 'npm' | 'yarn' | 'pnpm';
  /** Use Taobao npm registry (China) */
  useTaobaoRegistry?: boolean;
  /** Saved project presets */
  presets?: Record<string, Preset>;
  /** Default preset name */
  defaultPreset?: string;
  /** Disable CLI version check */
  skipVersionCheck?: boolean;
  /** Plugin options */
  plugins?: Record<string, any>;
}

/**
 * Default configuration values
 */
const defaultConfig: VueCliConfig = {
  packageManager: 'npm',
  useTaobaoRegistry: false,
  presets: {},
  skipVersionCheck: false
};

Preset Management

Save, load, and manage project presets for reusable configurations.

/**
 * Load Vue CLI options from ~/.vuerc
 * @returns Current CLI configuration
 */
function loadOptions(): VueCliConfig;

/**
 * Save Vue CLI options to ~/.vuerc
 * @param toSave - Configuration object to save
 */
function saveOptions(toSave: Partial<VueCliConfig>): void;

/**
 * Save a project preset to global configuration
 * @param name - Preset name
 * @param preset - Preset configuration
 */
function savePreset(name: string, preset: Preset): void;

/**
 * Validate preset configuration
 * @param preset - Preset to validate
 * @returns Validation result
 */
function validatePreset(preset: Preset): ValidationResult;

/**
 * Get RC file path
 * @returns Path to ~/.vuerc file
 */
function rcPath(): string;

Usage Examples:

import { loadOptions, saveOptions, savePreset } from "@vue/cli";

// Load current configuration
const config = loadOptions();

// Update package manager preference
saveOptions({
  packageManager: 'yarn',
  useTaobaoRegistry: false
});

// Save custom preset
savePreset('my-preset', {
  useConfigFiles: true,
  plugins: {
    '@vue/cli-plugin-router': {},
    '@vue/cli-plugin-vuex': {},
    '@vue/cli-plugin-typescript': {
      classComponent: false
    }
  },
  cssPreprocessor: 'sass'
});

Project Configuration

Project-specific configuration through vue.config.js.

/**
 * Vue project configuration (vue.config.js)
 * Note: This is for vue-cli-service, but managed through CLI tools
 */
interface ProjectConfig {
  /** Public path for deployed assets */
  publicPath?: string;
  /** Output directory for build */
  outputDir?: string;
  /** Directory for static assets */
  assetsDir?: string;
  /** Filename for generated index.html */
  indexPath?: string;
  /** Generate source maps for production builds */
  productionSourceMap?: boolean;
  /** Configure webpack-dev-server */
  devServer?: DevServerConfig;
  /** Configure webpack */
  configureWebpack?: WebpackConfig | ((config: WebpackConfig) => void);
  /** Configure webpack via webpack-chain */
  chainWebpack?: (config: WebpackChainConfig) => void;
  /** Configure CSS processing */
  css?: CSSConfig;
  /** Configure PWA plugin */
  pwa?: PWAConfig;
  /** Configure plugin options */
  pluginOptions?: Record<string, any>;
}

Configuration File Transforms

How configuration files are extracted and managed.

/**
 * Configuration transform system for extracting configs from package.json
 */
interface ConfigTransforms {
  /** Babel configuration */
  babel: ConfigTransform;
  /** PostCSS configuration */
  postcss: ConfigTransform;
  /** ESLint configuration */
  eslintConfig: ConfigTransform;
  /** Jest configuration */
  jest: ConfigTransform;
  /** Browserslist configuration */
  browserslist: ConfigTransform;
  /** lint-staged configuration */
  "lint-staged": ConfigTransform;
}

/**
 * File types and their possible filenames for config extraction
 */
interface FileDescriptor {
  /** JavaScript config files */
  js?: string[];
  /** JSON config files */
  json?: string[];
  /** YAML config files */
  yaml?: string[];
  /** Line-based config files */
  lines?: string[];
}

/**
 * Default file descriptors for common configurations:
 */
const defaultConfigFiles = {
  babel: {
    js: ['babel.config.js', '.babelrc.js'],
    json: ['.babelrc', '.babelrc.json']
  },
  eslintConfig: {
    js: ['.eslintrc.js'],
    json: ['.eslintrc.json', '.eslintrc'],
    yaml: ['.eslintrc.yaml', '.eslintrc.yml']
  },
  jest: {
    js: ['jest.config.js'],
    json: ['jest.config.json']
  },
  postcss: {
    js: ['postcss.config.js'],
    json: ['.postcssrc.json', '.postcssrc']
  },
  browserslist: {
    lines: ['.browserslistrc']
  }
};

Registry Configuration

NPM registry configuration and detection.

/**
 * Registry detection and configuration utilities
 */

/**
 * Detect if Taobao registry should be used (for users in China)
 * @returns Whether to use Taobao registry
 */
function shouldUseTaobao(): boolean;

/**
 * Get appropriate registry URL based on location and configuration
 * @returns Registry URL to use
 */
function getRegistry(): string;

/**
 * Registry URLs:
 */
const registries = {
  npm: 'https://registry.npmjs.org/',
  yarn: 'https://registry.yarnpkg.com/',
  taobao: 'https://registry.npm.taobao.org/',
  cnpm: 'https://r.cnpmjs.org/'
};

Environment Configuration

Environment variable and runtime configuration management.

/**
 * Environment variables that affect Vue CLI behavior:
 * 
 * VUE_CLI_DEBUG - Enable debug logging
 * VUE_CLI_SKIP_DIRTY_GIT_PROMPT - Skip git dirty check
 * VUE_CLI_SKIP_WRITE - Skip file writing (for testing)
 * VUE_CLI_TEST - Enable test mode
 * VUE_CLI_CONTEXT - Override project context path
 * VUE_CLI_SERVICE_CONFIG_PATH - Override service config path
 * HTTP_PROXY/HTTPS_PROXY - Proxy settings for package installation
 * NPM_CONFIG_REGISTRY - Override npm registry
 */

/**
 * Runtime configuration detection
 */
interface RuntimeConfig {
  /** Is running in debug mode */
  isDebug: boolean;
  /** Is running in test mode */
  isTest: boolean;
  /** Skip git dirty check */
  skipDirtyGitPrompt: boolean;
  /** Skip file writing */
  skipWrite: boolean;
  /** Custom context path */
  context?: string;
  /** Custom service config path */
  serviceConfigPath?: string;
}

Configuration Validation

Validation utilities for configuration objects.

/**
 * Validation result structure
 */
interface ValidationResult {
  /** Whether validation passed */
  valid: boolean;
  /** Validation error messages */
  errors: string[];
  /** Validation warnings */
  warnings: string[];
}

/**
 * Validate preset configuration
 * @param preset - Preset to validate
 * @returns Validation result with errors and warnings
 */
function validatePreset(preset: Preset): ValidationResult;

/**
 * Validate package manager choice
 * @param packageManager - Package manager name
 * @returns Whether package manager is valid
 */
function validatePackageManager(packageManager: string): boolean;

/**
 * Common validation rules:
 * - Plugin names must be valid npm package names
 * - Version ranges must be valid semver
 * - CSS preprocessor must be supported option
 * - Package manager must be npm, yarn, or pnpm
 * - Preset names cannot conflict with built-in presets
 */

Install with Tessl CLI

npx tessl i tessl/npm-vue--cli

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