Setting up Vue project using CLI

Beginners' guide to setting up a Vue app.

Vue js

In this article, we will be looking at how to set up our Vue project using Vue CLI. Vue command-line interface is a very powerful tool when it comes to setting up the project. It helps you easily configure the project with different assets right out of the box and gives you an option to save it as a preset for future use.

Let’s dive right in!

First, let’s install Vue CLI using the node package manager.

npm install -g @vue/cli

You can check the Vue CLI version using this

vue --version

Now that we have Vue CLI installed we can start creating Vue applications. To create a new project we run the following command

vue create app_name

When you enter this command you will be prompted to select default (babel + ESLint) or manual configuration. We will choose Manually select featuresso we can cheery pick the features that we want for our project.

Vue CLI: Creating vue app

Once you do that it will show you all the options to configure your Vue app. Use space to select features required for the project. For this article, I will be selecting

1. Progressive Web App (PWA): Setting up your project for PWA couldn’t be easier. Vue uses workbox under the hood and sets up everything for you.
2. Router: Vue router helps us navigate in the single-page application environment.
3. Vuex: This is Vue's own state management framework.
4. Linter/formatter
5. Unit testing

After making all the selections it should look like this.

Vue CLI: Configuring vue app

Now that you have selected everything you can go ahead and press enter. You will be asked to select a version of Vue js. At the time of writing this article Vue 3 is in beta so we will select the stable version (2.x).

Vue CLI: Version selection for app

CLI would now ask you whether you want to use history mode or not.

The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.

SPA uses # notation to simulate page URLs if you want to use full URL instead of the hash mode you will say Y [NOTE: This requires a properly configured server or this setup will fail in production]. At this point in time, I am okay with the hash mode so I am going to say n

Vue CLI: History mode selection for router

Time to choose our linter/formatter for the project. I use ESLint + Standard config for all my projects so I am going to go ahead and select that one.

Vue CLI: Linter selection

After that you will be asked when to format code here you can choose the option lint on save and press enter.

You can choose a unit test tool from the given options I have some experience with Mocha + Chai so I will just select that.

Based on your preference you will have the option to place the config files in pacakge.json or dedicated config files. I like to keep dedicated config files for these so I will select that.

This is was our final configuration selection/setting. After this, you will be asked whether you want to save this configuration as a preset or not. Since I use this a lot I will type y and then I will enter the name for the preset. Choose a simple yet distinctive name.

You can find these preset in ~/.vuerc. It has a preset array that stores the preset data as an object. You can add/edit/delete them using nano or vim.

Once this is done, let CLI do its magic!

It will take a minute or so to set up everything based on the configuration you just selected. When that is over you can run the following command to start the project.

cd new_app
npm run serve

This will start the development server on http://localhost:8080/

Great work!

In the next article, we will move on to understanding the Vue app file structure and installing external libraries.