Real World Vue.js

Lessons

1. Intro to Real World Vue

0:57

2. Vue CLI 3 - Creating our Project

9:06

3. Optimizing your Editor

9:07

4. Vue Router Basics

15:16

5. Dynamic Routing & History Mode

9:31

6. Single File Vue Components

14:21

7. Global Components

9:14

8. Slots

6:45

9. API calls with Axios

17:52

Vue CLI 3 - Creating our Project

In this tutorial, we’ll be exploring Vue CLI 3, along with the Vue UI, in order to quickly scaffold our project. We’ll then take a tour of the project the CLI creates for us to get comfortable working within these files and folders later.

Why a CLI?

As you probably know, CLI stands for Command Line Interface, and the Vue CLI provides a full system for rapid Vue.js development. This means it does a lot of tedious work for us and provides us with valuable features out-of-the-box.

It allows us to select which libraries our project will be using Then it automatically plugs them into the project.

It Configures Webpack When we build our app with Webpack, all of our JavaScript files, our CSS, and our dependencies get properly bundled together, minified and optimized.

It allows us to write our HTML, CSS & JavaScript however we like We can use single-file .vue components, TypeScript, SCSS, Pug, the latest versions of ECMAScript, etc.

It enables Hot Module Replacement (HMR) So when you save your project, changes appear instantly in the browser. This configuration is based on webpack-dev-server.


Installing the CLI

In order to use the CLI, you’ll need to have Node.js version 8 or above installed (8.10.0+ is recommended).

To install the CLI, run this command in your terminal:

    npm i -g @vue/cli

Once it is installed, you’ll have access to the vue binary in your command line. We’ll use this to create our project.

Creating a Vue project

There are two ways we can create our project. With the newer Vue UI, or directly from the command line, which we’ll do now with:

    vue create real-world-vue

This command will start the creation of a Vue project, with the name of “real-world-vue”.

We’ll then be prompted with the option to pick a default preset or to manually select features. Using the down arrow key, we’ll highlight Manually select features, then hit enter.

We’ll then be presented with a list of feature options. Using the down arrow key, we’ll move down and use the spacebar to select Router, Vuex and Linter / Formatter. Then hit enter.

We’ll then choose a Linter / Formatter. For this project, we’ll be using ESLint + Prettier.

We’ll add the additional feature of Lint on save.

And for the sake of this course, we’ll choose to have dedicated config files.

We have the option to save all of these settings as a preset. We’ll choose not to with N.

If you’d like to save this as a preset, however, it will be stored in a JSON file named .vuerc in your user home directory.

If you have yarn installed, you’ll be prompted to choose a package manager. I’ll choose npm.

When we hit enter, our project will be created automatically.


Serving our Project

Once our project is done being created, we can cd into. In order to view it live in our browser, we’ll run this command: npm run serve

Above is our app, running live in the browser. It already has two pages, the Home page and the About page, which you can navigate between because it’s using Vue Router.


Vue UI

Now that we understand how to create a Vue project from the command line, let’s repeat this same process but with the Vue UI instead.

Since we now have access to the vue binary, we can type vue ui in our terminal, which will start up the Vue UI in our browser.

Our first step is to click the Create tab, select the location where we want to save our project, then click Create a new project here.

We’ll then give our project a name, in this case “real-world-vue”. We have the option to select a package manager, but we’ll stick with the default.

Just like from the terminal, we’ll Manually select features.

We’ll select Router, Vuex, and make sure that Babel and Linter / Formatter are also selected and choose Dedicated Config Files.

On the next page, we want to make sure Lint on save is selected, and in the right-hand dropdown, select ESLint + Prettier.

We also have the option to save these settings as a preset, but we can choose not to by clicking Continue without saving.

Now our project will be created.

Vue UI Features

The UI provides the ability to alter our configurations, as well as run tasks, like the serve task that we ran earlier from the terminal. The difference here is that we get a lot more information about what is happening with that task.

You can also add plugins to your project from the Vue UI, which makes it very simple to add a library that you may need.

If you need to import a project that you hadn’t originally created from the Vue UI, you can easily do so from the Import tab of the Project Manager. Just locate your project, and click Import this folder.


Touring our Vue Project

Now that we know how to create our project from the terminal and also from the UI, let’s take a look at the project that was created for us.

The node_modules directory is where all of the libraries we need to build Vue are stored.

In the public directory, you place any static assets you don’t want to be run through Webpack when we build our project.

You’ll want to put the majority of your assets, such as images and fonts, in the assets directory so they can be optimized by Webpack.

The components directory is where we store the components, or building blocks, of our Vue app.

The views directory is where we store files for the different views, or pages, of our app.

The App.vue file is the root component that all other components are nested within.

The main.js file is what renders our App.vue component (and everything nested within it) and mounts it to the DOM.

Below that we have a router.js file, which we’ll cover more in the lesson on Vue Router, and the store.js file is for Vuex, which we’ll also cover in future lessons.

Finally, we have a .gitignore file where we can specify what we want git to ignore, along with a babel.config.js file and our package.json, which helps npm identify the project and handle its dependencies.


How the App is Loaded

You might be wondering now, how is the app being loaded? Let’s take a look at that process.

    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    Vue.config.productionTip = false;
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount("#app");

In our main.js file, we see that we’re importing Vue, along with our root App.js component, as well as our router and store. We are then creating a new Vue instance, telling it to use the router and store, and to render App (our root component) and mount it to the DOM, where this id of "``app``" is.

If we peek inside our Index.html file, we can see there’s a div with the id of "app", which means this is where our App will be mounted.

    <div id="app">Our App will be mounted here</div>

Let’s take a look at this process more visually:


The Build Process

Now that we understand how the App gets rendered and mounted, let’s take a look at the build process. Because remember? Webpack will be bundling our files together.

If we take a closer look at our Index.html file, we see this comment:

    <!-- built files will be auto injected -->

So what does that mean?

Let’s explore that by heading back to our terminal, and running the command npm run build. This will build our project, and when it’s complete, we see it says, “The dist directory is ready to be deployed”.

Hmm. Let’s open up the dist directory that was created for us.

As we see here in the js directory, Webpack has packaged our app and given us these new bundled JavaScript files.

And if we open up our Index.html, we can see that there are now two script tags, which have been auto injected, where that comment **used to be (“built files will be auto injected”).

    <script src=/js/chunk-vendors.24971a46.js></script>
    <script src=/js/app.5f694b83.js></script>

The chunk-vendors.24971a46.js file contains all of our dependencies.

The App.5f694b83.js file below it contains all of our application-specific code, including the code that was in our Main.js, which renders and mounts our App.

So when our project is deployed, and the browser reads this App.5f694b83.js file, that will trigger the process we just looked at visually, where our Vue instance is created and our App is rendered and then mounted to the DOM.

What’s next?

In the next lesson, we’ll be exploring how to set up our code editor for an optimal development environment.