Vue CLI and Vite setup - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new Vue project using Vue CLI.

Vue

vue create [1]

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

Amy-vue-app

Bvite-app

Creact-app

Dangular-app

Attempts:

3 left

💡 Hint

Common Mistakes

Using Vite project name with Vue CLI command

Using wrong project names like react-app

Use vue create followed by your project name to start a Vue CLI project.

2fill in blank

medium

Complete the command to create a new Vue project using Vite.

Vue

npm create vite@latest [1] -- --template vue

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

Avue-cli-app

Bvite-vue-app

Cvue-vite-app

Dreact-vite-app

Attempts:

3 left

💡 Hint

Common Mistakes

Using React template

Wrong project name format

Use npm create vite@latest with your project name and --template vue to create a Vue project with Vite.

3fill in blank

hard

Fix the error in the command to start the Vue CLI development server.

Vue

npm run [1]

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

Aserve

Bstart

Cdev

Dbuild

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'start' or 'dev' which are common in other frameworks

Using 'build' which is for production build

Vue CLI projects use npm run serve to start the development server.

4fill in blank

hard

Fill both blanks to install dependencies and start the Vite development server.

Vue

npm [1] && npm run [2]

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

Ainstall

Bserve

Cdev

Dbuild

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'serve' for Vite dev server

Skipping install step

First install dependencies with npm install, then start Vite dev server with npm run dev.

5fill in blank

hard

Fill all three blanks to add Vue Router to a Vite project and start the server.

Vue

npm [1] vue-router && npm run [2] && echo '[3] started'

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

Ainstall

Bdev

CVite server

Dserve

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'serve' instead of 'dev' for Vite

Wrong echo message

Install Vue Router with npm install vue-router, start Vite dev server with npm run dev, and print a message.