Running and building a Vue app - Cheat Sheet & Quick Revision

Recall & Review

beginner

What command do you use to start a Vue app in development mode?

You use npm run dev or yarn dev to start the Vue app in development mode. This runs a local server with hot reload so you can see changes instantly.

beginner

What does the npm run build command do in a Vue project?

It creates optimized, minified files ready for production. These files go into the dist folder and can be deployed to a web server.

beginner

Why do we use a local development server when running a Vue app?

A local server lets you see your app in a browser with live updates. It also handles module loading and supports features like hot module replacement.

beginner

Where are the production-ready files stored after building a Vue app?

They are stored in the dist folder inside your project directory.

intermediate

What is hot module replacement (HMR) in Vue development?

HMR updates parts of your app instantly in the browser without a full reload, making development faster and smoother.

Which command starts the Vue app with live reload for development?

A npm run dev

B npm run build

C npm start

D vue serve

npm run dev starts the development server with live reload. npm run build creates production files.

Where does Vue put the files after running npm run build?

A src folder

B dist folder

C node_modules folder

D public folder

The dist folder contains the optimized production files after building.

What is the main benefit of hot module replacement (HMR)?

A Instant updates without full page reload

B Smaller build size

C Faster app startup

D Better SEO

HMR updates changed modules instantly in the browser without reloading the whole page.

Which file usually contains the scripts to run and build a Vue app?

A main.js

B vue.config.js

C package.json

D index.html

The package.json file defines scripts like dev and build for running commands.

What does the development server provide besides live reload?

A Code minification

B Database connection

C Production optimization

D Module loading and error overlays

The development server handles module loading and shows errors directly in the browser.

Explain the steps and commands to run a Vue app during development and then prepare it for production.

Think about how you see changes live and then how you get files ready to share.

Describe what hot module replacement (HMR) is and why it helps when running a Vue app.

Imagine editing your app and seeing changes immediately without refreshing.