How to kickstart a Vue.js project in 3 min

#vue #beginners #cli #javascript

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 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:

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:

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:

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:

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 Enter.

The result should be similar to this:

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:

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:

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.

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, 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