Made withVue.jsClip

Vue JS 3 Tutorial - 2 - Hello World

C

Codevolution

Creator on the Vue.js channel

Watch on YouTube ↗

163K viewsDec 7, 20209:01 runtime

Learn to set up your development environment and create your first Vue JS 3 "Hello World" application. This tutorial covers the prerequisites, including installing Node.js and VS Code with the Vetur extension for optimal development. Discover the four primary methods for…

Chapters

#vuejs#clip#frontend

Development Environment Setup

To start with Vue.js, you need a few tools installed:

Node.js: Download and install the latest stable release from nodejs.org.
Text Editor: Visual Studio Code (code.visualstudio.com) is recommended.
VS Code Extension: Install Vetur from the extensions marketplace for Vue-specific features like syntax highlighting, snippets, and linting.

Four Methods for Using Vue.js

There are several ways to add Vue to a project, each with its own use case:

CDN Package: Include Vue with a <script> tag. Good for quick prototypes or adding Vue to existing legacy projects.
npm Package: Install with npm install vue@next. This is the preferred method for large-scale applications where you manage your own build process.
Vue CLI: A command-line tool that quickly scaffolds a complete, feature-rich single-page application. It includes hot reloading, production builds, and more, out of the box.
Vite: A modern, fast build tool that uses native ES module imports for a superior development experience. It is noted as the potential future standard but was in beta at the time of recording.

Important
The Vue CLI is the recommended approach for this tutorial series because it allows you to focus on learning Vue concepts without worrying about complex build configurations.

Creating Your First Vue 3 Application

Follow these steps to create and run a "Hello World" Vue application using the Vue CLI.

Note
On some systems, you may need to run your Command Prompt or terminal as an administrator to ensure global packages are installed correctly and added to your system's PATH.

Install Vue CLI: Open your terminal and run the global install command.
- Using Yarn: yarn global add @vue/cli
- Using npm: npm install -g @vue/cli
Create the Project: Navigate to your workspace folder and run the create command.
- vue create hello-world
- When prompted, select the Default (Vue 3) [babel, eslint] preset.
Run the Application: Change into the new project directory and start the development server.
- cd hello-world
- Using Yarn: yarn serve
- Using npm: npm run serve

After running the server, you can view your new Vue application at http://localhost:8080.

Setting Up the Development Environment

In this video, let's create our very first Vue application. Let's begin by setting up our development environment.

For Vue, we need two things installed: Node and a text editor of your choice. For node, go to nodejs.org, download and install the latest stable release. If you already have it installed, make sure to update it. For text editor, I recommend VS Code. You can download and install it from code.visualstudio.com.

After installing VS Code, open the extensions tab and install the Vetur extension. This extension provides syntax highlighting, code snippets, linting and formatting support, auto-completion, and a lot more features specifically for Vue.js.

All right, to get us started I have created a folder called vue.js 3 and opened VS Code inside that folder. This folder is going to be our workspace for the rest of the series.

Four Ways to Add Vue.js to a Project

Now, let me tell you that there are four different ways of adding Vue to a project. We will be following only one of them, but I want you to be aware of the different methods.

The first one is to simply include Vue as a CDN package. All you have to do is include a script tag. If you worked with jQuery before, this should seem familiar to you.

The second way to add Vue to your project is using npm. In your project folder, simply run the command npm install view@next. This will install Vue 3 in your project. This is also the preferred approach over the CDN approach when building large-scale applications with Vue.

The third way is to use the Vue CLI. CLI stands for command-line interface, and Vue provides an official CLI for quickly scaffolding single-page applications. What this means is that by running two commands, you have an entire Vue project up and running. You run npm install -g @vue/cli and then vue create followed by the project name. This will set up an entire project for you.

The fourth way is using Vite. Vite is an opinionated web dev build tool that serves your code via native ES module imports during dev and bundles it with Rollup for production. Because of the ES modules approach, your code is served at a lightning-fast speed and you get nearly instant Hot Module Replacement. To set up a Vue project with Vite, you just have to run one command: npm init vite-app followed by the project name. This again will set up an entire Vue project for you.

Choosing the Right Approach: Why Vue CLI?

Although there are four different approaches as we have just seen, we only have to learn one of them to get started with Vue.

The CDN approach probably makes sense when you want to incorporate Vue into an old legacy codebase where some parts of the UI will be enhanced by Vue, or it might also make sense when you want to quickly prototype something for learning purposes.

The npm approach is the recommended approach for building large-scale applications with Vue, but this is granted that you are comfortable with setting up linters, formatters, hot reloading, webpack configs, build scripts amongst other things in your project.

The Vue CLI, as I have already mentioned, lets you create and run an entire Vue project with just two commands. It takes only a few minutes to get up and running with hot reload, lint on save, and production-ready builds. This is the approach we will also be using for the series, as it will allow us to focus on the concepts rather than worrying about webpack and build configurations.

Which leaves us with Vite. Now although Vite is amazing, it's currently in the beta version and the stable release is not out as of this recording. I'm pretty sure that Vite may be the best approach in the future, but for now Vue CLI is what I'm going to recommend. And to be honest, when Vite is the go-to approach, you would have no trouble at all switching from running two commands to running a single command to set up your view project.

Installing the Vue CLI

All right, now that we have decided on the Vue CLI approach, let's create our very first Vue application.

I have opened Command Prompt by running it as an administrator. If you are logged in as an admin, you should have no problems. However, if you're running from a profile on a computer where you're not the admin profile, make sure to open Command Prompt by right-clicking and selecting run as administrator. This is important to ensure Vue gets added to your path environment variable.

So in the command prompt, run the command yarn global add @vue/cli. If you prefer npm, run the command npm install -g @vue/cli. The command will take a few seconds to complete. Once the command completes though, run the command view --version to check the installed version. I am on version 4.5.8.

Creating the "Hello World" Project

Now that the CLI is installed, we can make use of it to scaffold a new project. So again, in the command prompt, inside the vue.js3 folder, run the command vue create followed by the name of the project. Let's call it hello-world.

When you press enter, it's going to ask you if you want to switch your npm registry. I am going to choose no. Next, the Vue CLI is going to ask you to pick a preset. For our basic hello world project we're going to pick default Vue 3 preview with Babel and ESLint. That's the second option. I'm also going to set Yarn as my package manager. This command again takes a few seconds to run, and once the command completes, you should have a new folder called hello-world which contains our Vue application.

Running the Vue Application

Now that the command completed successfully, let's go back to VS Code. Over here you can see that we have our hello-world project.

To run this project, open the terminal, navigate inside the hello-world project folder, so cd hello-world, and then run the command yarn serve. If you're using npm, you might want to run npm run serve. But what the command does is set up a development server on localhost port 8080.

I can control-click this link and head to the browser. You can see that our hello world project application is up and running. By default, the UI features a couple of links for a beginner to get started.

So there you go, your first Vue application up and running, and it pretty much required you to run four simple commands: yarn global add @vue/cli, vue create hello-world, cd hello-world, and finally yarn serve.

All right, now that we understand how to generate a Vue application using the Vue CLI, in the next video, let's understand the project's folder structure.