Vue.js – From The Ground Up

Vue.js Tutorial From Scratch – e10 – Introduction to Vue CLI and Vue UI Tool

up next in our learning of view I want to talk about view CLI so view CLI in very simple terms will allow you to basically scaffold an entire application

geared for view it even allows you to deploy it to an actual server and there's a lot of documentation behind all of the different services that it actually supports now it is a fantastic

tool and it even includes a graphic interface that you can use for creating projects and running NPM tasks amongst other things so why don't we jump right to it if we go to the get started

section the very first thing we need to do is we need to bring it in through NPM now I am assuming that you have NPM already installed if you don't head over to node.js org

and then follow the instructions for installing it in your system but once you do have it in your terminal you need to be able to run NPM and get something similar to this

so if we run NPM – fee I am currently running version 6.90 right so that's a little bit of a prerequisite for this lesson so let's jump to it let's click right here where it says installation

and the very first thing we need to do is we need to bring in NPM now to run this command you will actually need to run it with sudo so we'll say sudo npm install and this will install NPM CLI

globally so let's let it do its thing and we'll be right back okay and we are all done it looked like a couple of things happen in there but we should be okay so now we can check that we've done

everything correctly by running view – – version so let's do that now view – – version and sure enough we have version three point eight point four great so now we have a couple of commands at our

disposal and we go to the creating a project section here we can simply run view creates and then a name for a project so let's do that now let's create a project view creates and let's

just call it testing CLI so this will scaffold an entire project force but it's going to need a little bit of guidance now by default it will use babel and es lint and that is probably

the recommended setting that you would want so you can press ENTER to continue and this will bring in all of the dependencies that it needs and we'll actually make a project for you that is

ready to go a lot like how we explored single component files in the previous episodes this will do all of that for you automatically okay so now that it's done we can CD into our project file and

then we can run npm run serf and this will actually create a local development server for us so that we can actually work on our project so let's CD into our testing dot CLI and then let's go ahead

and run npm run surf so this will basically scaffold everything for you and it even has hot reloading which will allow us to change our files and then it will update it in the browser

automatically so it's pretty cool so what you would do is you would copy this address and bring that over into chrome so let's paste that in and there we go so this is our view application why

don't we open it up in our code editor so here it is in my code editor so we have an SRC directory and then we have a package.json now obviously the package.json file is where all of the

dependencies actually get pulled in so it's pretty cool that it does all of this for us additionally it did scaffold a component for us so if we look inside the SRC directory we have this app dot

view and this is the page that is being served right here notice how it says welcome to your view j/s app so the very first thing we could do is change this and say hello to all coders how about

that and as soon as we head back it's been updated now it might be a little hard to see but I didn't refresh this page at all this page is actually hot reloading let's do it one more time

let's do two I'm gonna hit save I'm gonna head back and immediately my changes show up very cool very fast way to develop a modern application so let's explore a little bit more let's look at

this components folder inside of here there's a hello world dot view and if you look inside this let me close this up so we can have a little bit more space you see your typical view

component file I'm gonna close this up just as a little bit easier to see the structure so we have template a script and a style exactly like a single file component because that's what this is

this hello world that view file is a single component let's open everything back up and what do we make some changes here let me go ahead and delete everything

inside of this class and let me just add a new h1 saying hello coders hit save head back to my application and sure enough we are live hot reloading pretty cool now this image up here you may be

wondering what that is that is actually in the app dot view notice here we have an image and then we are calling our hello world component why don't we make a fresh component let's get rid of all

of this and let's make our very own component now this app that view in itself is our main entry point for view so what you have here is also a single file component so we have an import for

hello world and then we are declaring this as a component a lot of stuff that we've already talked about in previous episodes so let's create a new component from scratch let me pop this open again

and in my components directory let's create a new file and let's call it tasks dot view okay so now we need to do our typical single view component setup so let's say template and then we'll

have a script and then optionally we'll have style you don't have to do your Styles in here but we'll add it just to show how it works so here we'll just say export default and that's it we have our

very own view component right here so when we add a div tag here and say let's add an unordered list with some items in it say item 1 item 2 and item 3 now we need to pull this into our app dot view

in order for us to be able to use it so why don't we do it right here we'll say import tasks from and where where is this task where this task is up a directory in components and then tasks

that view now the dot view part of it is optional you don't have to run it so we'll just leave it at tasks I think it looks a little cleaner so in my components we need to tell view that we

have this new tasks component and then we can simply use it we could say tasks right here like so or if you wanted to use the shorthand you can actually just do this

that way you don't need to have both of those tasks let's hit save head back to the browser and sure enough we are actually getting our component inside view CLI pretty cool very easy and it's

already set up for us there's basically zero configuration needed so what about this GUI that we talked about what about the graphic interface let's look back at the documentation back in our basics

there is a using the GUI and so all we need to run is view UI to pull open this very nice GUI interface so why don't we try that I'm going to stop this process with ctrl C and let's run view UI and

there it is so this is views project manager in a UI form so this is yet another way that we can create a project the same exact way that we created a project through the terminal view UI

actually allows you to do it in a more graphical way now some of you may prefer this so that's why I'm showing you so when we create another project let's do create it's going to default to

the same directory that we were in but when we change this back and make a new project in my root code directory let's create a new project let's type a name how about testing UI we are using NPM

but there are a couple of other things that you can use so I will just actually say NPM and it is able to initialize it get repository for you right off the bat so that's also pretty cool you can

uncheck this if you don't want that but you probably would want that so leave that on and then here this is the exact same option that we got asked when we were running through the terminal so

let's click on default preset and create project now creating a project will basically do the exact same thing except we don't get as much feedback it does feel a little bit more modern because

you're not seeing all this text kind of flow through you so this is a nice alternative for those of you that are not super comfortable with the terminal so let's wait for it to finish and

be right back and we are back pretty cool it took about 30 seconds to complete so expect about a 30 second delay on that one so let's explore this dashboard but of course I highly

recommend you install it yourself and take a look around by yourself but I just want to point a couple of things out for you so the first thing is this plug-in section as you bring in some

plugins they will actually show up here which is a really really nice way of checking out what you are using and another nice thing is when you have a lot of different plugins installed you

can actually use the search bar up here to just narrow it down so what about say just CLI service and you see how it actually filters down these plugins so that's also a cool little tool that you

get right out-of-the-box now in this dependencies these are all your different dependencies that you have these are the ones that you would install through NPM and then we have a

project configuration now remember that we used yes lint so this is where things like error checking and linting of your code will actually happen and you have all of

these different rules on how you want to handle your code pretty cool tool it is a little bit more advanced but it's nice that you have a really nice graphical interface to interact with it and then

finally we have this tax and this is where you're gonna spend most of your time in your development stages we have the surf the build command lint and inspect so we can simply hit this surf

command and we can boot up the same development environment that we booted up whenever we ran NPM run surf but in this scenario all we have to do is click this run task right here and this will

compile all of our code for us and it will even pop it open in the browser so let's click right here where it says open app and sure enough we go back to the default app now remember I started a

new project so the changes that we had made to our other project will not reflect in this project this is a brand new project so pretty cool stuff all the way around with this and all of it

without using the terminal really all you need is the terminal just to get you started but then you can continue to use the UI tool if you are a little bit more comfortable with that instead so we can

always stop the by clicking this button again and now this page is no longer available to us because obviously we stopped running that task so if you go to your project

and you're getting something like this then all you need to do is go ahead and rerun your serf task so that you can actually have your project pop open in the browser

I love the UI tool I don't use it personally but I know that it has really good uses all the way around another thing you can take a look at is the analyzer so the analyzer will keep track

of your statistics right these projects do tend to get a little bit large and as you pull in more and more dependencies your files really grow so this is a good place for you to be able to keep track

and make sure that there is no one library that is just too big and taking up too much space very nice graphical interface you really cannot get this type of visualization

anywhere else but the view UI tool so very cool that they did all of this for us and we can see sort of how much damage each of these packages that we are pulling in is doing to our loading

time so as we see here our actual source file which is the code that we would actually write is a very very very tiny part of all of this other stuff that gets loaded in with your page so if

you're having loading issues or you just want a really really fast app this is a great way to visualize what is taking so long or what is causing something to be

slower in your application great UI tool for that so in closing I just want to show you one more thing if you go down here under the deployment section of course at some point our app will need

to be deployed somewhere so what they've done is they've included a lot of the common places where you can deploy a view application so there are instructions here for about 15 or so

different services and detailed instructions on how to actually publish your view application to these different services so if you are looking for Amazon s3 for example there's a nice

plugin that you can use same thing for firebase or any of the other services here available to you so very cool tool we will continue to explore some more of the

view CLI in the coming lessons but that is the crash course on how to get it installed and get it running in your local environment

The Vue CLI tool scaffolds a complete Vue application for you from scratch with very minimal setup. Along side of it, you have Vue UI tool at your disposal for a GUI interface you can interact with. Let’s set both of those up.

For the best experience, follow along in our interactive school at https://www.coderstape.com

Resources
Vue.js Documentation
https://vuejs.org/v2/guide/

Download VSCode
https://code.visualstudio.com/

DigitalOcean Referral
https://m.do.co/c/7dce5364ef4d

Hit us up on Twitter with any questions or comments @codertape (https://twitter.com/CodersTape)

About This Course

Modern applications require a robust Javascript framework. In this series, we are exploring Vue.js from scratch, covering all topics of writing Javascript code that is maintainable, performant and best of all powerful.