Vue CLI
Tags: javascript, webdev, beginners
Published: 2021-05-20 06:49:19

Today, I want to talk a little bit about the basics. 

When starting a project in Vue, the easiest and fastest way is to utilize something called Vue CLI, standing for Command-line Interface. Simply put, it scaffolds a basic website in Vue for developers to start on. For those who are more familiar with React, this would be in the same category as "create-react-app", but better. Let's get into finding out what it is in more detail, how to install/use it, and some plugins that can be used to make it even better.

---------------------------------------------

# What is Vue CLI?
[Vue CLI](https://cli.vuejs.org/) is the node installable Command-line Interface, providing a full system for rapid Vue.js development. With Vue CLI, developers can have a pre-built project they can easily adjust to their needs. It is nicely built, so that you do not have to spend unnecessary time on configurations, dependencies, webpack, etc. It also provides instant prototyping, allowing us to easily debug and visualize what's going on. What I like the most about Vue CLI is its collection of plugins. With just a simple line of code, you can add plugins to your project and utilize them accordingly. 

# Installing Vue CLI
Before we install Vue CLI, let's make sure we have Vue installed. Assuming everyone has [Node.js](https://nodejs.org/en/) installed, we will be using npm to install 
```javascript
npm install vue
```
To test whether we were successful in downloading it, we can check its version.
```javascript
vue --version
```

Now that we have Vue installed, let's install Vue CLI.
```javascript
npm install -g @vue/cli
```
--------------------------------------------------------

# Build an APP
It's no good if we don't use what we have just installed. Let's go on and create an app using Vue CLI, and implement some plugins that I recommend.
On the command line, once you navigate to the directory, this code will allow you to create a folder called app at your current repository, with everything you need for a Vue project set inside. Replace 'app' with the name of your project/folder. You will be prompted with many given presets. Unless required, you will most likely use the default configurations.
```javascript
// you can replace 'app' with a name of your choice
vue create app
// or
vue create --default app
```
In the command line, cd into the directory you've just created, and check our instant-prototyping.
```javascript
cd app
npm run serve
```
If you open your browser to localhost:8080, Voila! You will see the app running, and any changes you make will be applied to your site instantly.
![Vue CLI example page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ychrep1hurynurrpwfg5.png "Vue CLI example page")

-----------------------------------------
Now that you have the basic CLI set up, you can add plugins to enhance your programming experience with Vue. These plugins have helped me become a better developer, guiding me through each step on how to use it. The plugins I recommend you to install, or at least tryout, are
* [vuex](https://vuex.vuejs.org/) : A State Management Pattern + library for Vue.js apps, meaning it helps us control the states of our nested components.
* [vuetify](https://vuetifyjs.com/en/) : A plugin that utilizes the Material Design Framework. It helps developers with UI components, with absolutely incredible documentation. 
* [quasar](https://quasar.dev/) : A plugin that enhances the Vue.js user interface in a very user-friendly way. For starters, you can set up all of the interfaces in advance and get the code for you to adjust.
```javascript
vue add vuex
vue add vuetify
vue add quasar
```
-----------------------------------------

Today, I've shared some information about the Vue CLI and some useful plugins/user interfaces. Once you get to know how to use it, starting a project becomes a smoother process. Of course, having a more configured and defined project for implementing other plugins, or components, is another strength that follows.

If there are things I could improve on, please don't hesitate to let me know! I'm all ears :)

-JH
[LinkedIn](https://www.linkedin.com/in/jacobjhunsaker/) | [Github](https://github.com/mimanjh)