Running and building a Vue app - Mini Project: Build & Apply

Running and building a Vue app

📖 Scenario: You want to create a simple Vue app that shows a welcome message. Then you will learn how to run it locally and build it for production.

🎯 Goal: Build a Vue app with a basic component, run it on your computer, and create a production build.

📋 What You'll Learn

Create a Vue app with a root component

Add a message data property

Display the message in the template

Run the app locally using `npm run dev`

Build the app for production

💡 Why This Matters

🌍 Real World

Vue apps are used to build interactive websites and web apps that run smoothly in browsers.

💼 Career

Knowing how to run and build Vue apps is essential for frontend developers working with modern JavaScript frameworks.

1

Create the Vue app and root component

Create a Vue app with a root component named App. In the App.vue file, add a template section with a <h1> tag that says Welcome to Vue!.

Vue

  



// Your code here

Hint

Use the <template> tag to write HTML and put the welcome message inside an <h1> tag.

2

Add a message data property

In the App.vue file, add a message variable inside the <script setup> section. Set it to the string "Hello from Vue!". Then update the <h1> tag to display the message variable using Vue's template syntax.

Vue

  {{ message }}



// Your code here

Hint

Use ref from Vue to create a reactive variable called message.

3

Run the Vue app locally

Open a terminal in your project folder. Run the command npm run dev to start the Vue development server. This will let you see your app in the browser at http://localhost:5173.

Vue

# Your code here

Hint

Use your terminal to run npm run dev and open the browser at the shown address.

4

Build the Vue app for production

In the terminal, run the command npm run build to create a production-ready version of your Vue app. This will generate a dist folder with optimized files you can deploy.

Vue

# Your code here

Hint

Use your terminal to run npm run build and check the dist folder.

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