Setting up a development environment

Now that you have seen how to set up Vue.js in JSFiddle, I just want to briefly show you how you can set up a simple development environment on your own machine. To keep things simple, I am not going to get into Webpack or the Vue CLI now, as I will cover this in later articles. So to easily get up and running, there are two simple approaches right now, the first being to use the CDN as we did in the previous article.

The first thing I will do, is to create an HTML file that will contain pretty much the same code as you saw in the previous article.

<div id="app">
   <h1>{{ message }}</h1>
</div>

The next thing we need to do, is to add a script tag for Vue.js, so I will just go ahead and grab the CDN URL from vuejs.org.

<script src="https://unpkg.com/vue/dist/vue.js"></script>

Now it’s time to add our JavaScript code. Simply add this inline at the bottom of the page, but it could also be loaded from an external file.

<script type="text/javascript">
   new Vue({
      el: '#app',
      data: {
         message: 'Hello World!'
      }
   });
</script>

If you open the HTML page in a browser, you should see “Hello World!” being rendered on the page.

Alternatively you can download the Vue.js file instead of using the CDN. Just save the JavaScript file from vuejs.org and save it in your project’s root directory.

Now all that’s left to do, is to replace the URL in the script tag with a path on the file system that is relative to the project directory.

<script src="vue.js"></script>

If you open up the browser once again and refresh the page, you should see the same result as before.

So if you prefer to follow along with this setup rather than using JSFiddle, then this is how you can do it. Later in the series, I will get back to setting up a more advanced development environment, but for now, these options are sufficient.