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.

Practice

1. Which command do you use to start your Vue app locally during development?

easy

A. npm run preview

B. npm run build

C. npm run dev

D. npm start

Solution

1. Step 1: Understand the purpose of each command

   npm run dev is used to run the app locally for development, npm run build creates production files, and npm run preview previews the production build.

2. Step 2: Match the command to running locally

   Since running locally during development means seeing live changes, npm run dev is the correct command.

3. Final Answer:

   npm run dev -> Option C

4. Quick Check:

   Run locally = npm run dev [OK]

Hint: Run locally during development with npm run dev [OK]

Common Mistakes:

• Confusing build with dev command
• Using npm start instead of npm run dev
• Trying to preview before building

2. Which of the following is the correct command to create optimized production files for a Vue app?

easy

A. npm run dev

B. npm run build

C. npm run start

D. npm run preview

Solution

1. Step 1: Identify the command for production build

   npm run build is the standard command to create optimized files for production in Vue apps.

2. Step 2: Eliminate other options

   npm run dev runs the app locally, npm run preview previews the build, and npm run start is not a default Vue command.

3. Final Answer:

   npm run build -> Option B

4. Quick Check:

   Build production = npm run build [OK]

Hint: Build production files with npm run build [OK]

Common Mistakes:

• Using npm run dev to build
• Typing npm run start which is not default
• Confusing preview with build

3. What will happen if you run npm run preview after building your Vue app?

medium

A. It starts a local server to preview the production build

B. It rebuilds the app for development

C. It deletes the build folder

D. It runs the app in development mode

Solution

1. Step 1: Understand the purpose of npm run preview

   This command serves the production build locally so you can check how the optimized app works before sharing.

2. Step 2: Compare with other options

   It does not rebuild or delete files, nor does it run development mode. It only previews the built app.

3. Final Answer:

   It starts a local server to preview the production build -> Option A

4. Quick Check:

   Preview = local server for production build [OK]

Hint: Preview runs a local server for the built app [OK]

Common Mistakes:

• Thinking preview rebuilds the app
• Confusing preview with dev mode
• Assuming preview deletes files

4. You ran npm run build but your dist folder is empty. What is the most likely cause?

medium

A. You forgot to install dependencies with npm install

B. You ran npm run dev instead of build

C. You ran npm run preview before building

D. Your package.json has no build script defined

Solution

1. Step 1: Check if build script exists

   If npm run build runs but produces no files, likely the build script is missing or misconfigured in package.json.

2. Step 2: Rule out other causes

   Missing dependencies cause errors, not empty folders. Running dev or preview does not create build files. So missing build script is the main cause.

3. Final Answer:

   Your package.json has no build script defined -> Option D

4. Quick Check:

   Empty build folder = missing build script [OK]

Hint: Check package.json for build script if dist is empty [OK]

Common Mistakes:

• Assuming npm install fixes empty dist
• Confusing dev and build commands
• Trying preview before building

5. You want to share your Vue app with a friend but first want to check the production version locally. Which sequence of commands should you run?

hard

A. npm run build, then npm run preview

B. npm run dev, then npm run preview

C. npm run preview, then npm run build

D. npm run build, then npm run dev

Solution

1. Step 1: Build the production files first

   You must run npm run build to create optimized files for production.

2. Step 2: Preview the production build locally

   After building, run npm run preview to start a local server and check the production version before sharing.

3. Final Answer:

   npm run build, then npm run preview -> Option A

4. Quick Check:

   Build then preview to check production [OK]

Hint: Build first, then preview to check production locally [OK]

Common Mistakes:

• Previewing before building
• Running dev instead of preview for production check
• Running preview then build in wrong order