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.