Project setup for building a Vue.js resume

[00:00 - 00:04] The browser does not understand Vue.js code. The browser only understands JavaScript.

[00:05 - 00:13] Therefore, something needs to translate Vue.js code into JavaScript, so our browser can understand it. There are different ways of accomplishing this.

[00:14 - 00:25] It's simple, but also limited way, is to load Vue via a CDN. You just add a script tag to your HTML that will load the Vue.js library.

[00:26 - 00:36] The advantage of this is that it is the fastest setup, which makes it great for prototyping. The big disadvantage is that you cannot create single file components.

[00:37 - 00:47] With the single file component structure, each file contains only one component. Without this, the code can get messy once you create more than a few components.

[00:48 - 00:57] You are also dependent on the external server to serve the Vue.js library reliably. So this makes it not the right choice for us.

[00:58 - 01:05] We want to be able to use single file components, so we need to build a tool. But we want a simple setup and configuration tool.

[01:06 - 01:12] That is where a scaffolding tool comes in. These tools generate a pre-configured project for you.

[01:13 - 01:26] In other words, we get a folder with the code and configuration files we need to start. A byte-based scaffolding tool called CreateView is recommended to be used as of 2023.

[01:27 - 01:37] It was created by Avenue, the same guy who created Vue, and so was Vied itself. Since this is the officially recommended setup, we will go with that.

[01:38 - 01:49] Run npm createViewAtlatest and the directory where you want your project to be. Make sure your node version is up to date before you run it.

[01:50 - 02:12] As of December 2023, CreateView requires at least version 16, but you should check the Vue Quick Start documentation for the current minimum required. I am using node in version 18.17.1 and npm in version 9.6.7.

[02:13 - 02:20] You can check which versions of node and npm you are running with this command. Now we need to enter a project name.

[02:21 - 02:28] We type resume_better and hit enter. It asks us to install packages.

[02:29 - 02:44] We don't need to add TypeScript or JSX, or the View Router, Pinear, or Viteist, or Enterenticing or ESLint. You can install all these tools later, but for the beginning, let's keep things simple.

[02:45 - 02:57] Now that this is done, you can see that the scaffolding tool created a new folder in your current directory with the name of your app. It also gives you the command to execute an order.

[02:58 - 03:08] First, we see D, which stands for Change Directory, into the resume_better folder. You see all the files it created automatically for us.

[03:09 - 03:19] You will also notice that there is yet to be a node modulus folder. The scaffolding tool created the package.json, but we still need to install the dependencies listed there.

[03:20 - 03:33] We do this by running the npm install command. npm install always needs to be run from the directory the package.json is in.

[03:34 - 03:40] So make sure you are in the resume_better directory when you run it. Now we see node modulus folder.

[03:41 - 03:53] If you look inside, you see that plenty of dependencies are installed. The package.json shows us the dependencies, our only dependency that we will need for production as a view.

[03:54 - 04:01] The two byte dependencies are only needed during development. Depending on when you watch this tutorial, the versions might differ.

[04:02 - 04:15] What's important is that you use view version 3, which byte version it installs should not make a noticeable difference. To run the app locally for development, we need to start a local server.

[04:16 - 04:23] In the package.json, you see the command that you need for that. For development, we want to run the dev command.

[04:24 - 04:32] Type in npm run-dev in the terminal of this directory. I like to use the terminal from Visual Studio Code for this.

[04:33 - 04:39] You will see the address where you can open your local app. Here we see a landing page created by byte.

[04:40 - 04:44] Some useful links are listed on the right. Feel free to check them out.

[04:45 - 04:51] Let's open the link of the official documentation in a new tab. We might need it later.

[04:52 - 04:59] Also, the tooling part is interesting. The recommended IDE setup is VS Code plus the VOLA extension.

[05:00 - 05:06] We are using Visual Studio Code. Let's check if the VOLA extension is installed and enabled.

[05:07 - 05:14] You can check this on the extension tab on the left side. It is installed and enabled since I have used this before.

[05:15 - 05:20] If you don't have it installed and enabled yet, I recommend you do so. Finally, let's try to adjust this landing page.

[05:21 - 05:27] In the root directory, we see the index HTML file. This is the page that gets rendered.

[05:28 - 05:33] You can see the div with the ID, the ID of app. Underneath, we have a script.

[05:34 - 05:41] You can see that the main.js script lies in the source folder. It is the entry file to the JavaScript and view.js logic.

[05:42 - 05:50] Navigate into the source folder and open the main.js file. We see that an app component gets imported from app.view.

[05:51 - 06:04] This component then gets mounted to the div with the ID app. So all that we see on the landing page must come from the app component and whichever components this component consists of.

[06:05 - 06:14] The app component shows that the template uses the component called welcome. We comment this out and write test instead.

[06:15 - 06:24] So the welcome component was the section on the right with all the resources. This was just an example to show how all the pieces work together.

[06:25 - 06:33] We will keep index HTML and main.js as it is and only replace the content and app.view. Of course, we will also add new components.

[06:34 - 06:53] To clear out what we don't need, we can navigate into the components directory with the terminal and remove all content with remove -rf and star. This removes everything in the current directory, so always make sure you're in the correct run before running this command.

[06:54 - 07:06] If it prompts you to confirm this action, just have Y for yes and hit enter. Now we go into the app.view file and clear out the content of the template section.

[07:07 - 07:14] I will write resumby builder to come soon here instead. Next, we delete the script section and the style section.

[07:15 - 07:28] If you open the app, you see that some styling is still applied. It comes from the main.css and the assets folder.

[07:29 - 07:40] We empty this file, but we keep it because we will apply some styling in the next lesson. We can delete the base.css file and the logo.svg file.

[07:41 - 07:52] Now the app does not have any styling applied. It is a clean canvas ready for us to paint on.

[07:53 - 08:06] In this lesson, we have learned how to set up view app with CreateView and run it. We have read the basic structure of folders and files that this scaffolding tool creates for us, and how and where the app component gets rendered.

[08:07 - 08:13] Finally, we have cleared out the code and the files that we don't need, so we can start fresh in the next lesson.