• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/13/21

Create a New Project With Vue CLI

Log in or subscribe for free to enjoy all this course has to offer!

The Command-Line Interface

There was once a time in front-end development when everything was done by hand. Whether it was figuring out which stylesheets to include on certain pages depending on the content or minimizing the size of your JavaScript file to improve page load time, it became clear that this toolchain would have to evolve to automate these processes. This is where build tools (i.e., Gulp, Webpack, etc.) come in and why the command-line interface exists.

For most popular frameworks these days, a command-line interface (CLI) is mandatory for enterprise-level applications due to the complexity that exists with these build tools. At its core, CLI tools help provide developers a standard foundation for starting every project so time can be spent on building applications rather than configuring them.

Installing Vue CLI

To get started using Vue's CLI, you must have Node 8.9 or above (8.11.0+ recommended). Installing it on your machine is as simple as:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Once you've finished installing, you should be able to run:

vue --version
# 3.12 (current version at the time)

When you see a version of 3+ output from your terminal, you have successfully installed Vue CLI!

Creating a New Project

Creating a new project with Vue CLI is simple. Let's go ahead and create one together:

vue create my-first-vue-cli-app

This should prompt you to choose a preset:

The screen reads
Example of what presets you'll see when invoking the Vue create command

A preset represents preconfigured options that are automatically installed with every app. Since your installation of Vue CLI is a new one, you'll  see that it only has a  default (babel, eslint)  preset along with an option to manually select features. To tour the full set of configurations for Vue CLI, use the  Down arrow key  to move your selection, and press  Enter  to make your selection.

Once you choose "Manually select features," you should see the following screen:

A list of possible features: Babel, TypeScript, Progressive Web App (PWA) Support, Router, Vuex, CSS Pre-processors, Linter / Formatter, Unit Testing, E2E Testing.
A list of possible features you can toggle when manually selecting what presets you want for your app

While the options here are not covered in this course, you can see that there are numerous possibilities for configuring your projects. Let's toggle on CSS preprocessors.

The circle to the left of the feature
Enabling CSS preprocessors toggles on the green circle to indicate you have selected it
  1. You will be asked to turn on history mode for the router, type  N, and hit the Return key.

  2. For the CSS preprocessor, choose  Sass/SCSS (with node-sass).

  3. For the linter, choose  ESLint with error prevention only.

  4. For the lint configuration, choose  Lint on save.

  5. For preferred config placement, choose  In dedicated config files.

Now you have an option to save this configuration for future apps. Since this is a temporary configuration, type  N, so it doesn't save our configuration as a preset.

Your terminal will now start to install all the required packages for the CLI to work. Everyone has slightly different terminal settings, but you should see something similar to:

[1/4] πŸ” Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] πŸ”— Linking dependencies...
[4/4] πŸ”¨ Building fresh packages...
success Saved lockfile.
✨ Done in 220.83s.
βš“ Running completion hooks...
πŸ“„ Generating README.md...
πŸŽ‰ Successfully created project my-first-vue-cli-app.
πŸ‘‰ Get started with the following commands:
$ cd my-first-vue-cli-app
$ npm run serve

It's time to see what fun things Vue CLI has installed!

Vue CLI Application Architecture

When you open up your new project,  my-first-vue-cli-app , in your code editor, you should see something similar to the following:

The primary content that you will want to be familiar with is:

  • node_modules- Contain all the dependencies that allow your app to do the amazing things it does. You will rarely (if ever) need to look in this folder. It's usually not committed to the repository since it is managed by npm.

  • public - This directory contains the favicon.ico and the base  index.html  that will be used to generate the rest of your application. In addition, anything included in here will be served directly via the root URL.

  • src - This directory is where you will be spending 99% of your time since the majority of your code will live here.

  • .gitignore - This file contains a list of files and/or directories that will not be committed to a code repository. Two common examples are the  /dist  directory, which is automatically generated on every build (and thus does not require any tracking and the  node_modules  directory, which is automatically recreated on every  npm install  or  yarn install.

  • package.json - This is the base configuration file of your project. It includes metadata like your project name and version, but also contains critical information like what scripts can be run (i.e., serve and build) and what dependencies are required for your project. Let's go ahead and unpack the src directory next:

    • Serve - This is the script that will start up a local development environment for you to work in.

    • Build - This is the script responsible for creating the final code artifacts that you would deliver to a client or the user.

Let's go ahead and unpack the src directory next:

  • Assets - This directory is where you'll put things like images and other required assets you may need to refer to in your app (i.e., movies, PDF documents, etc.)

  • Components - This directory will hold our components for our application. If you don't know what components are yet, don't worry. I will be covering that in the next lesson!

  • main.js - This is where high-level Vue configuration options are set. It looks a little different, but the instantiation of a new Vue app should look similar to what you've done in the past.

As you're looking at that list, you might have noticed that I left off an important file: App.vue. Don't worry, we will get to that next lesson!

Before we wrap up, let's jump back in the terminal to our project directory and run:

npm run serve

This command will start a local development environment (typically at http://localhost:8080) that will allow you to see and interact with live changes in your app as you code. It is one of the best tools created for web developers, and most cannot imagine life without it!

Once you're in your local development environment, I would strongly recommend checking out Vue DevTools, which is a Vue-specific developer toolkit for helping you build awesome Vue apps!

Exercise

You will find the source code for the exercises in the course's GitHub repo in the  cafe-with-a-vue folder. To get started, check out the  P2C1-Begin  branch.

Instructions

Create a new project with Vue CLI that is called cli-version with the following configuration:

  • CSS Preprocessor (Sass/SCSS) with node-sass.

  • ESLint with error prevention only.

  • Lint on Save.

  • In dedicated config files.

  • Do not save as a preset.

Let's Recap!

In this chapter, you learned:

  • How to install Vue CLI.

  • How to create a new Vue app with Vue CLI.

  • How to configure a Vue app with Vue CLI.

  • How Vue CLI scaffolded apps are structured.

In the next chapter, you'll learn about the special  *.vue  file type that will become your best friend: single-file components.

Example of certificate of achievement
Example of certificate of achievement