Vue CLI 3: Getting Started

Getting Started with Vue CLI 3

Vue JS is a progressive framework for building user interfaces, consisting of a core library that focuses on the view layer of web applications. With over 121,000 stars on GitHub, it has become a popular choice among developers. In this article, we’ll explore the new features of Vue CLI 3, including the graphical user interface and instant prototyping.

Prerequisites

Before we dive into the details of Vue CLI 3, make sure you have the following prerequisites:

• Node.js 10.x or above installed
• Node Package Manager 6.7 or above (NPM) installed
• A code editor, such as Visual Studio Code
• Vue latest version installed globally on your machine
• Vue CLI 3.0 installed on your machine

Graphical User Interface

One of the exciting features of Vue CLI 3 is the graphical user interface (GUI). The GUI provides an intuitive way to create projects, install plugins, and run tasks. To access the GUI, simply run the command vue ui in your terminal.

Creating a New Project

There are two ways to create a new Vue project: using the GUI or the command line interface (CLI).

Using the GUI

To create a new project using the GUI, follow these steps:

1. Open the terminal and run vue ui
2. Click on the “Create” button
3. Choose a project name and select a package manager (either yarn or npm)
4. Toggle the option to overwrite the folder content if it already exists
5. Decide whether to create a git repository for the project

Using the CLI

To create a new project using the CLI, run the command vue create vue-test, where “vue-test” is the name of your application.

Installing Plugins

The new CLI is built to be plugin-based, allowing you to modify the configs of your project at any point in time. To install plugins, use the GUI or the CLI.

Using the GUI

To install plugins using the GUI, follow these steps:

1. Open the project dashboard
2. Click on the “Plugins” icon
3. Search for the plugin you want to install
4. Click the “Install” button

Using the CLI

To install plugins using the CLI, navigate into the project directory and use the command vue add <plugin-name>.

Running Tasks

Tasks are like commands that take action on your Vue projects. You can run tasks using the GUI or the CLI.

Using the GUI

To run tasks using the GUI, follow these steps:

1. Open the project dashboard
2. Click on the “Tasks” icon
3. Choose the task you want to run

Using the CLI

To run tasks using the CLI, use the command npm run <task-name>.

Instant Prototyping

Instant prototyping allows you to create a single Vue component without having to create an entire project. To use instant prototyping, install the Vue CLI service globally on your machine and run the command vue serve <component-name>.vue.

Conclusion

In this article, we’ve explored the new features of Vue CLI 3, including the graphical user interface and instant prototyping. We’ve also covered the basics of creating a new project, installing plugins, and running tasks. With Vue CLI 3, you can streamline your development process and build robust Vue applications.