From the course: Vue.js 2 Essential Training
Basic installation
- [Instructor] Using libraries has gotten really hard in the past few years because of the tools required to run them. Now in contrast, Vue.js gives you two main ways of installing the framework. The easiest is to add a script pack to your current html document. This is similar to how we add things like, perhaps, Bootstrap or Jquery into a page, and if you want to, you can go to this installation page, and you can scroll down to the CDN version, that means a Content Delivering Network. A CDN makes web pages load things from a common place and so most of the time when you load this script, it's going to load from a CDN that will do it pretty quick. So let's go ahead and copy this into our clipboard, and you'll notice that above you'll see that there's actually two versions of the library that you can use. You can use the development version as well as the production version. This happens to be a script pack for the development version, which has additional warnings and a better debug experience. You'll want to use the development version while you are coding, and then when you're ready to put this up on a website, you can use the production version. You can also download them with these two buttons right here. If you wanted to install the smaller production version, you can just change the name of Vue.js right here to Vue.min.js. So let's go ahead and put this in an actual page, and what I've done here is I've created this page at jsbin, and you can see that this is essentially a Bootstrap template, and you'll see that I'm loading the bootstrap.css here as well as Jquery and some other dependencies for Bootstrap like Popper as well as the Bootstrap JavaScript, and if we wanted to install Vue.js, all we need to do is paste that script right here, and then we have the full power of Vue.js as well as Bootstrap and Jquery. Now, you don't really need to install all these libraries, but, realistically, when you're putting things in a web project, you often have things That you've already installed. So let's take a look at how you actually see that this is working. What we want to do is you can create a script tag right here with some code for your project. So in here what we'll do is create a variable for our application, and this is going to use the Vue object that you get from the library, and in here we will create an object, you can see that I added these curly braces here, and in this object, I'm going to establish an element that is going to target something in my HTML, and that's going to be an element with an ID of app, and then after that we are going to create some data that is going to appear in my document. So let's go ahead and make sure that this is indented properly here. And in this data, I'm going to just create an element called name, and I'm going to type in a product right here. Bamboo Thermal Ski Coat. Alright, so with Vue.js, what you can do is, once you've placed things into this data object, then you can use them using a templating system that you get by default, which is pretty cool, and that means that, first of all, we'll need to create the div with an ID of app so that the application targets that right here, and then in here, we can just use an h2 or any other tag, and then use the template syntax in Vue.js that allows to go ahead and output that name. So we'll go ahead and put in the value of the variable here, and if we take a look at output, you'll see that Vue.js allows you to put the name of the variable from our data into our page. So, by default, you're getting this really cool templating system. Vue.js is super powerful and gives you a lot of different features, which we're going to explore in the rest of this course. Now as I mentioned before, there's another way that you can install Vue.js if you're building a more complex application, and that's with a build process that is similar to what you do when you work with like React and Angular. You need to use that when you work in really big, complex projects. We'll talk about those type of installations in later videos, but if your using this on an existing page, this is really all you need to get started.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.