Language: EN

como-crear-y-gestionar-proyectos-con-vue-cli-ui-3-0

How to create and manage projects with Vue CLI UI 3.0

Today we are going to see how to create and manage projects with VueJs easily thanks to the graphical interface of its Vue CLI in its version 3.0

Web development has changed a lot and very quickly in recent years. Any modern web development usually requires a large number of tools, tasks, and dependencies.

Fortunately, new tools also constantly appear that simplify the development process, such as the essential NodeJs or the well-known Webpack, the “Swiss Army knife” of web development.

The main frameworks, like AngularJs, are also adapting to improve and simplify the process. A trend is the creation of CLI tools (command line interface) that simplify the creation and management of projects.

VueJs, of course, also joins this trend and has its own CLI, whose latest version 3.0 was released in August 2018. It incorporates a graphical interface (UI) that greatly simplifies working with VueJs projects.

Install VueJs CLI UI

The first thing we need to do is make sure we have the latest version of the Vue CLI installed. To do this, we run the following command to install the CLI globally.

npm install @vue/cli -g

Now, to run the Vue CLI UI, we simply have to run this command.

vue ui

A web server will be started at localhost:8000, and the web browser will open showing the user interface of Vue CLI.

vue-cli-ui-start

Logically, the server runs in the command line, so we should not close it while we are running the CLI UI.

Create and manage projects with VueJs CLI UI

The VueJs CLI UI is simple and intuitive. First, we can create, import, or manage VueJs projects.

vue-cli-ui-administracion-proyectos

On the other hand, within a project we can manage component dependencies or add packages.

vue-cli-ui-complementos

Finally (and probably my favorite feature) we have task management. Here, we can compile and serve with LiveUpdate enabled, for development tasks. Or compile for production, running tasks associated with Webpack (transcompilation, Minification, concatenation, …)

vue-cli-ui-tareas

All available easily from a single interface! As we can see, the VueJs CLI UI tool is a very convenient tool that greatly simplifies the development of applications with VueJs.

Whether you are an expert user or are just starting out with this great framework, it is definitely the best option for managing VueJs projects.