The first project

Installing NodeJS and npm

Before you can run a VueJS app locally, you must install NodeJS. NodeJs is a JavaScript runtime environment that executes JS code without a browser.

After installation, open your command prompt / terminal.

To confirm Node is installed type node -v which will print the current version number. To confirm NPM is installed type npm -v which will print its current version number.

You should see a version number such as: v12.13.0 for node and 6.13.1 for npm.

Node and npm are updated frequently so it’s likely the numbers won’t match.

Installing vue-cli

Vue-cli is a command line helper for generating and managing VueJS applications.

Let’s install it globally with npm so we can use it from our CLI: npm install -g @vue/cli

After installation, restart your CLI terminal to ensure it has the latest commands loaded, and check vue-cli works by running: vue --version

Hello World project

Now we have everything setup and we are ready to create our first project.

We can crete our first project simply by running the command vue create <app-name>, so for example vue create helloworld. This will create a new folder in our current folder called helloworld and initialize our project there.

The tool will ask us what sort of settings we would like to use. For now we can use the defaults (babel, eslint; see chapter 5 for details). Feel free to explore the advanced options as well. Select items by pressing spacebar and confirm selections with enter. The advanced settings will be useful when creating our weather app project.

We can also run the hello-world app as a test in our browser via scrimba: https://scrimba.com/p/pXKqta/cQ3QVcr

First start

Once the setup is finnished we can now got to our project folder and start up our HelloWorld app.

cd helloworld
npm run serve

After these commands you should see two links in your terminal. Open up one of them and you should see the "Welcome to Your Vue.js App" page pop up in your browser.

Congratulations, you have just created your first Vue project.

Play around

As we started up our application with the command npm run serve, the app we are viewing is in a live development mode. This enables us to easily develop our application as all changes are applied in real time.

We can play around with this by opening up src/component/HelloWorld.vue and making some changes to it. Change some text in the file and save it. Notice how the page on your web browser automatically reloads with new changes.

This is called live reloading, a very useful feature for developers.

Read more