In the last guide or in the last section we walked through how we could implement and integrate vue js into a pre-existing HTML page, and there will be many times where you'll need to do that.

However there are also circumstances where you may want to build your own vue application. So this means that vue would be hosted on its own server, or on its own server instance and then it would communicate with outside API's for data.

This is very different than what we already work through where you have some kind of application it could be an HTML app or it could be something like a Rails application or Laravel app and then you simply embed vue in.

What we're going to talk about is where we make vue the dedicated application it would handle all routing, it would have a connection to an outside service for data layers and authentication, it would handle all of the logic for every page in the app. So we're going to build out several projects like that.

But before we get into that, what I'd want to do is walk through the process for installing it and then also take a look at the Demo app that they give us. Because when I was originally learning vue I discovered that I was able to learn quite a bit just by looking at that demo app and so I want to walk through that.

So in this guide what we're going to do, is we are going to install the basic vue js application with the CLI and then we're going to build that app and then in subsequent guides we're going to walk through the application that it gives us. And later on in future sections we're actually going to build our own dedicated apps.

So the very first thing to do is to open up your terminal. So right now I am in a Linux ubuntu virtual box and so I have access to the terminal but you can run the same commands whether you're using power shell in windows or you're just in the terminal in Mac.

So this assumes that you already have node installed. So what we need to do is install the CLI for vue and this is also going to give us access to vue. So the command to do that is to type npm install -g, so this is going to install this globally and then vue-cli just like that.

Hit enter and then it's going to go out and it's going to install the CLI for us.

And if you've never heard the term CLI it stands for command line interface so that's going to allow us to run commands directly in the terminal here and then have that generate different parts of the application.

Now that that is installed, let's actually build out the entire application. I'm going to give us a little bit more room here in the terminal. And so I'm going to run the command vue init webpack.
The reason why I'm wanting to do this is because I want to use webpack as the tool that is going to compile and manage all of our assets, and then you give the name of the application, so for this one we're just going to say demo-vue-app.

vue init webpack demo-vue-app

Now, in previous versions of vue you could do something like this where you'd say DemoVueApp but in the current version of the CLI that is no longer possible. So everything has to be lowercase and the common convention is whenever you have multiple words you separate them with dashes. So demo-vue-app just like that, and as soon as we run this it's going to take us through a series of questions.

So it's first going to download this and then it's going to ask for our project name. If you want to give it a different project name than you can type it out or if you want to keep the one that you already gave it just type enter, then it's going to ask for a description, you can just add it or you can type enter and it's going to say A Vue.js project which I'm fine with.

It's asking for the author, it should pick up on your system name so it picked that up properly and then asks for the type of build. So we could use a runtime and compiler which is recommended for most users or runtime only, we want to use the top one.

Now it's asking if we want to install vue router? You want to use this if you have multiple pages in your application, it's not necessary without it. But I do have multiple pages that I want to walk through so I'm going to say Y for yes.

Then it asks "Do you want to use ESLint to lint your code?" We'll say yes, and if you've never heard of linters before linters simply are tools that give you the ability to see any potential issues or any time that you're not using the best practices for code, so I'm gonna say yes it says pick out an ESLint preset you have the standard one, the Airbnb one which is quite famous, and then none.

I'm going to go with Airbnb,

that's the one I use for most projects. And then do we want to use unit tests? I'm gonna type n here because we're not going to get into unit tests and then it asks Do you want to send setup e2e which stands for end to end tests with Nightwatch? and that is a no. And then it asks Should we run npm install for you after the project has been created?

I am going to say yes, but I will say that I have this fail about half the time that I use it, so just do not worry if that happens, so you say yes and now it's going to run that.

Now this may or may not work, the npm install process I should say, may or may not work. But I will show you where you can check to see if it fails or if it succeeds. It's not a problem if it fails, all the npm install is doing is it's going out and it's bringing down the dependencies into our project.

So if it fails every time that that's happened to me all I had to do was change into the directory of my project run it myself manually and then it worked. I'm not exactly sure, it may be a little bug with the command line product from vue why that can happen sometimes and I have had it work perfectly, like I said it's about a 50/50 kind of try, so don't worry if you get a few error messages.

I'm going to fast forward the video right now to go all the way through until the installation process is done and then I'll come back. And it actually went through very fast, so looks like it's working, and it looks like the installation process actually did work this time.

If there were any errors instead of these warnings you would have red messages that say err and it would say there was an error installing one of the dependencies. Now this also gives you the other instructions the final instructions you're going to need.

And so what you need to do is first change into the application. So the application is demo-vue-app and now we can run npm run and then I believe it's called dev, yes so run npm run dev is the name that the CLI gives it.

So what this is going to do is it's going to package up all of the dependencies and all the code libraries we need and then it's going to run a server for us. And if you get this little box that says done and it says your application is running here that means that everything is working for you.

So I'm going to copy this, and also one thing that may be a little bit different for you and I'm going to show you why, I already had a vue application running in the background. So I just noticed that usually you're going to get localhost: 8080 but he automatically went to 8081 because I had another application running in the background.

So let me run that one more time just so I have exactly what you have on your system. All this means is that there is another port on the system and it was already reserved with the other application.

Other frameworks like if you use Ruby on Rails or some other framework like that, it will not increment that. It would actually just thrown an err and wouldn't even start the server, but this is working.

So now let's come over here and open a new tab on Chrome, and we're going to go to localhost: 8080 and if you see this all welcome to your Vue.js App that means that everything worked on the installation process.

So now that you have all of that installed we're going to dive into this sample project they gave us so that we can analyze all of the different components and the architecture that you have with a dedicated standalone vue application.