Creating a new Vue project - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

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

Vue

vue create [1]

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

Abuild

Binstall

Cmy-vue-app

Dserve

Attempts:

3 left

💡 Hint

Common Mistakes

Using commands like 'install' or 'serve' instead of the project name.

Forgetting to provide a project name after 'vue create'.

Use vue create my-vue-app to start a new Vue project named my-vue-app.

2fill in blank

medium

Complete the command to navigate into your new Vue project folder.

Vue

cd [1]

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

Apublic

Bsrc

Cnode_modules

Dmy-vue-app

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to cd into folders like 'src' or 'public' before entering the main project folder.

Typing the wrong folder name.

After creating your Vue project, use cd my-vue-app to enter the project folder.

3fill in blank

hard

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

Vue

npm run [1]

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

Aserve

Bbuild

Cinstall

Dcreate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'npm run build' which only prepares files for production.

Typing 'npm run create' which is not a valid script.

Use npm run serve to start the Vue development server and see your app in the browser.

4fill in blank

hard

Fill both blanks to install Vue CLI globally using npm.

Vue

npm [1] -g [2]

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

Ainstall

Bupdate

C@vue/cli

Dnpm

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'npm update' instead of 'install'.

Typing 'npm install -g npm' which installs npm itself, not Vue CLI.

Use npm install -g @vue/cli to install Vue CLI globally on your computer.

5fill in blank

hard

Fill all three blanks to create a Vue project with default preset and enter its folder.

Vue

vue create [1] && cd [2] && npm run [3]

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

Amy-app

Cserve

Dbuild

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for project creation and folder navigation.

Running 'npm run build' instead of 'npm run serve' to start the server.

This command creates a Vue project named my-app, enters its folder, and starts the development server.