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
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!
There are some basic commands you can use that come in handy when using the file system
dir
- Lists what is in the current directory(folder).cd <pathName>
- Changes the directory(folder) in the file systemcd ..
- Moves you up one levelmkdir or md <folderName>
- Makes a new directory(folder).
ls
- Lists what is in the current directory(folder).cd <pathName>
- Changes the directory(folder) in the file systemcd ..
- Moves you up one levelmkdir or md <folderName>
- Makes a new directory(folder).
Play with the commands and see what you can do!
- Open your terminal/command prompt and navigate to your Documents directory and then Downloads directory
- Inside your Documents directory create a folder
Bonus: Navigate inside the folder you created and figure out how to create a file!
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.
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
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
We can also use Vue UI to install Vuetify CLI:
// ensure Vue CLI is >= 3.0
$ vue --version
// Then start the UI
$ vue ui
- Click Plugins
- Type in vuetify in the search bar
- You should see vue-cli-plugin-vuetify
- Click and install it
"A CLI or Command Line Interface"
You can say that CLI stands for Command Line Interface and then go on to the definition. :)