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

Need a 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');

Need a 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

Need a 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

Need a hint?

Use defineConfig and add vue() to plugins.