Set up the Minimum Files Needed to Run Vue 3
We'll discuss the minimum set of files that are required to get up and running with Vue.
We'll add an index.html file as our entry point, a main.js file that will contain our JavaScript code and a styles.css that will contain all of our CSS. We also load Vue into our project with UNPKG which exposes the Vue object to us.
Instructor: [0:00] I'm going to create a new index.html file, and inside of that, I'm going to add some HTML and a div with some text that says, "Hello." Let's close that div. I used VS Code's Live Server capability to open this file up in a browser.
[0:16] To do that, I'm going to open VS Code's Command Palette. For me, that's CMD + Shift + P. Live Server is right at the top for me because I've recently used it, but if we haven't, we type in, live server and we're clicking, open with live server. Now, as I update this and save it, it'll be updated over here.
[0:36] Next, I'm going to add Vue to this project. To do that, I'm going to go to unpkg.com, and once there, you can see I've got Package and Version. I'm going to go to Vue and Version 3.05, and it brings me straight to the distribution version of vue.global.js. Let's take that entire URL.
[1:03] In our head, let's use a script tag to import that from our console. In CSS, you're running a development version of Vue. That makes sense. If I type in Vue on my console, you can see that the Vue object is available. During this course, we'll find out more about some of these functions.
[1:23] The next file I'm going to add is a main.js file. I'm going to use this file to keep my code tidy and separate. Let's add a task variable. Let's call hello from main.js. Back to index.html, above the body tag, just above it, I'm going to add a script tag, which is going to have the source of that main.js file. Let's close that script tag. Now, if I check the test variable exists, it does, hello from main.js.
[1:57] The last thing I'm going to create an import is a CSS file. Back in my project, I'm going to create an assets folder. Inside that, I'll create a styles.css file, and let's just set the body to background red, just to make sure it's working.
[2:15] Back my index.html file, I'm going to import that file. I'm going to link. Under relationship with this link is a stylesheet. That stylesheet has an href of, assets/styles.css, and the background is red. It tells us that it's been imported. Cool. I now have all the files I'm going to need to get started with learning Vue.