Running and building a Vue app - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to run a Vue app using the CLI.

Vue

npm run [1]

Drag options to blanks, or click blank then click option'

Astart

Bbuild

Cserve

Ddeploy

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'build' instead of 'serve' to run the app.

Trying 'start' which is not a Vue CLI command.

Use npm run serve to start the development server and run the Vue app locally.

2fill in blank

medium

Complete the code to build the Vue app for production.

Vue

npm run [1]

Drag options to blanks, or click blank then click option'

Aserve

Bbuild

Cstart

Ddeploy

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'serve' instead of 'build' to prepare production files.

Trying 'deploy' which is not a standard Vue CLI command.

Use npm run build to create optimized files for production deployment.

3fill in blank

hard

Fix the error in the command to run the Vue app.

Vue

npm run [1]

Drag options to blanks, or click blank then click option'

Aserve

Brun

Cbuild

Dstart

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'start' which is common in other frameworks but not Vue CLI.

Using 'run' which is not a Vue CLI command.

The correct command to run the Vue app is npm run serve. 'start' or 'run' are not valid Vue CLI commands.

4fill in blank

hard

Fill both blanks to create a build command with a custom output directory.

Vue

vue-cli-service build --dest [1] --mode [2]

Drag options to blanks, or click blank then click option'

Adist

Bproduction

Cbuild

Dsrc

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'src' as output folder instead of 'dist'.

Using 'build' as mode instead of 'production'.

The --dest option sets the output folder, commonly 'dist'. The --mode option sets the environment mode, usually 'production' for builds.

5fill in blank

hard

Fill all three blanks to create a script in package.json for running the Vue app in development mode.

Vue

"scripts": { "[1]": "vue-cli-service [2] --port [3]" }

Drag options to blanks, or click blank then click option'

Aserve

C8080

Dbuild

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'build' instead of 'serve' for the script name or command.

Using a wrong port number.

The script name is usually 'serve'. The command is 'vue-cli-service serve' to run the dev server. The default port is 8080.

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