CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vue--cli

Command line interface for rapid Vue.js development

Pending
Overview
Eval results
Files

project-creation.mddocs/

Project Creation

Interactive project scaffolding system that creates new Vue.js applications with customizable configurations, preset handling, and feature selection.

Capabilities

Create Command

Creates a new Vue.js project with interactive prompts for feature selection and configuration.

/**
 * Create a new project powered by vue-cli-service
 * @param app-name - Name of the application/project directory
 */
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

Usage Examples:

# Interactive project creation with prompts
vue create my-vue-app

# Use default preset (no prompts)
vue create my-vue-app --default

# Use saved preset
vue create my-vue-app --preset my-preset

# Use inline JSON preset
vue create my-vue-app --inlinePreset '{"useConfigFiles": true, "plugins": {"@vue/cli-plugin-router": {}}}'

# Force overwrite existing directory
vue create my-vue-app --force

# Use specific package manager
vue create my-vue-app --packageManager yarn

# Initialize with git and custom commit message
vue create my-vue-app --git "Initial commit"

Init Command (Legacy)

Generates a project from a remote template using the legacy API (requires @vue/cli-init).

/**
 * Generate a project from a remote template (legacy API, requires @vue/cli-init)
 * @param template - Template name or GitHub repository URL
 * @param app-name - Name of the application/project directory
 */
vue init <template> <app-name> [options]

Options:
  -c, --clone     Use git clone when fetching remote template
  --offline       Use cached template

Usage Examples:

# Generate project from webpack template
vue init webpack my-project

# Generate from GitHub repository
vue init username/repo my-project

# Use git clone for fetching
vue init webpack my-project --clone

# Use cached template offline
vue init webpack my-project --offline

Note: This is a legacy API that requires the separate @vue/cli-init package to be installed. For new projects, use vue create instead.

Creator Class (Programmatic)

Main project creation orchestrator for programmatic usage.

/**
 * Creator handles the project creation workflow including prompts, preset resolution, and file generation
 */
class Creator extends EventEmitter {
  constructor(name: string, context: string, promptModules: PromptModule[]);
  
  /**
   * Create a new project with optional CLI options and preset
   * @param cliOptions - CLI options passed from command line
   * @param preset - Preset to use (if null, will prompt user)
   */
  create(cliOptions?: CreateOptions, preset?: Preset): Promise<void>;
  
  /**
   * Prompt user for project configuration and resolve preset
   * @param answers - Pre-filled answers (optional)
   * @returns Resolved preset configuration
   */
  promptAndResolvePreset(answers?: Answers): Promise<Preset>;
  
  /**
   * Resolve a preset by name from local or remote sources
   * @param name - Preset name or path/URL
   * @param clone - Whether to use git clone for remote presets
   * @returns Resolved preset object
   */
  resolvePreset(name: string, clone?: boolean): Promise<Preset>;
  
  /**
   * Resolve and configure plugins from raw plugin data
   * @param rawPlugins - Raw plugin configuration
   * @param pkg - Package.json content
   * @returns Resolved plugin configurations
   */
  resolvePlugins(rawPlugins: RawPlugins, pkg: PackageJson): Promise<PluginConfig[]>;
  
  /**
   * Get available presets for selection
   * @returns Object containing available presets
   */
  getPresets(): Record<string, Preset>;
  
  /**
   * Resolve introduction prompts for project creation
   * @returns Array of intro prompts
   */
  resolveIntroPrompts(): DistinctQuestion[];
  
  /**
   * Resolve outro prompts for project creation
   * @returns Array of outro prompts
   */
  resolveOutroPrompts(): DistinctQuestion[];
  
  /**
   * Resolve final prompts for project creation
   * @returns Array of final prompts
   */
  resolveFinalPrompts(): DistinctQuestion[];
  
  /**
   * Determine if git should be initialized based on CLI options
   * @param cliOptions - CLI options
   * @returns Whether to initialize git
   */
  shouldInitGit(cliOptions: CreateOptions): boolean;
  
  // Properties
  readonly name: string;
  readonly context: string;
  readonly presetPrompt: DistinctQuestion;
  readonly featurePrompt: DistinctQuestion;
  readonly outroPrompts: DistinctQuestion[];
  readonly injectedPrompts: DistinctQuestion[];
  readonly promptCompleteCbs: OnPromptCompleteCb[];
}

Usage Examples:

import { Creator, getPromptModules } from "@vue/cli";

// Create a new project programmatically
const creator = new Creator("my-app", "/path/to/projects", getPromptModules());

// Create with default options
await creator.create();

// Create with specific options
await creator.create({
  packageManager: "yarn",
  git: true,
  force: true
});

// Create with preset
const preset = {
  useConfigFiles: true,
  plugins: {
    "@vue/cli-plugin-router": {},
    "@vue/cli-plugin-vuex": {}
  }
};
await creator.create({}, preset);

Preset System

Configuration presets for reusable project templates.

/**
 * Preset configuration object defining project features and plugins
 */
interface Preset {
  /** Whether to create a bare project without beginner instructions */
  bare?: boolean;
  /** Project name */
  projectName?: string;
  /** Whether to extract config to separate files instead of package.json */
  useConfigFiles?: boolean;
  /** Plugin configurations */
  plugins?: Record<string, any>;
  /** Additional configurations */
  configs?: Record<string, any>;
  /** CSS preprocessor choice */
  cssPreprocessor?: 'sass' | 'dart-sass' | 'less' | 'stylus';
  /** Custom properties */
  [props: string]: any;
}

/**
 * CLI options for project creation
 */
interface CreateOptions {
  /** Current working directory */
  cwd?: string;
  /** Proxy URL for package installation */
  proxy?: string;
  /** Package manager to use (npm, yarn, pnpm) */
  packageManager?: string;
  /** NPM registry URL */
  registry?: string;
  /** Git initialization (boolean or commit message) */
  git?: boolean | string;
  /** Force overwrite existing directory */
  force?: boolean;
  /** Merge with existing directory */
  merge?: boolean;
  /** Use git clone for remote presets */
  clone?: boolean;
  /** Create bare project */
  bare?: boolean;
  /** Skip get started instructions */
  skipGetStarted?: boolean;
}

Feature Selection

Interactive prompts for selecting project features during creation.

/**
 * Prompt modules provide feature selection during project creation
 */
interface PromptModule {
  (api: PromptModuleAPI): void;
}

/**
 * Available prompt modules for feature selection:
 */
const promptModules = {
  /** Babel transpilation configuration */
  babel: PromptModule;
  /** CSS preprocessor selection (Sass, Less, Stylus) */
  cssPreprocessors: PromptModule;
  /** End-to-end testing framework selection */
  e2e: PromptModule;
  /** ESLint configuration and rules */
  linter: PromptModule;
  /** Progressive Web App features */
  pwa: PromptModule;
  /** Vue Router configuration */
  router: PromptModule;
  /** TypeScript configuration */
  typescript: PromptModule;
  /** Unit testing framework selection */
  unit: PromptModule;
  /** Vue version selection (2.x vs 3.x) */
  vueVersion: PromptModule;
  /** Vuex state management */
  vuex: PromptModule;
};

Default Presets

Built-in presets available for project creation.

/**
 * Default Vue 3 preset
 */
const defaultVue3Preset: Preset = {
  useConfigFiles: false,
  cssPreprocessor: undefined,
  plugins: {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      config: "base",
      lintOn: ["save"]
    }
  }
};

/**
 * Default Vue 2 preset
 */
const defaultVue2Preset: Preset = {
  vueVersion: "2",
  useConfigFiles: false,
  cssPreprocessor: undefined,
  plugins: {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      config: "base",
      lintOn: ["save"]
    }
  }
};

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