Repo & Vue CLI Setup

[00:00:00]
>> Okay, so if you got an access to the repo, you should see here there are some basic prerequisites that I wanna make sure you have in your environment. Basically, you should have Git, the latest version of Node and most importantly, if using VS Code, the two VS Code extensions you wanna use are Volar and the TypeScript plugin Vue.

[00:00:17]
So this is the Volar extension, and then the other one here, technically could be optional, but I just wanna make sure people install it and enable it just to make sure everything's working correctly. This is how you'll get a lot of your autocomplete, error checking and all that stuff.

[00:00:31]
So these are really critical. Without these it'll kind of be tricky. In addition, if you haven't downloaded already, the Vue dev tools that can be a useful tool for you as well as when you're working with the application that we'll be building today. So you can find that basically under the Chrome extension store.

[00:00:48]
As far as starting a new project with Vue and TypeScript, most of us, for who have done view before are familiar with the Vue CLI. And basically the CLI tool to help us discuss our projects together, but the important thing that I wanted to highlight is that Vue CLI is now in maintenance mode.

[00:01:05]
Because it was using Webpack and for those that don't know Vue js is kind of the new next generation build tool that a lot of ecosystems are buying into. And so this is one of the reasons Vue CLI is being deprecated is because we're moving basically, revamping the architecture that powered Vue CLI with Vite so that you can get all the latest and greatest with that.

[00:01:24]
And so when you're starting a new project, you'll see that inside of Vite there is definitely a way for you to just use the CLI here to just create a Vite project and then just scaffold it with Vue and TypeScript and it does everything for you. But in case you didn't know, we actually have another CLI that's basically going to be the successor to the Vue CLI, and that is Create Vue.

[00:01:46]
So Create Vue basically works as you would expect, where you initialize a new Vue project it'll go through, ask you to start up a couple of things, as you can see it'll ask you whether or not you want TypeScript, JSX support, whether you want Vue Router, Pinia all those things.

[00:02:00]
And so the project we'll be working on today is based on a scaffold that is built with the Create Vue CLI. So just know, if you ever starting a new one, this is kind of where it's recommended for you to keep an eye on. All right, so let's go ahead and open up the project.

[00:02:16]
So if you go ahead and clone the repo, this is basically what you should be seeing inside of here. You'll see that there's the basic readme in here where we'll go and update when we have bookmarks for the different branches as we go to the workshop. But then the main thing here is what we have inside of the app and that's what we'll be working with today.

[00:02:34]
As you can see here, this is basically your standard vue project. And in fact, most of the client frameworks look like this now where you have your source directory with comes with all your assets, components, you'll see that I already have Vue Router and Pinia installed already. So that's why you see the router folder and the source as well as the views which represent the different pages that we'll be moving towards.

[00:02:57]
Otherwise a couple things that you might notice that's a little bit different is that you'll notice that all the files in here already labeled TypeScript. And so one of my recommendations when starting a new project, even if you're not intending on using TypeScript, is to just set it up with TypeScript anyways.

[00:03:12]
And the reason I recommend that is because this is just one less thing you have to worry about later on, because there's a magical configuration that I've already set up in here, which is that inside of your compiler options, if you set it to allow JS true, it'll basically allow you to write JavaScript as you would even inside of so called TypeScript files.

[00:03:30]
So you'll see inside of here if we look at the constants. This is the constants file, it is technically a TypeScript file, but if you see everything in here standard JavaScript. And that's what I recommend on most Vue projects because after all at the end of the day we wanna teach people how to progressively migrate towards TypeScript, and this is the best balance between the two.

[00:03:47]
Because anyone who's done tried to do a migration before is a lot to get the compiler working with all the build tools and everything. So that's why I say getting started, just go ahead and opt into it, you can opt out with the tsconfig and then you can slowly kind of sprinkle it in as we go and that's exactly what we'll be doing inside of this workshop.

[00:04:03]
Let's run through the project as far as what we'll be working with today. So let me go ahead and open this up and then refresh. All right. So the project we'll be working on today is called ToEat. And so it's kind of a play on the to do MVC, where instead of tracking all the things you wanna do, this is the track all the things that you want to eat.

[00:04:24]
And so there's, this is a standard homepage here with a little bit of a hero. And then you can go through, we see all the restaurants that we wanna try and then you'll see some basic properties that we have, we'll be able to create a new restaurant if we want.

[00:04:39]
And then we'll also be able to like so we can filter here for example. And then there are dishes that we wanna track as far as like maybe something we wanna cook or maybe you wanna track specific dishes with restaurants. We have a lot of opportunity for playing creativity here.

[00:04:52]
And so that's something I wanna really encourage when it comes to working on exercises today, is that I'll give you some basic guidance on the things rule like main objectives that you wanna accomplish but the key thing here is to make sure that you go ahead and have fun with this because that's where a lot of the learning happens.

[00:05:07]
And so if you find ways to like play around, create custom types or whatnot, I encourage you to do that. In the meantime before we move on, let me go ahead and actually show you one more extension that I highly recommend. And that is Text Pastry. So if you haven't heard of this one before, or yep, Text Pastry.

[00:05:26]
It's a really nifty plugin because one of the things I found when I'm working with, playing around with data is you want a custom ID. And so normally we just randomly generate like, we just put 1, 2, 3, 4, 5. But here, for example, we say like const, again, let's do a todo list real quick.

[00:05:42]
What we can do really easily is, let's say, go ahead and just duplicate this a couple times. [SOUND] Okay, here we go. We have three items, right? So what I can do is if I put my cursor 1, 2, 3 and I type id, I can use Text Pastry to actually where's it, insert a custom uuid.

[00:06:04]
And so that's like a nice little way for you to basically create some scaffold data with an actual uuid rather than accidentally creating a fake id that's trapped in your Vue key later, that screws up animation. Text Pastry is really cool, it does some other cool things as well actually, just let me show you one other thing, is that if you ever need to track anything so like a multiline thing.

[00:06:25]
So all you got to do is you can select multiple lines and then Text Pastry can actually do counts from like zero to one. And so little things like that ABC. So little hidden nugget to workflow efficiency, but highly [LAUGH] recommended for those of you don't have it already.