How to kickstart a Vue.js project in 3 min
Tags: vue, beginners, cli, javascript
Published: 2019-11-01 15:51:16

Without losing many words I'll start straight away: This is a guide showing how to rapidly start Vue.js development with the Vue CLI. So if you wanted to try Vue.js for some time now and can relate to questions like *"How to begin without much effort?"* — I hope this post can make the start with Vue.js easier for you.

## Setup Vue CLI

To save a lot of time, let the [Vue Command-Line Interface](https://cli.vuejs.org) do all the work for you. Vue CLI is simply a npm packages, that is globally installed to provide the `vue` command. You can install it by using *npm* or *yarn*:

```bash
npm install -g @vue/cli
# OR
yarn global add @vue/cli
```

*Note: Vue CLI requires Node.js version 8.9 or above*

To verify the successful installation, try this:

```bash
vue --version
# 4.0.5
```

Now everything's ready to setup your project.

## Create a new project

Navigate to the directory where you want to start your new project in and run the following command:

```bash
vue create my-vue-app
```

Note that `my-vue-app` is the title of your project, choose whatever title you like.

Now Vue CLI starts an interactive feature selection, let's see what we have here:

![Vue CLI new project](https://thepracticaldev.s3.amazonaws.com/i/6wr50glhjgfs50h6bo9m.png)

At this point you can either choose a preset (the first two options in the screenshot above are presets I already saved earlier) or the default configuration or the manual selection of features. For now you can just navigate to *default* using the arrow keys and hit <kbd>Enter</kbd>.

The result should be similar to this:

![Vue CLI process new project](https://thepracticaldev.s3.amazonaws.com/i/wzplow20zq40r2fhwby0.png)

Looks like Vue CLI was really busy doing things. Let's see, what it did in particular (not necessarily in that order):

- Create a default `package.json` containing some dependencies for production and development
- Install dependencies (node modules)
- Create the project files and directories
- Initialize a Git repository
- Create a `README.md` with some basic commands to develop your project

The project file structure looks like this:

![Vue Project File Structure](https://thepracticaldev.s3.amazonaws.com/i/ryili8phptsf0kqlraea.png)

## It is served hot

Now that you've got an overview what Vue CLI created for you, you can start a development server to see the result. Run the following:

```bash
yarn serve
```

This compiles the project and serves it at `localhost:8080` with hot-reload. So whenever you're changing something (e.g. adjusting the welcome message at line 4 in `App.vue`) you don't have to reload the page in your browser, it updates automatically.

![Vue App in Browser](https://thepracticaldev.s3.amazonaws.com/i/t8wqim3yvxopvd248r0f.png)

Now simply start playing around with Vue.js. This post is as incomplete as it is short - it was just meant to be a starting point for those struggling to begin with Vue.js. And don't forget to [look into the docs](https://vuejs.org/v2/guide/), they are awesome 😎

Let me know in the comments, if you want to go more into detail at any point!

---

*Originally published: 1st November 2019 on [Medium](https://medium.com/@devmount/how-to-kickstart-a-vuejs-project-709d41abc0f1)*