Vue CLI and Vite setup - Mini Project: Build & Apply

Vue CLI and Vite setup

📖 Scenario: You are starting a new Vue 3 project and want to learn how to set it up using two popular tools: Vue CLI and Vite. This will help you understand how to create the basic project structure and configuration files for each tool.

🎯 Goal: Set up two separate Vue 3 projects: one using Vue CLI and one using Vite. You will create the initial project files and add the basic configuration needed to run a simple Vue app.

📋 What You'll Learn

Create a Vue CLI project folder with a main.js file that imports Vue and creates a Vue app

Create a Vite project folder with a main.js file that imports Vue and mounts the app

Add a basic App.vue component file with a template and script setup

Add configuration files needed for each tool (vue.config.js for Vue CLI, vite.config.js for Vite)

💡 Why This Matters

🌍 Real World

Setting up Vue projects with Vue CLI or Vite is a common first step when building web apps with Vue. Knowing both tools helps you choose the best setup for your needs.

💼 Career

Many companies use Vue CLI or Vite to scaffold Vue projects. Understanding these setups is essential for frontend developer roles working with Vue.js.

1

Create Vue CLI project main.js

Create a file named main.js inside a folder called vue-cli-project. In this file, import createApp from vue and import App from './App.vue'. Then create a Vue app using createApp(App) and mount it to an element with id '#app'.

Vue

// Your code here to create Vue CLI main.js

Hint

Use import { createApp } from 'vue' and then createApp(App).mount('#app').

2

Add basic App.vue component

Inside the vue-cli-project folder, create a file named App.vue. Add a <template> section with a <h1> that says "Hello Vue CLI". Add a <script setup> block with no content.

Vue

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Hint

Use <template> with a heading and an empty <script setup> block.

3

Create vite project main.js

Create a folder named vite-project. Inside it, create a file named main.js. Import createApp from vue and import App from './App.vue'. Then create and mount the Vue app to '#app'.

Vue

// Your code here to create Vite main.js

Hint

Similar to Vue CLI, import and mount the app in main.js.

4

Add vite.config.js with Vue plugin

Inside the vite-project folder, create a file named vite.config.js. Import defineConfig from 'vite' and vue from '@vitejs/plugin-vue'. Export the default config using defineConfig with the Vue plugin in the plugins array.

Vue

// Your code here to create vite.config.js

Hint

Use defineConfig and add vue() to plugins.

Practice

1. What is the main purpose of Vue CLI and Vite in Vue development?

easy

A. To quickly create and manage Vue projects with build tools

B. To write Vue components without JavaScript

C. To replace Vue Router for navigation

D. To convert Vue code into plain HTML only

Solution

1. Step 1: Understand Vue CLI and Vite roles

   Both Vue CLI and Vite are tools to start Vue projects easily and provide build and development features.

2. Step 2: Identify their main purpose

   They help set up projects quickly with live reload and bundling, not replacing Vue Router or removing JavaScript.

3. Final Answer:

   To quickly create and manage Vue projects with build tools -> Option A

4. Quick Check:

   Vue CLI and Vite purpose = C [OK]

Hint: Think: tools to start and build Vue apps fast [OK]

Common Mistakes:

• Confusing Vue CLI with Vue Router
• Thinking Vite removes JavaScript
• Believing these tools only output HTML

2. Which command correctly creates a new Vue project using Vite?

easy

A. vue create my-vue-app

B. npm create vite@latest my-vue-app -- --template vue

C. npm install vite vue

D. vite new project vue

Solution

1. Step 1: Recall Vite project creation syntax

   The official way to create a Vue project with Vite is using npm create vite@latest with the --template vue flag.

2. Step 2: Compare options

   npm create vite@latest my-vue-app -- --template vue matches this syntax. vue create my-vue-app is Vue CLI syntax. Options C and D are incorrect commands.

3. Final Answer:

   npm create vite@latest my-vue-app -- --template vue -> Option B

4. Quick Check:

   Vite create command = B [OK]

Hint: Vite uses 'npm create vite@latest' with template flag [OK]

Common Mistakes:

• Using 'vue create' for Vite projects
• Trying to install Vite and Vue separately to create project
• Using invalid commands like 'vite new'

3. Given this command run in a terminal: vue create my-app, what will happen?

medium

A. It installs Vue globally on the system

B. It instantly creates a Vue project without prompts

C. It starts an interactive setup to create a Vue project

D. It runs the Vue development server immediately

Solution

1. Step 1: Understand 'vue create' command behavior

   The vue create command from Vue CLI launches an interactive prompt to select project options.

2. Step 2: Analyze other options

   It does not create instantly without prompts, nor does it install Vue globally or start the server immediately.

3. Final Answer:

   It starts an interactive setup to create a Vue project -> Option C

4. Quick Check:

   vue create = interactive setup [OK]

Hint: vue create prompts you to choose project options [OK]

Common Mistakes:

• Thinking it creates project instantly
• Confusing with npm install commands
• Expecting it to start the server automatically

4. You run npm run dev in a Vite project but get an error saying 'command not found'. What is the likely cause?

medium

A. You forgot to run npm install to install dependencies

B. You need to use vue serve instead

C. The dev script is only for Vue CLI projects

D. You must run vite build before npm run dev

Solution

1. Step 1: Understand npm scripts and dependencies

   The npm run dev command runs the dev server script defined in package.json. If dependencies are missing, the script may fail.

2. Step 2: Identify cause of 'command not found'

   Not running npm install means dependencies like Vite are missing, causing the error.

3. Final Answer:

   You forgot to run npm install to install dependencies -> Option A

4. Quick Check:

   Missing dependencies cause 'command not found' [OK]

Hint: Always run npm install before npm run dev [OK]

Common Mistakes:

• Using Vue CLI commands in Vite projects
• Trying to build before dev without install
• Assuming dev script is only for Vue CLI

5. You want to switch a Vue project from Vue CLI to Vite. Which step is essential to start this migration?

hard

A. Just change the start script in package.json to use Vite

B. Run vue upgrade vite to convert automatically

C. Replace vue.config.js with vite.config.js without changing files

D. Create a new Vite project and move your source files into it

Solution

1. Step 1: Understand migration approach

   Vue CLI and Vite have different setups. The safest way is to create a new Vite project and move your source code there.

2. Step 2: Evaluate other options

   There is no automatic vue upgrade vite command. Simply replacing config files or scripts won't work due to different build systems.

3. Final Answer:

   Create a new Vite project and move your source files into it -> Option D

4. Quick Check:

   Migration starts with new Vite project + source move [OK]

Hint: Start fresh Vite project, then copy your code [OK]

Common Mistakes:

• Expecting automatic conversion commands
• Only changing config files without new setup
• Assuming changing scripts is enough