Your First Vue.js App with Vite: Hello, World!

Introduction

This tutorial provides a step-by-step guide to creating a basic "Hello, World!" application using Vue.js and Vite. Vite is a build tool that focuses on providing a faster and leaner development experience for modern web projects.

Prerequisites

• Basic understanding of HTML, CSS, and JavaScript.
• Node.js and npm (or yarn/pnpm) installed.

1. Setting Up Your Project with Vite

Open your terminal and use the following command to create a new Vue.js project:

npm create vue@latest my-vue-app

Or, using Yarn:

yarn create vue my-vue-app

Or, using pnpm:

pnpm create vue my-vue-app

Follow the prompts to configure your project. You can typically accept the defaults, though you can choose whether to include TypeScript, JSX, and install dependencies with your preferred package manager. For this tutorial, choosing No to TypeScript and JSX is fine. For installing dependencies, choose your preferred option (npm, yarn, or pnpm).

2. Navigating to the Project Directory

Once the project is created, navigate into your project directory using the cd command:

cd my-vue-app

3. Running the Development Server

Start the development server with the following command:

npm run dev

Or, with Yarn:

yarn dev

Or, with pnpm:

pnpm dev

This command starts a local development server, usually accessible at http://localhost:5173/. Open this address in your web browser to view your application.

4. Understanding the Project Structure

Before modifying the code, let's briefly examine the core project files:

• index.html: The main HTML file that's the entry point.
• src/: This folder contains your Vue.js application code.
  • App.vue: The root component of your application.
  • main.js: The entry point of your application, where you initialize and mount your Vue app.
  • components/: Directory containing reusable components (e.g., HelloWorld.vue).
• vite.config.js: Configuration file for Vite.
• package.json: Contains project dependencies and scripts.

5. Modifying App.vue

Open the src/App.vue file in your code editor. It currently displays a welcome message. Let's replace the content of the <template> section to display "Hello, World!":

<template>
  <h1>Hello, World!</h1>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
h1 {
  text-align: center;
}
</style>

• <template>: Defines the HTML structure of the component.
• <script>: Contains the JavaScript logic (component options, data, methods).
• <style>: Contains the CSS styles for the component. The scoped attribute limits the style's scope to this component.

6. Viewing the Result

Save the changes to App.vue. The browser, with the development server running, should automatically refresh and display "Hello, World!" centered on the page.

7. Congratulations!

You've successfully created your first Vue.js application using Vite. You've set up the project, run the development server, and modified a component to display a simple message.

Next Steps

• Explore the HelloWorld.vue component included in the default project.
• Learn more about Vue.js components, data binding, directives, and event handling.
• Investigate Vite's features like Hot Module Replacement (HMR).
• Start building more complex Vue.js applications!