Getting Started With Vue.js

#Beginners

Elliot Forbes ⏰ 4 Minutes 📅 Feb 28, 2018

In this tutorial, we are going to look at how you can setup your development environment so that you can get started writing your own VueJS.

We will be utilizing the vue-cli in order to start our project off and then we’ll be diving in and making a few edits, before finally building it using the same vue-cli.

Video Tutorial

A Simple Vue App

Before I get started, it must be noted that you can get up and running really quickly with VueJS 2 in less than 30 lines of code. Below you will find a webpage that is a very simple VueJS page that simply prints out Hello World to the browser when hit.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>VueJS Starter</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
    new Vue({
        el: '#app',
        data() {
            return {
                message: 'Hello World'
            }
        },
        created() {
            console.log("Hello World")
        }
    });
    </script>
</body>
</html>

It should be noted though that if you want to create more advanced VueJS applications then using the vue-cli going forward is recommended!

Getting Started with the CLI

In order to get started, we’ll first have to install the vue-cli. This can be done using npm:

$ npm install -g @vue/cli

Once this has successfully run, you should now be able to run vue and it should return the following:

$ vue

  Usage: vue <command> [options]


  Options:

    -V, --version  output the version number
    -h, --help     output usage information


  Commands:

    init        generate a new project from a template
    list        list available official templates
    build       prototype a new project
    help [cmd]  display help for [cmd]

Now that we have successfully verified our installation, we can begin our journey into creating VueJS based applications.

Creating Your First Application

In order to generate our first project, navigate to a new project directory and then run the vue create my-project command.

$ vue create my-project

Vue CLI v3.4.0
✨  Creating project in /path/to/project
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.5.1
(node:50810) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() me
thods instead.
info No lockfile found.
[1/4] 🔍  Resolving packages..
... (omitted for brevity)

Running Your Application Locally

Once you’ve successfully initiated your basic Vuejs project, it’s time to run it locally and see it all working. You can do that by running the following command:

$ npm run serve

> starter-project@1.0.0 dev /Users/elliot/Documents/Projects/tutorials/vuejs
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 3736ms                                                                                                                                                                                          22:05:21

 I  Your application is running here: http://localhost:8080

This will run a development server on http://localhost:8080 and you will be able to navigate to this in your browser. You should hopefully see a fully function Vuejs application running within your browser.

Now that you have your application up and running, you are free to explore the directories and the files generated by the vue cli. We shall be demystifying what they all mean in tutorials to come.

Building Your Application

Once you are happy with your application and want to deploy it to the likes of an AWS S3 bucket or to your production server, you will first have to build it by running this command:

$ npm run build

This will then create a dist/ directory within your application’s root directory. This dist/ directory contains everything your application needs in order to run. You can then simply drop the files within this directory to your server or S3 bucket and it will be ready to go!

Minor Changes To Get Started

Now that we have our basic VueJS application up and running, it’s time to make some simple edits to it just to get us started. Open up the src/components/HelloWorld.vue component and remove some of the default HTML code from the <template/> section like so:

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        msg: "Welcome to Your Vue.js App"
      };
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>

When you click save and have npm run dev running within the console, you should notice that it starts to rebuild everything for you. When you refresh http://localhost:8080 you should see your changes reflected within the browser.

Congratulations, you have successfully built and subsequently edited your first VueJS application!

Conclusion

Hopefully, you found this tutorial helpful in getting started with Vuejs 2! If you did, or you require further assistance, then please let me know in the comments section below.