Vue Setup and Build Tools

Vue Setup and Build Tools

So far, we have been using Vue by including it via a CDN script tag.

While this is great for learning, it is not suitable for large, production-ready applications.

Modern Vue applications are built using professional build tools and bundlers.

Why Use Build Tools?

Using a build tool unlocks the full power of the Vue framework.

It allows you to author Vue components in special .vue files.

It also provides Hot Module Replacement (HMR), meaning your browser updates instantly when you save a file.

Furthermore, it compresses and minifies your code so your website loads incredibly fast.

Introducing Vite

The official build tool recommended by the Vue team is called Vite.

Vite is a blazing fast frontend build tool created by the founder of Vue.

It provides an extremely fast development server and optimized production builds.

Creating a Vue Project

To create a new Vue project, you must have Node.js installed on your computer.

Open your terminal or command prompt.

Navigate to the folder where you want to create your project.

Run the following command:

npm create vue@latest

The Project Setup Prompts

After running the command, you will be presented with several optional features.

You will be asked to name your project.

You will also be asked if you want to add TypeScript, Vue Router, or Pinia.

For beginners, it is highly recommended to select "No" for all optional features until you are comfortable with the basics.

Starting the Development Server

Once the project is created, you need to navigate into the new project folder.

Then, you must install all the necessary dependencies.

Finally, you can start the Vite development server.

cd my-vue-project
npm install
npm run dev

Your new Vue application will now be running locally, usually at http://localhost:5173.

The Project Structure

When you open your new project in a code editor, you will see a structured set of folders.

The index.html file is the entry point of your application.

The src folder is where you will write all of your Vue code.

Inside the src folder, you will find main.js which initializes the Vue app, and App.vue which is your root component.

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')