Join Ray Villalobos for an in-depth discussion in this video Using the exercises for this course, part of Vue.js: Building an Interface.
- [Instructor] All of the files for this course are freely available in GitHub for all users at this URL. In GitHub, you'll see that the project is organized into branches. Each branch corresponds to a video in the course. They are named according to the video they correspond to. If you see a branch that starts with a name like 01_03, that means that the branch corresponds to the first chapter and refers to the third video in that chapter. Also, if you see a b at the end of the name, those are how the files looked at the beginning of the video.
And if you see an e at the end of the name, that's how the files looked at the end of the video. Now the best way to work with the project is to clone all the branches at once. In order to do that, you'll need Node.js as well as Git installed. You can find Node.js at this URL and you can find Git and download the installer for your platform at this URL. When you install Git, make sure that you add the Git BASH terminal in Windows. It makes running the commands more consistent.
Let me show you how to clone all the branches for this project. First, I'm going to go back to the GitHub repo, and I'm going to click on this button right here and then click on this icon, to copy the location of the repo to the clipboard. Now, I'm going to switch over to a terminal on a PC. You may want to use Git BASH or a terminal that can run Unix applications. I'm going to run CD and then tilde/Desktop and then I'll create a directory with the mkdir command.
I'll call it vueinterface and then I'll switch to that directory, using cd vueinterface and then I can issue my git clone command. Now, this is not a regular git clone command. It's going to have a minus, minus bare option. Then I'm going to paste the URL and add an additional .git at the end. This is going to clone a bare repository, which is essentially just a copy of the .git folder into this vueinterface folder.
Now, to convert that to a regular folder, I'm going to change a boolean variable in the config file, and that variable is called core.bare. We'll set that to false to turn this into a regular repository. Now, I can issue the git reset minus, minus hard command to finish up the job. Let's go ahead and clear this screen and if I do a git branch command, you'll see all the branches for this repository.
Let's clear this out. The next thing we'll need to do is install the project dependencies for this project. In order to do that, I need to issue an npm install command. Now that the installation is done, I'm going to clear my terminal and then open this folder in my favorite text editor. I'm using Visual Studio Code for this project. This project uses webpack to create and run a server, which is required for modular Vue.js projects.
I've already created all the animation in this file called webpack.config for you. As you can see, it's expecting most of the work to be done in this process folder, which is right here. You can run one or two commands to get things going and most of the time, you'll want to run the npm run dev command. Npm run dev runs webpack in development mode. I'll always have that running at the beginning of each video.
When you're ready to put these files on a server, you can use the npm run build command. That will create all the files you need to upload your application and place them in this app folder. Notice that our index studies html file is in the app folder. Right now, I'm showing you the code at the end of the course. If you want to watch a video at the beginning of, say chapter three, and it's the fourth movie, and I want to get the files at the end of that video, then I need to issue a different command.
Visual Studio Code has a built-in terminal, so let's go ahead and use that. From here, I can run git checkout and then 03_04e, and git will switch me to that branch of the product. You may notice that some of the files in the file system have changed and the application will work slightly differently. If you're working in this branch, if you're playing around with the code and you make some changes, and you try to switch to another branch with a git checkout command, let's switch to branch 03_03e, you may see some errors in the terminal.
If you do, you can issue a git stash command and that should reset your files for you. Let's go ahead and clear out the screen. As I mentioned, I'm going to start each video in the course with the npm run dev command already running in the background, as well as the code inside our editor and a copy of the browser to the right side. Now that you know what to do, it's time to get started.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering