Installing Vue CLI and setting up our project with Webpack

Dejan Stošić
A free video tutorial from Dejan Stošić
Fullstack Web Developer
4.0 instructor rating • 1 course • 1,797 students

Lecture description

Learn how to utilize VueCLI.

Learn more from the full course

Learn by Doing: Vue JS 2.0 the Right Way

Learn how to build a standalone client app with routing and authentication in VueJS 2.0 (Single page application)

03:30:25 of on-demand video • Updated December 2016

  • Build your own VueJS application of any size
  • Plan and structure your project
  • Write maintainable code
  • Use smart development tools like vue-cli
English [Auto] Reviews CLID view command line interface for scaffolding view projects. It was created by this guy when you an amazing guy. He also created a huge. Of course there are other people working on view and it's ecosystem right now. But he was the guy who started it all and just just look at him look at his background he's in space he's a space man he's an alien who decided to give a gift to humanity and that gift is called view J. Thank you Aaron. That was very kind of you. So we are going to use the things you build for us to make our lives easier. First of all we should run this command and PM in style G. Bucy. And what is that great thing. Well it tells NPM to install U.S. ally globally so it can be accessed from anywhere within your system. So go ahead and run this command. I will not do that because I already have it installed. And next we should run this command view and that template name project name. So let us do that now. Q And it's a template name I'm going to write. Read back. Make sure to use that one as well and you can call it anywhere you like or here for a project name. I'm simply going to type B per client. Now when this is done this this is for this will first download the template and when it is done it will ask a few questions. OK. Project Name. I am simply going to call it paper description. I don't need that for now. This is wow of you built. Make sure to select runtime plus compiler and hit enter or we will not be using Lanting so type and hit enter or unit tests. Tests are awesome of course but this is kind of beyond the scope of this course so we will say no type and hit Enter key again or no once again. And that's everything that we need to do. You should be able to see this new folder created over here per client. It's called preplan because this is why types over here when they run the command. So what just happened. Well you see this view and it command. It sets up the project structure for us and then does that by downloading one of the official templates. We use the VAT back template so it downloaded it over here and we are almost ready to use it. There is just one more thing that we need to do. Let's take a look at the get help page for web back template. And as you can see here I need to see into my project and run MBM install. So let's do that right now. The plan. And and PM install OK while the penalties are being downloaded. Let me quickly explain what 22:00 is. If you are not familiar with it. Well you see there's this package adjacent file over here. So instead of downloading every single one of these dependencies manually NPM install is going to do that for us. It is going to look inside of this file package Jason and it is going to download them to our project. Also do not worry. Almost all of these dependencies are used only for development. That means that your production code. The project that when you build it it won't be blowed with tons of necessary things. As you can see there is only one actual dependency right now and its view J. S.. Ok this appears to be done and you should be able to see this new folder created over here it's called node modules and this is the this is where all of these dependencies got downloaded. There they leave here. This is their home and let's examine our project structure right now. I'm going to bring up this and the most important folder over here is this source folder because this is where we're going to put all the code that we're going to write the code that is related to our project. The fact template that comes with a few sample components and let's see how can we actually run this. How can we run this project. And are we going to work on it. Let me bring up my termino. Now if you scroll over here you'll see that the pack template comes with a few predefined NPM commands. All we are mostly interested in these two NPM run Dev and NPM run Bill. So let's try the MP and run their first in the let's see what happens. NPM plug that okay great. So it started a server on localhost on port 8 0 8 0. Now this page that we're seeing right now this is just the demo content that comes with view of web effects templates. And let me show you another called Think about this. Let me bring back my ID and I have opened this file and that view. You'll see some magical mysterious code in it. We are going to learn more about it in our next video. But for now just a look at what happens when they change something. For example I'm going to add this. Hello you than me. And I'm going to save my file and boom. Look at this. I did not have to refresh my page. It detected the change automatically. So this is called caught reloading. And it is listening for change. So it's pretty convenient during development. Now this a.m. around there command it started US-CERT that should be used only during development when you want to actually build your project to put it on a production server. You should run this command NPM run build. So let's run that now and let's see what happens. MBM to run Bill. And now when that is done and you see this this folder created over here it contains the production code of your project. This is the code that you will actually want to put on your web server or it combine an ugly fight all of your javascript files into a single file. It did the same for CSX basically took everything from the source directory and it combined them and built it for production. And this is where you'll find your distribution your production ready code. Now you might be wondering how do they know what to do with all these files you want to place them over here how could to concatenate them together what to do with is that the old files and so on. Is it some sort of black magic. Well my friend it is not. It is called web FAQ. Now you see well-packed is a joke Bandler. It can take all kinds of files and it can pack them together it can convert them into files that the browser can understand. Now in order to do that it needs a configuration file or I and I can already hear you complaining come Monday. Do they really need to learn this web back thing. Is there an end to this. Well I have some good news for you because we used our view web template. It came with all these web page configuration files already written for us. So you do not have to learn web page if you do not do not want to for this particular project. So this is what the build folder is for all the configuration files are in there. And as far as I'm concerned you can already forget about it. The chances are that we probably won't have to touch a single thing over here. We'll just let it live over here and pretend to like we understand what is going on with that. It worked for me. Hey I'm just kidding of course. If you want to know more about it you might want to check out this documentation or here on its home page. And that to the mind can seem a bit confusing at first but trust me it's a really really good skill to have. Because web page is pretty popular right now and it can also be really useful but the whole point of using view of web template is to have all these things already made for us so that we do not have to waste our time on writing these boring stuff. I can close this and I can focus on my code the code that I will actually write to build my project. Next we have this config folder over there and in these files we can configure our environment variables or we will actually be using these files a bit later so we all learn how this works. Then I'll talk more about it than once we need to use it. And we pretty much covered everything. Or here there's just this static folder remaining basically you can put or here your static resources like CSSA files send images or whatnot and the files that you put in this folder will not be processed with Web back. However the files that you put in this folder over here assets they will be processed with web pack. So basically these two folders serve the same purpose or only difference is that when Beck will ignore these files now you'll see what exactly that means later as well. But just remember that both of these files can be both of these folders can be used to store our external resources. Now we pretty much covered everything that we need to know about. You went back and played all. However if you're interested you might want to check out the docs over here. You can find the link on view well-packed and play. Get help page. And here's the link and this is the documentation. Now if you're new to this whole world of front and development and if you can't use tools like NPM before or I really really know how you feel. Trust me and I know that all these things that we will learn through they might seem a bit overwhelming and it may seem kind of necessary and it may seem complicated but trust me all these things really do pay off in the long run. And the some time that we need to spend before hand on configuration and so on that time actually pays off because we will not have to lose a lot of time later if we want to make some changes or because we want to deploy codes to our server and so on. So just hang in there and keep progress into the course. And I'm sure that you actually I make a promise to you or you will understand all the benefits of such build system by the time by the time that you are done with this course and if you if you're kind of not sure what you just watched then you already forgot some of the things. Remember though the main point of this video was to remember the single command. Let me find it or here. I too am pm. Run down. This is what we are going to be using. Ninety nine percent of the time so we will just go into your project directory will run MTM run Dev and you're good to go you can start writing your code. So remember NPM run dev.