- [Narrator] How would it work
if you wanted to use your own Vue.js project.
So, I'm going to show you how to do that,
and I've got a nice project
that I've already built for you,
and it's at this URL.
And what I'm going to do is
click on this Download Zip button in my GitHub repo.
So once I do that,
this'll download a Zip file into our desktop.
And I'm going to decompress it by double clicking on it.
You may need to right click and decompress it.
And if you open it up, you'll see that
it's a pretty solid Vue.js project
with a src and a public folder.
Now, that's similar to what we have
in our own electron-4 project.
You can see that there is a public and a src folder.
But there's one file that you're going to need
from your current folder.
So if you open up this src folder, right here,
you'll notice that you'll have this background.js file.
What I'm going to do is,
override what's in my current electron-4 project
with this public and this src file,
but I want to make sure that I copy this one file first.
So I'm going to drag that over here,
put it in the src folder.
And then I'm going to take these two folders
and copy them over to my electron-4 folder.
And it's going to ask me
if I want to replace things, and I sure do.
Let's go ahead and close this up.
So now, we're going to need to perform
some additional installations.
You can see that the src folder
and the public folder are different now.
And, the src folder, though,
has that background.js file.
So remember, this is the main file
that Electron uses for our main process.
Now, because our Vue.js project
is using some additional plugins,
we're going to need to do some more installations,
so let's take care of that now.
I'm going to open up the terminal in Visual Studio Code.
You can do that from here,
you can use the Git Bash terminal if you want to,
or the regular Mac terminal.
It's a lil convenient to just do it from here.
And I'm going to need to install some dependencies
that I know are needed by my own Vue.js project,
so that is going to be npm install.
This is going to be developer dependency,
so not necessary for actually the bundled app.
And then I'm going to need to use
animate.css bootstrap
jquery and popper.js.
All right, let's go ahead and clear that out.
And finally, I'm going to need to install
a series of icons
that are part of the Font Awesome library.
So I'll do an npm install --save-dev.
And, these have a similar name,
so I didn't want to install them with everything else,
because you're going to see that
I'm going to need to type in the same thing,
over and over, here.
So, fortawesome,
and then fontawesome-free.
And then I'm going to copy
this fortawesome and fontawsome-.
And I'll put a space here,
and this one's going to be called,
svg-core.
And, the next one is just going to be,
fortawesome/
free-solid-svg-icons.
And the last one is going to be
fortawesome/vue-fontawesome.
And I'm going to hit return.
And once those installations are gone,
let's go ahead and clear this out.
And now I can run my command
for starting up Electron.
Which you can see here,
that it's added those dependencies
in the dev dependencies section, here.
And, I can now run my Electron serve command.
So, npm run
electron:serve.
Right, that's going to launch Electron,
and you can see that my application is now running.
This is a shopping cart application
that I built on a separate course,
on Vue.js Essential Training.
And, I'm not going to be covering
the specifics of how this application works,
because the entire course
on how to build that application
is available in the library.
Just search for Vue.js Essential Training,
and you can see, step by step,
how to build this application.