Setting up a VueJS project using Vue CLI

There are different ways to start a new VueJS project. The easiest and most convenient way is the setup using the Vue CLI. To be able to use the CLI, the necessary NPM modules must first be installed globally. The following command can be executed in the terminal for this purpose:

npm install -g @vue/cli

#oder 

yarn global add @vue/cli 

If the installation is successful, a new command is then available in the terminal. With vue -v, for example, you can check which version of the Vue CLI is now installed.

The project setup via the CLI

To start a project setup, you can start the setup process via the terminal with the help of vue create + the desired project name.

vue create vue-setup

After the command, a small wizard starts that guides you through the setup. First, you are asked whether you want to carry out the configuration manually or use the standard setup, which only includes Babel and ESLint. We first select manually with the arrow keys and then the space bar to see which options are offered.

In manual mode, all options and packages that can be used now appear. For example, I can add the Vue Router to my project relatively quickly and easily. But the setup for unit and end-to-end testing can also be selected.

After the desired selection has been made, the installation of the project and the necessary packages can be started.

A visual project setup using the CLI UI

If you are not one of the terminal enthusiasts, a project setup can also be carried out using a modern interface. To do this, start the UI in the terminal with:

vue ui

This opens the Vue UI interface on port 8000. Project Create starts the process that is already familiar with the CLI when initializing a new project.

First, you can choose the storage location and specify the project name. You can also choose between npm or yarn as the standard package manager. However, a specification is not a must. Once the setting has been made, the wizard process is also started here.

A manual setup can also be carried out via the UI if, for example, the Vue router or Vuex should be added during the setup.

After the successful setup, you are ready to go and can further develop your Vue project.