Skip to content

Instantly share code, notes, and snippets.

@BboyAkers
Last active May 5, 2020 22:11
Show Gist options
  • Save BboyAkers/6a293671fb11f7d7096214a6f73de3a9 to your computer and use it in GitHub Desktop.
Save BboyAkers/6a293671fb11f7d7096214a6f73de3a9 to your computer and use it in GitHub Desktop.
What is a CLI?

What is a CLI?

A CLI or Command Line Interface Interface is an in interface that accepts text input to execute operating system functions. As a software developer we use CLI's all the time. What exactly does a CLI look like? Open your terminal on Mac or command prompt(powershell works too) if you are on Windows. As a developer we use the terminal and/or command prompt to:

  • install packages
  • run scripts
  • manage project files

and more. Something you might be familiar with in the web development world is this

$ npm install <package name>

ex. npm install vue Gif of npm install vue You can even navigate to and around the files on your system or better yet what we call the file system. In that example in the CLI, we are using the package manager npm to install a package of our choice!

Basic Commands

There are some basic commands you can use that come in handy when using the file system

Basic Windows Commands

  • dir - Lists what is in the current directory(folder).
  • cd <pathName> - Changes the directory(folder) in the file system
  • cd .. - Moves you up one level
  • mkdir or md <folderName> - Makes a new directory(folder).

Basic Linux Commands

  • ls - Lists what is in the current directory(folder).
  • cd <pathName> - Changes the directory(folder) in the file system
  • cd .. - Moves you up one level
  • mkdir or md <folderName> - Makes a new directory(folder).

Play with the commands and see what you can do!

Basic Challenges

  1. Open your terminal/command prompt and navigate to your Documents directory and then Downloads directory
  2. Inside your Documents directory create a folder

Bonus: Navigate inside the folder you created and figure out how to create a file!

Vue CLI

Before we get go further into getting the project started we need to take a look into the Vue CLI. Vue CLI is the standard command line tooling for developing vue.js projects. To learn how to install Vue CLI visit here. If you're wanting to know more information about how to use the Vue CLI you can visit the documentation.

Creating the Project

The first thing we need to do is create is a vue project. Hopefully uo've familiarized yourself with the basic commands. Navigate to the directory you'd like to create the project in and type:

$ vue create my-app
// navigate to new project directory
$ cd my-app

Gif of vue create and cd

Adding Vuetify

Now that we've created our project and navigated into the directory, next we have to add the Vuetify UI. Next we have to add the Vuetify CLI package by typing in our CLI:

$ vue add vuetify

Gif of add vuetify

Using Vue UI

We can also use Vue UI to install Vuetify CLI:

// ensure Vue CLI is >= 3.0
$ vue --version

// Then start the UI
$ vue ui
  1. Click Plugins
  2. Type in vuetify in the search bar
  3. You should see vue-cli-plugin-vuetify
  4. Click and install it
@johannaRlee
Copy link

"A CLI or Command Line Interface"

You can say that CLI stands for Command Line Interface and then go on to the definition. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment