Vue CLI is the official command-line tool for scaffolding Vue.js applications, enabling rapid project initialization.

Node.js Prerequisites

Begin by ensuring Node.js is installed. Verify the installation by checking the version numbers:

node --version
npm --version

Global Vue CLI Installation

Install Vue CLI globally using npm:

npm install -g @vue/cli

For users in regions with slower npm registry access, consider using a mirrored installation:

npm install -g @vue/cli --registry=https://registry.npm.taobao.org

If installation issues arise, clear the npm cache before retrying:

npm cache clean --force

Confirm the installation by checking the CLI version:

vue --version

For available commands and options, use the help flag:

vue --help

Available Project Templates

View the list of official templates:

vue list

Vue.js offers two primary build system templates:

• Browserify-based configurations
• Webpack-based configurations

Each build system provides both minimal and comprehensive setups. The minimal templates include only essential dependencies for Vue development, while comprehensive versions integrate additional tools like ESLint and unit testing frameworks.

Creating a Webpack Project

Navigate to your desired project directory, then initialize a new project using the webpack-simple template:

vue init webpack-simple starter-app

The command structure follows: vue init [template-name] [project-name]. Avoid using reserved names like 'vue' or 'npm' for your project name.

After initialization, complete the setup process:

cd starter-app
npm install
npm run serve

The development server will start, typically on http://localhost:8080. When the Vue logo appears in your browser, your project is successfully running.