Install the vue/cli

Instructor: [0:00] One way that we have built this application is fine for us learning Vue, it's not the way we will generally build. We use the Vue CLI, or command-line interface, and the build tools that come along with that. How do we do that?

[0:14] I'm going to, npm install -g, for globally, @vue/cli. Once that's finished, I'll do, vue --version, to make sure I have it installed. We can see I do, and now, I'm going to create. I'm going to do, vue create TicketApp. We want to use Vue 3, so we'll go down and we'll select Vue 3, and we can see this TicketApp folder.

[0:46] This folder is now quite full. We have a public folder, which has got an index.html file, which is where our Vue application will be mounted on, much like we did in our example application. We have a source directory, which has a main.js file, much like we've had before, but it's importing from this new file, this app.vue.

[1:09] In this .vue file, there are three parts to it. There's the template, which is the html that makes up our Vue file. There's the script, which is the JavaScript that might make up the logic to our component. There's the style, which is the CSS that we'll make it up. Each component can also be a Vue file. We'll also have template, scripts, and styles.

[1:36] A scoped property like this means that the CSS in here is only going to apply to the component. It won't apply globally. Even though I'm using h3 here, that h3 styling will only apply to the h3 that is in this component. It won't apply anywhere else.