Right now I am on the Vue CLI github page. It actually has the commands that you need to run the installation process. Now, I'm assuming if you're watching this video, that you want to upgrade from 2 to 3, but I'm still going to show you exactly how to do that.

In Visual Studio code, I'm going to press control + Tilda, and that is going to open up the terminal. From there, let me also just increase the size of the font just so it's a little bit easier to see. I'll stretch this up. The way that you can tell which version you're on, you can type vue -V

That's going to tell you the version of the Vue CLI that you're working with. Now, do not let this confuse you. This may look like you're working with the Vue actual, the framework, and that you're working with version 3, but that's not the case. You're actually just working with the CLI version.

I know that can be a little bit confusing, but at the end of the day, the command line interface is all that you have access to. Any time that you're typing Vue here in the terminal, that means you're interacting with Vue CLI.

I already have this on my system because I've been building out the few test applications. If yours says something like 2.9 or anything like that, then that means you may want to install version 3. Now the way you can do that is if you use npm, then you can use this command. If you are using yarn, use the 2nd command.

I'm going to copy this because it doesn't hurt to type this command in. It will simply see if there are any updates or anything like that. So I'm going to say npm install -g @vue/cli and press enter. This is going to go through the entire process.

I know that I already have the very latest version, so right now it's just checking through the metadata. It's making sure there aren't any other key updates that it needs to perform. At the time of this recording, it is Vue CLI version 3 - beta 11.

Now I will say, that if it says anything, when we run the Vue create command that we're going to run here in a second, if you do that and it says there is a later version and recommends that you upgrade to it, I definitely recommend that you run this command again.

The reason for that is because I ran into an issue a couple days ago, where I had a slightly older version, and I mean a couple days older version, and when I tried to run a command it actually broke. If it recommends during the beta process that you upgrade then I would say you might want to upgrade.

The way that you generate an application. I'm going to walk through two ways to do this. The first way is just typing vue create my-basic-three-app. Now, this is a very different way of doing this then you may be used to. If you are used to version 2 then you type vue init webpack my-version-two-app or something like that.

In version 3, they went with this different syntax. The reason for that is because they realized that pretty much everybody was already usingwebpack. They decided to just include it by default.

Now all you have to do is say vue create and then whatever the name of your application is. You can type enter, and this is going to give you a different set of questions. We'll walk through this. This is the reason why I'm going to create 2 vue apps.

The first one's going to be the default. If you just press enter, this going to start generating the new default version of Vue. I'm going to fast forward through this because it can take a while.

If this starts to take longer than you're used to for Vue version 2, do not worry, it takes much longer on my system as well. It looks like that finished, and it works so I'm going to perform those instructions. Exactly what we have right here.

I'm going to change into this directory, and then I'll say npm run serve. Now, this is different from than version 2. In version 2 we would say npm run dev, but I'm going to show you where you can find the list of commands to run. serve is the version 3 naming that they went with.

This is going to go build out the entire system and so now it looks like all of that worked. Now, we can go to localhost 8080. Let's open up the browser just to make sure this is working. All of that is working properly.

Let's come back here. I'm going to stop the server by pressing Ctrl + C, and let's open up the file system here. I'm going to click on open folder, click to the desktop. because that's where I have it saved. Now you're going to see a few different types of commands and a very different file structure.

In version 3 The Vue CLI team really simplified the entire system. Now, you may notice one of the key differences. I opened up an old version 2 directory that I have. This is the Vue API app that we built out if you followed along in my other courses. You may have noticed, that this is a very different file structure.

Here you had a Babel file, you had a .editorconfig, you had .gitignore, you had .postcssrc.js, you had Read Me, Index, and your package.json files. Those are all pretty standard, and even though we are missing a few of those, you can still add them and work with them if you need to.

The biggest difference is the config directory. The config directory here, had a dev, an index, and then a production file.

Now, you may notice that you do not have a config directory in version 3. This goes and speaks directly to the fact that webpack is no longer something that gets added. Instead, it gets added by default, and it's wrapped up so you don't see any dependencies here in your package.json file.

If you look at your package-lock, webpack is actually included, but the Vue CLI wraps it up. If you just search and look for webpack, you'll see that it's actually referenced 65 times in this file. You are using webpack even if you don't quite realize it because version 3 just includes it by default and it wraps it up it.

The goal of this is to simplify the entire process. webpack can be quite confusing if you're not familiar with using it. The CLI team tried to make that process a little more streamlined. Now that you have all that, you can also see right here that it's working very similar to how version 2 worked.

Let's stop this. I'm going to close out of all of it, and we are going to open up to the CLI. Let's change back into the desktop, and now let's create a different project. We will create a custom one because you may have noticed that the questions that the CLI asked you, were very different than in version 2.

Now I'll say vue create custom-vue-three-app, just like this, and instead of going through the old process and instead of just picking the default options...it looks like there's an issue. Let's see what it says.

That is just a timeout error. If you ever get any of those just run the same command again. That usually depends on your internet connection. It worked this time. It was able to communicate with the server, and so instead of picking default, I'm going to manually select my features.

You can use the arrow keys on your keyboard to switch between these 2. Press enter, and you can see that you have all kinds of different options.

We have the ability to pick Babel, to work with typescript, to have a progressive web app as default, to use the Vue router, to use Vuex as our data store. To have preprocessors such as SASS or LESS. To have a Linter, have unit testing, and use end-to-end testing.

This is pretty cool. Before, the way that the Vue CLI worked in version 2 is, it went through a series of questions. In version 3, what it did is it just took all of those questions and it said you can pick on an a la carte basis what you want included. So I'm going to pick what I want.

I do want Babel, I don't want typescript, I don't want a progressive web app, I do want the router, so I'm using the arrow keys to go up and down. If I want something I press the spacebar. I press space, and it says routers have been added.

Go down again. I do want Vuex, I do want a CSS preprocessor, I do not want a linter. I now have the exact application template that I want to work with. After you're done just press the enter key.

Then it's going to ask for the type of CSS preprocessor that you want? You could get SASS, LESS, or Stylus. I'm going to put SASS. Press enter, and then it's going to say where do you prefer placing config for Babel, PostCSS, ESLint, etc? I'm just going to say put that In package.json.

You could also have them in dedicated config files, but I'm going to say in package.json. Then it asks do you want to save this as a preset for future projects? That's pretty cool. You can save it your local system if you build out these type of application with those settings quite often.

I'm not going to do it because I like picking them out on a case-by-case basis. I'm going to say N, and that's it. It's going to go through and it's going to install that entire system. I'll fast forward through this part, and I'll start it up when it's done, then I'll show you some of the differences in the architecture it creates for us.

Looks like all of those commands worked. Now we can change into our custom-vue-three-app, and then let's actually open this up before we even run it. I'm going to go up here to open folder and then we can click on custom-vue-three-app. Then this is going to open up the code base that was created.

Now you can see that everything is pretty similar. One of the key differences is this babel.config.js file. If you click on the package.json this includes things like our PostCSS adapter, so this is where we can have any plugins and anything like that. That's where it's a little bit different.

Now, I'm going to open up the terminal here and let's just make sure everything's working. I can say npm run, and then if you remember back to version 3, you're probably used to typing npm run dev all the time. The way that you can tell the difference is simply come into your package.json file. Then come down to scripts.

By default, you have two options. You have serve and then you have build. If you want to work with this locally, just type npm run serve. Then this is going to generate everything you need in order to get working.

If you come here and now refresh, you can see this shows that we're working with our custom-vue-three-app right here, and everything's working.

If you want to test it out, you can click on SRC and then go into components HelloWorldVue here. Let's just type in ASDF at the very beginning of it just to make sure it's all working. Now you can see everything is working.

There are definitely some key differences between 2 and 3. I'm going to be publishing all of my new courses for Vue. I'm going to be using version 3 of the CLI.

I'm also going to make a very helpful video, showing you how you can deploy a version 3 app directly to Heroku. Including some of the key differences you're going to have to make, and some of the file changes you have to make.

Some of the different things you want to take a look at that are different are now you have this public directory here. You used to have static. You still just have a index.html and your favicon.ico. You have your node modules, and then you have way fewer auto-generated files here at the root of the project.

Then a couple key differences, instead of a router directory, now you just have router.js. As you can see, this is all identical to what you had. It just gives you a Home and an About. That gives you just a little bit more guidance on how to build your routes out.

Because we chose Vuex, this gives us a store.js. This is how you can work with a data store in Vue. Also, you now have this just views directory. This is definitely different than version 2.

This gives you your About.vue, which is just a template by itself. Then your Home.vue, which is a template and a basic component. Those are just a few key differences.

If you went through that you know how to upgrade from CLI 2 to 3, along with having a solid idea on what the key differences are on what gets generated for you between the versions.

Resources

• Vue CLI