Command line interface for rapid Vue.js development
—
CLI configuration, preset management, and project settings for Vue CLI global and project-specific options.
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 onlyUsage 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 --jsonProgrammatic 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' });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
};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-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>;
}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']
}
};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 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;
}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