Use Vue CLI 3 to Scaffold Vue Project

In this guide we'll create a Vue project using Vue CLI 3. CLI stands for Command Line Interface, Vue CLI enables us to quickly bootstrap a new Vue project. It allows us to pick libraries we want to use, it configures webpack for us and it also allows us write code in any way we like. Vue CLI is feature rich and it offers us out-of-the-box suport for Babel, TypeScript, ESLint, PostCSS and many other good things we developers like.

Vue CLI allows us also to use graphical user interface that comes along with CLI as it gets installed on our system. We can create, develop and manage our projects through a user friendly GUI.

Before installing Vue CLI a prerequisite is to have npm installed on your machine. Then to install the CLI it self, run this command in your terminal:

npm i -g @vue/cli

To create a Vue project, we'll run

vue create sample-vue-project

Vue CLI will prompt you to pick a preset. Using arrow key down, pick Manually select features option. Using default option is fine as well, however in this guide we'll go with second option.

Next screen will present us with list of feature options. Among features listed select Babel, Router, VueX, CSS Pre-processors and Linter options. These are the most common used features in Vue applications and they will suffice for this guide.

Select no when asked about using history mode for router. For this guide

We'll pick Sass/SCSS in the next screen.

On the next screen Vue CLI is asking us to pick a linter. We'll go with ESLing  + Prettier

On the next screen Vue CLI will ask us about additional lint features. We'll pick Lint on save.

We'll use dedicated config files for Babel, ESLint, etc. Picking dedicated config files will makes it easier to update certain options and feature knowing they are located in a feature specific file.

After we've picked dedicated config files, we'll get one more screen which will ask us if we want to save these options as a preset. If we choose no, preset won't be saved, however if we choose yes preset will be saved for future use, so we can quickly bootstrap new project with the exactly same settings. For this guide we'll choose not to save the preset.

Once we have are done with selecting options and press enter on the last screen Vue CLI will start to initialize our project. Vue CLI will use npm to install packages we've picked in configuration wizard we've just gone through.

Once initialization process has completed, we should see following screen.

We'll cd into newly created folder

cd sample-vue-project

In order to view it in the browser, we execute this command

npm run serve

Application is now running inside a browser and we are able to navigate between Home and About thanks to Vue Router being installed by Vue CLI. In a future guide we'll explore how to edit the project using Vue UI. We'll also take a look at configuring Visual Studio code to work with our Vue project.