Installation options

- [Instructor] Vue has some of the most comprehensive tool sets of any library, so let's take a look at some of the installation options. First, you're going to need to decide how you want to set up the project. Vue is one of the only modern frameworks that allows you to use it with a single script tag in your HTML versus a complex but more app friendly build process. It's one of the reasons it's called a progressive framework. If you're just getting started, it's perfectly fine to use the script tag with this URL. It's also fine to include Vue like this in an existing project or HTML page. Now, if you want to create an app where Vue is running the whole thing, then it's best to learn the app build process. You can install this using the terminal with this command, but there's a better way. Vue.js has an official CLI project. A CLI is a command-line interface, normally a terminal tool that sets up a process that helps you build an application. You can find more information about the Vue CLI at this URL. You can install CLI using npm, the Node package manager that comes when you install Node.js with a command like this. If you prefer using the Yarn project, you can use this command instead. There are two ways to create a project. You can use a terminal command, or use a GUI, or a graphical user interface. Once you've installed the CLI, you can create a project using the CLI command vue and then use the create option with the name of the project you want to create. So you would put in here whatever you wanted this to be and that could be something like awesome-app. There's also a separate GUI that you can use by issuing a vue and then a ui command. Now, the GUI is a nice visual way to set up your build process. Before you start with Vue.js, you want to install the developer tools, which are available for either Chrome or Firefox. There's also an Electron tool that helps you if you want to test the view in mobile platforms, and you can find the Chrome developer tools at this URL, the Firefox developer tools here, and the Electron platform at this URL. Everyone gets started by using a simple script tag and eventually grow to try the CLI tools. In this course, we'll get started with the script tag and then move on to the CLI in later videos. Finally, let's take a look at a couple of pages where I've created samples of what a Vue.js file should look like. Let's start with this starter piece of code at this URL. In this page, you'll see that I've created a link to Vue.js right here, and I've added a couple of things that I'm going to be using in this project. I've added a copy of the Bootstrap framework on this line as well as a copy of Font Awesome, just in case I want to any icons. In addition to that, I've created a couple of sections that I'll be updating with code. First is where the template part of the code will go, which will be right here. So we'll inserting things in here. Usually this div has an id of app, and then there is a section for you to type in the script. The script will go in here. And most of the time you won't see me typing in the script tags themselves. I'll just be typing in the code that goes in here. In addition to that, just to make things nice, I've created a container class since I'm using Bootstrap as well as added a little bit of a margin on the top of the page. Now let's take a look at a sample code pen that I'll be using to allow you to get to these files in a quicker manner. If you go to this code pen, you'll notice that there is a single div tag, and you can't really see the script tag at all. CodePen automatically inserts that for you. And so what I'll be doing most of the time is typing in my template between these two divs, and then type in any scripts on this JS part on the right-hand side. Now, because I think that the default CodePen style is pretty dark and difficult to look at, I'm going to log in and give you a slightly different look to this. I'm going to change this view so that it appears on the left side. We'll have a little bit more room for the page and our code will appear here at the top and bottom hover. When you pull this up, it's going to look a little bit different for you. If you want to know where all the other code for this page is, you can go to settings in CodePen, and if you look at this HTML section, this is usually where you add additional classes that you want to be available to the entire page. And then if you go to the CSS tab here, you'll see that here's our link to Bootstrap and also our link to Font Awesome, and then our link to Vue.js is actually here in the JS tab on this line right here. But other than that, the code here is pretty identical to the starter code that I gave you on GitHub. Now, this is going to make some of the exercises and examples a lot easier to work with.