Vue 3 Cli

Posted on  by admin
In this tutorial, you’re going to learn how to get up and running with the Vue 3 project from scratch with step-by-step instructions.

The first step is to install Node.js & NPM (Node Package Manager) to your computer.

You can check to see if they’re already installed by going to the Terminal/Command prompt window in your computer and running a couple of commands.

To check the installed version of node js, . If you already have it installed, make sure it’s version 10 or above. To check the npm, run the following command.

If they’re not installed you’ll get the “command not found” message or something similar when running node and npm version check commands.
In that case, you will need to install them.

So, head over to the Node.js Website in your browser – you can see two versions and I would recommend using LTS which is the more stable version and it also says recommended for most users.

Click the LTS button which then starts downloading the Node.js package file on the computer.

Double click the package file to install it which will bring up the installer window.

You can pretty much install like you would other applications.

As you can see from the introduction tab, I’m not only installing node.js but also npm – so we do not need to install them separately.

Hit Continue, Continue, . Then Agree and install, which will ask for the admin password. Once the password is entered, it’ll take a few seconds to complete the installation process.

The next step is to install Vue CLI. So, What’s Vue CLI? Vue CLI is an official vue npm package that allows you to create a vue project quickly on your computer.

Let’s install it globally, so that you can create a vue project anywhere on the computer.

Open up the Terminal window and run the following command.
3

It will take a few seconds to complete the installation process. If it says that you do not have permission, just run the command again by adding sudo in front of it like so, which will ask you to enter your admin password and then you will be all set.

In order to create a vue 3 project, we need a vue cli version of at least 4.5 or above.
1

If you’ve already installed vue cli, you can check the version using the following command.

# Global CLI Config

If you have a version lower than 4.5, you can simply upgrade it by running the command below. The next step is to create a vue 3 project.

To do that, open up the terminal and go to the desktop by typing:. You will then be asked a question – which version of vue you want to use and you can pick vue 3 by moving the arrow key up and down on the keyboard and hit enter to make a selection.

This will start creating our vue 3 project with the project name as a folder name. It will take a few seconds to create the vue 3 project and install its default dependencies.

Once it’s done, you can see the folder with the project name on your desktop. The last step is to run the vue 3 project on the browser. As you can see, my terminal window gives me two commands to run the project. The first command is to go into the project folder:. To run the app, run the following command. To be organized, I’m going to run the project from my Visual Studio Code editor instead of using the Terminal window.

Go to the Applications folder → Visual Studio Code. Then, File → Open → Then navigate to the project folder that we created on the desktop and hit open.

As you know, the Terminal window is integrated with Visual Studio, so I can simply open it by choosing the Terminal option from the menu bar at the top and then New Terminal which will open up a new window at the bottom of the editor.

As you can see, the terminal is already into the project so I do not have to use the first command which is . All I have to do is run the npm run serve command.

Which will start running the server on my computer and give me the localhost URL.

Feature Rich