- [Instructor] So far we've seen
that we can create a pretty good application
by just using regular HTML, CSS, and JavaScript.
However, as your applications get more complicated,
you'll probably want to use something like Vue.js or React,
which are really good for building applications
that work with interfaces.
So I'm going to show you how to work
with my favorite framework, which is Vue.js.
And in order to install Electron and Vue together,
we're going to need a couple of things.
First, we're going to work with the Vue CLI
to install a regular version of Vue.js in a project folder.
And then after that, we're going to install something
called a Vue CLI Plugin Electron Builder,
which will create an application
that will work with Electron and Vue.js together.
So to do that, we're going to go back to the Terminal.
Right, so I'm going to need to install this
You can use the Terminal app that comes with the Mac.
I'm going to use Hyper.
First, I'll need to make sure that I'm on the Desktop.
the Electron folder that I had there before
is not there anymore.
So issue an nmp install -g command, and then @vue/cli.
This is going to take a second.
Now I've installed this before
so your screen might have some more stuff in there
than what mine is showing right now.
I'm going to clear this out.
So if you're on a Mac, you're going to issue a vue create,
and then the name of the project, so electron-4.
If you're on a PC and you're running Git Bash,
there's going to be some interactive options
that you can use with the Vue CLI,
so you're going to have to call it a little bit different.
The command is winpty vue.cmd,
and then the rest is the same, create electron-4.
I'm on a Mac so I'll just use the simpler version,
which is vue create electron-4,
hit Return, and it's going to ask you a series of questions.
Now for most applications, the defaults are going to be fine.
Babel and ESLint are pretty basic selections
but with the Manually select features
because I know that I want the Vue router
in this particular project.
So I'm going to scroll down by hitting the arrow keys.
Again, if you're on a PC,
make sure you run that special winpty command.
And I'm going to hit Space to turn on the router,
then I'll hit Return,
and it says do you want to use history mode for router?
I'm going to choose No.
That affects the way that your URLs are built
and it requires you to have a Node.js server.
I don't know that it makes a big difference in our project,
but I'm not really needing that for this one so I'll hit No.
All right, so let's see.
I want to use ESLint and Prettier.
Again, the default is usually fine,
I just like this combination,
and then I'll choose Lint on save, which is fine.
Then where do you prefer placing config?
I'll just leave the default,
but you can choose to do that in the package.json,
but this will work right for me.
And usually, when you finish setting up
a custom configuration,
it's going to ask you if you want to save this as a preset.
I'm going to hit No, but if you're going to be creating
additional Electron projects,
you may want to save this as a preset.
And this will take a while.
Notice that it now created the folder
and it's going through the installations that it needs
to create a project.
Now when you're done,
it's going to give you the option of running Vue.js,
so you can try that if you want to.
So,
I'll cd electron-4,
and npm run server here.
That didn't run server there,
so let's just go ahead and do run serve.
This will start a development server.
It's going to make sure that everything is installed
and then you can pull this up in a browser,
and you should be able to see
the default Vue.js application.
We're not done yet
because this isn't just a web project,
this is actually going to be an application,
so we need to install something else.
Let's go back into the Terminal.
I'll hit Control + C.
It's going to clear this out.
And I'm going to say vue
add electron-builder.
So the way that this works
is we're adding this additional set of options
as a Vue CLI plugin.
So the command for that is vue add,
and then the one that we need is electron-builder.
This is going to install some additional things for us.
Right, it's asking me for the Electron Version,
your versions might be slightly different here,
and I'm going to use Version 4.
So now that we have that,
then let's go ahead and take a look at what we got
when we open this up in a text editor.
So I'm going to minimize my Terminal here
and really from now on, I can just use
the Visual Studio Code Terminal.
So you can see
that
if you know what a Vue.js project looks like
that we've got the typical files that we would see,
so we have the src folder with the Vue app.
And the thing that is different about this
is this background.js file.
So this is like your main file or your index.js file
like importing the BrowserWindow app, et cetera, et cetera.
And you can see that there's the different sort of events
that we're tracking here.
So this is something that you should be able to read
And if we look at our package.json,
you can see that we have some additional commands.
And the ones that you want to run here
are going to be either electron:build or electron:serve.
Let's go ahead and run electron:serve.
So we'll do npm run electron,
and
serve.
Right, so this is going to run our application.
You can see that it's the default Vue.js application
that you get when you install any Vue.js project.
But you'll also know that it opened up the Developer Tools
by default and it made the window like a lot smaller.
So I like to put my Developer Tools on the bottom,
but other than that,
you can see that it's just the default application
but you were able to create it inside an Electron wrapper,
and that's pretty cool.