Setting Up Your Environment

Vue.js Fundamentals

Before you can begin using Vue.js, you first need to set up a development environment. Since you’re just getting started with Vue.js, you're going to keep it simple and only use the absolute necessities.

Start off by creating a new folder on your computer and naming it Vue. This will house all your files and make it easy for you to find your work later on. Inside your Vue folder, create another folder but this time call it res (short for resources). It’s good practice to limit number of files present in your root directory by keeping all other files within logically named folders. In this case, your res folder.

There’s still one last folder to create and that’s your js directory. Create it now within your res directory. Your folder structure should now look like this

Vue
==== res
======== js

Now that you have a clean environment to work from, you can start creating the actual files that will contain your code. The first one that you need to create is your index.html file. This will be the foundation of your application and will tell all your other files what to do.

Create the index.html file at the root of your environment so that your directory hierarchy looks like this.

Vue
index.html
==== res
======== js

The last file you will create is your app.js file. This is where you will place all of your JavaScript code and import other .js files, once you are ready to create more complex applications.

Vue
index.html
==== res
======== js
======== app.js

The next step is set up the index.html. Open it up using your preferred text editor. If you don’t have one, I recommend downloading the Atom editor from atom.io. It's clean, fast and works well for web development.

Inside the index.html, you are going to place the standard boilerplate for creating web pages.


                  <html lang="en">
                   <head>
                     <meta charset="utf-8">
                     <meta http-equiv="X-UA-Compatible" content="IE=edge">
                     <meta name="viewport" content="width=device-width, initial-scale=1">
                   </head>
                   <body>
                   </body>
                  </html>
                

Now you’re ready to import Vue.js and the app.js file you created earlier into the application. To do so, create two script elements right above the closing body tag in in your HTML. You will use the first one for Vue.js and the second one for app.js.

Importing Vue.js into your application can be done a variety of ways, but to keep things simple, you are going to use a CDN. To get the URL for the Vue.js CDN, go to vuejs.org.

Once there, you will see a Get Started button. Click on it to be taken to an introduction page with lots of information about Vue.js. Feel free to take a look around and acquaint yourself with the website. This will be the first place you go to when trying to find information about Vue.js.

Once you're done, click on the Installation link to the left of the page. Right above the Introduction link. This page will give you some more information about the various ways that you can install Vue.js but you are only considered with the CDN at the moment. Scroll down until you see it on the page.

You should now see a link with the name of unpkg. This is the latest, and recommended, version of Vue.js. Right-click on the link and click copy URL. This will be the URL that you will use to import Vue.js into your Vue.js application.

Go back to your index.hmtl file and find the two script elements you created earlier. Inside each element, create an src attribute and give the first one the value of the URL you copied above.


                  <script src=”https://link.to.vue.js.url”></script>
                

The value of the second script element will be the location of your app.js file, so res/js/app.js.


                  <script src=”app.js”></script>
                

After you finish creating your HTML, adding the script elements, and then adding the src attributes along with their respective values, your HTML file should look like the one below.


                <html lang="en">
                <head>
                  <meta charset="utf-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1">
                </head>
                <body>
                  <script src=”https://link.to.vue.js.url”></script>
                  <script src=”app.js”></script>
                </body>
                </html>
              

Congratulations! You have now created your Vue.js development environment and you are now ready to start creating Vue.js applications! In the next lesson, you will learn the basics of how Vue.js works and create a simple application to test out the JavaScript library.