Easier Project Setup With the Vue.js CLI 3

2.1 Using the Command-Line Interface

Now that we have the view CLI installed, we can use it to create a project. So let's go to the command line, let's just call vue, and let's look at the commands that we have. The first is create which is what we want. We want to create a project, and we can see that there are options. So we will want to check the help for the create command. So let's do that with vue create, and if we press Enter here, it's just going to show us the help anyway, but let's be explicit and say, show us the help. We can see that there are several options. I'm not going to talk about all of these that are available because you can read them, they are self-explanatory. However, there are a couple that I want to point out. The first is the first option, the preset. You can see that it will skip the prompts and use a saved or remote preset. Now this is very useful because as you will see, whenever we create a project, it's going to go through several prompts to let us choose the plugins that we want to include with our project. And a lot of times you want the same plugins over and over and over again. So it makes sense to create a preset so that you can use that to create all of your projects. The second option I want to point out is the packageManager, because we have two, we have npm and we have yarn. So if you use yarn then, well, you can modify the default actually. If you look at vue again you're going to see that there's this config, so we could say vue config, and then it's going to output the results of our vue config. And you can see that the package manager is npm. So we could go in and edit that to change that to yarn if you wanted to always use yarn. However, let's go back to create. And you can see that there is the packageManager options. So that if you wanted to use yarn, then you could explicitly say that whenever you create your project. Or if you wanted to us npm, which is the default for me at least, then it's going to automatically use that. And of course there are other options here. So let's say vue create, and let's call this first app. And let's say cmd for command, so that in the next lesson, whenever we use the ui, we will create another project and we will say first ui. So let's press Enter and we're going to start with our prompts. So the first is to use the default preset. It's going to include babel, it will also include eslint. Now there are several different options for eslint, but this is going to choose well, I don't really remember what it's going to choose. But I don't particularly like the preset for eslint that it chooses there. So let's get the default, and let's manually select the features. So now we get to choose all of the features that we want with our plugin. If we want to use TypeScript, then we can press space and use TypeScript. If we want vue router vuex, all we have to do is select those things. In fact, let's do router at least. If we wanted to use CSS Pre-processors, some of these are going to trigger other options. So let's just leave that alone unit testing and all of that stuff. Every one of these are configurable for the most part. So we'll just choose Babel, router, and Linter, and then it prompts us, do we want to use history mode for router. Well, yes that sounds like a good thing, so we will do that. Then it will prompt us with the Linter. You can see that there are several options that we can choose from. I'm just going to use Prettier in this case. And then we have the option of linting on save or do we want to lint on commit? I like to go with save, so we will go with that. Other people like commit, it's really up to you. And where do you prefer to place the config for all of this? We could do that inside a package.json. But I typically go with dedicated config files. And now we can say this as preset if we wanted to. So the default is no. If you press Enter, then it's not going to save any of these settings. However, if we do, let's choose yes, and we will save the preset as tutsplus. And then it's going to create our project. Of course, the speed of your network and your machine is going to determine how fast or how slow it takes for UCLI to create your project. But once it's done, it's going to give you the commands that you need to just get up and running. You want to of course CD into your project, and then run the serve script. Now, let's not do that just yet, but let's do go ahead and CD into our project, and I want to look at this in the folder explore. So we have our usual suspects, we have our node modules and then we have public which is really only two things. We have a favicon and then we have the index HTML. Now, let's actually look at this in our code editor as well. Because if you look at the index.html file, you're going to see HTML, of course, but you're not going to see any reference to any JavaScript files. And that's because it is automatically injected whenever you run the Serve command. So the Serve command is something that you would use for development purposes. It is watching your files and so whenever you make any changes or add new files, it's going to automatically rebuild and refresh the browser. Actually it doesn't refresh, it reloads what you see in the browser and sometimes you do have to physically refresh, but a lot of times you don't. So if we look at the public and look at index html, that's all there is. So all of the code that we work with then is really inside of the source folder. And of course, it gives you stuff to get started but you're not bound to really using any of this folder structure if you don't want it. So you have a components and you have a views. Now the reason why we have views is because we specified that we wanted to use the view router whenever we created this project. If we didn't include the router, then this views folder wouldn't be there, this router.js wouldn't be here either. So, of course, the output of the vue cli scaffolding is going to depend upon the options that we choose. But, this main.js file is our entry point. So if we run that serve command or serve script, it's going to build everything in memory, inject the javascript into that HTML file so that it would be then viewable in the browser. Now notice that there are several configuration files that is of course because we said we wanted individual files for all of the features that we specified. So there's the eslint config, there's Babel config, post CSS, and those things there. So before we run this, I want to go back to the folder Explorer. And I want to look at the .vue-rc. This is in the home directory. Now, if you'll remember, whenever I ran that vue config, that output some json well, now we can say that there's more here, there's this presets. So here we can see that we have our tutsplus preset, and we are using configuration files, we specify the plugins and the settings for those plugins. And router, and then routerHistoryMode. So that is where our presets are saved. So if we wanted to go and then manually change those, we could. So now, let's run the serve script. This is going to build our code, it's going to file up a development server so that then we can start to working with our code. And any change that we make is going to be automatically reflected in the browser. So it's a very rapid development environment. So once this is done, this is going to tell us where our server is or at least the URL for us to go. So let's go ahead and file up our browser so that we can view this, and then we will see our homepage, there we go, welcome to your Vue.js App. Now of course, what we see here is going to be dependent on the features that we chose when creating our project. But because we chose router, we have two vues, we have our main vue here, or our home vue, then we also have the about page. And then if we look at the code inside of source vues, we have our home vue, which is using this HelloWorld component. Then we have this about view, which is just some text. So if we modify this so that this has been modified, we'll save this. We'll first of all look at the command line, we can see that the compile's successfully updated. It gives us the time so that we can know when the last successful build was. If we look in the browser, then we're going to see that that did indeed become modified. Let's change it back to what it was before, and we will once again see that's change automatically in the browser without having to refresh it. Of course, we can refresh if we want to, and sometimes we would need to, but in most cases, we won't have to. So there's one other thing that I want to do, and that is add a plugin.You know, because when we looked at the config, there are plugins, we have the babble plugin, we have the eslint plugin. Let's say that's okay. We want to include another plugin like the vuetify plugin, that's something that adds the material design language to our vue project. So what we would do then is say vue add, and if we look at the help, will see that that is indeed one of the commands that we can use. There are some options actually there's just one or two, and then we specify the plugin that we want. So if we say vue add and --help, all we really get to do is change the registry that the npm command is going to look at. And that's only for npm, as you can see here. So in our case, that's not that big of a deal because we're using npm, we're going to use the default registry. So we'll just say vue add and then vuetify and then that is going to install the vue-cli-plugin-vuetify. Now plugins are special in that they have what's called an invoker, so whenever we are installing a plugin, it's going to download everything that it needs. And then it's going to invoke that plugin which in this particular case is going to have another set of options that we get to choose from. Of course, it's going to vary based upon the plugin that we want to install, but there could be another configuration option that we need. In this case we are not going to really use any of the options because we are going to choose the default option which is the recommended option. And in fact we can see that on the screen here, we have the default if the prototype or the configure. If we wanted to step through all the configuration options, we could definitely do that. But if we just take the default, then that's going to download the other dependencies that it needs, and then it's going to automatically update our project. So if we look back at our main JS file, we're going to see that it imports vuetify and there's also several other changes that it made. Now I went ahead and ran the serve script so that we see the updated project. And of course we lost some things like the link for the about page, but things like that isn't too important because we can easily add that back. What we so get is a project that is up running quickly without having to setup eslint, setup babels, setup web pack and all of that stuff. It gets us up and running quickly with an environment that works very, very well for rapidly developing our client side applications. Well in the next lesson, we are essentially going to do the same thing that we did in this lesson, but using the vue UI.