The Command-Line Interface
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# ORyarn 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:
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:
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.
You will be asked to turn on history mode for the router, type
N, and hit the Return key.
For the CSS preprocessor, choose
Sass/SCSS (with node-sass).
For the linter, choose
ESLint with error prevention only.
For the lint configuration, choose
Lint on save.
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.htmlthat 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
/distdirectory, which is automatically generated on every build (and thus does not require any tracking and the
node_modulesdirectory, which is automatically recreated on every
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!
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
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.
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.