The Vue CLI

The Vue CLI

So far you have been using Vue via a CDN script tag. For real applications, the Vue CLI (Command Line Interface) provides a full development environment with a build system, hot reload, linting, and single-file components.

What the Vue CLI Provides

Feature	Benefit
Webpack build	Bundles, minifies, and optimizes your code
Hot module reload	Changes appear instantly without a full page refresh
ES6+ support	Babel transpiles modern JavaScript for older browsers
.vue files	Single-file components with template, script, and style
Linting	ESLint catches errors and enforces code style
Dev server	Serves your app locally with live reload

Installing the Vue CLI

npm install -g @vue/cli

vue --version
// @vue/cli 5.x.x

Creating a Project

vue create my-project

The CLI asks you to pick a preset. For learning, choose "Default (Vue 2)" or manually select features. It scaffolds the project and installs dependencies automatically.

Project Structure

my-project/
├── node_modules/
├── public/
│   ├── index.html         (the HTML shell)
│   └── favicon.ico
├── src/
│   ├── App.vue            (root component)
│   ├── main.js            (entry point)
│   ├── assets/            (images, fonts)
│   └── components/        (reusable components)
├── package.json
└── babel.config.js

Running the Project

cd my-project
npm run serve

The dev server starts (usually on port 8080) with hot reload. Edit any .vue file and the browser updates instantly.

Build Commands

Command	Purpose
npm run serve	Start the development server
npm run build	Build for production (outputs to dist/)
npm run lint	Run ESLint to check code quality

Key Takeaways

• The Vue CLI provides a full development environment with webpack, Babel, and hot reload
• vue create project-name scaffolds a new Vue project
• npm run serve starts the dev server; npm run build creates a production bundle
• Single-file components (.vue files) combine template, script, and style in one file