3. Vue CLI

Overview

This chapter introduces Vue CLI, including the Vue-UI and Vue.js DevTools, which are used when developing Vue applications for production. The Vue-UI allows you to create, develop, and manage Vue projects through an accompanying graphical user interface. Vue.js DevTools is a standalone app and browser extension for debugging Vue.js applications. We go into the details of the use cases and benefits of using Vue CLI features, which will teach you how to utilize these Vue commands. In addition to the command-line controls, we will set up and run Vue projects utilizing the new Vue GUI. We will combine the knowledge accrued in previous chapters to create new Vue applications that use v-model directives and two-way binding concepts. We will then dive into how to prototype Vue components. We will also learn how to build a Vue prototype for production and serve it locally. As we proceed, you will see how to set up and debug your Vue app and showcase its features...

Introduction

In the previous chapter, we covered how to manage and manipulate data reactively in our component templates using Vue.js. In this chapter, we will be looking at how to support the development of such templates using Vue CLI. Vue.js takes advantage of the npm and webpack ecosystem, as seen in Chapter 1, Starting Your First Vue Project, in the The Vue Instance in a Simple Vue Application example. These tools help developers to quickly scaffold and build great web applications. Notable patterns inside of Vue.js are vue.config (which allows you to add webpack rules without directly editing the webpack file itself), two-way data binding, and single file components (SFCs), as seen in Chapter 1, Starting Your First Vue Project, in the Two-Way Binding Using V-Model example.

Webpack projects instantiated using the Vue command-line interface (Vue CLI) will come with hot reloading already installed. Hot reloading is a frontend development pattern where your app in the browser...

Using Vue CLI

Projects created using the Vue CLI tool have access to common tasks that will help you serve (run a project in your browser locally), build (compile files for production), and lint (examine code for errors) your project. The Vue CLI service development dependency packages are installed automatically with a new project and allow you to run the following commands:

• npm run serve or yarn serve – Runs your project code on localhost:8080 with hot reloading. The port number 8080 is arbitrarily assigned, as it is above the well-known port numbers 1-1023 used in other areas of computing. If you have multiple Vue projects running at the same time, they will have incremental port numbers such as :8080, :8081, and so on.
• npm run build or yarn build – Runs a production build that reduces the file size of your project and can be served from a host.
• npm run lint or yarn lint – Runs the process of linting, which will highlight code errors or warnings...

Vue Prototyping

Let's say, one day you wake up with a great idea for a component or are involved in a large project and you want to debug components without the complex interdependencies of the existing project. Vue prototyping can help you create new components or debug existing ones, even for large projects. This is done by running .vue files in a separate and isolated compiler directly, without the need for any local dependencies. Running .vue files in this way may save time because you do not need to install a full Vue project as described in Exercise 3.01. Instead, all you need to do is install the Vue CLI service globally by running either of the following commands: npm install -g @vue/cli-service-global or yarn global add @vue/cli-service-global.

Once this has been installed, you will have access to the following two commands:

• vue serve – This command compiles Vue.js code and runs in a localhost environment in your browser.
• vue build – This...

The Vue-UI

The Vue-UI is a graphical interface that allows you to control Vue properties without requiring too much of an understanding of how the command line works or how individual files such as the package.json or webpack files are configured. The Vue-UI provides easy access to information such as module analysis, which shows the impact of package dependencies on your project that can bloat the file size. You can also review the compiled file size of your project and compare how long your project will take to load across various devices and internet speeds. To get started using the Vue-UI, you can instantiate it anywhere by opening a terminal window and running the vue ui command. At the time of writing, the Vue-UI is still in beta. If you run into any issues using this tool, stop the command, and run vue ui again.

The Vue-UI can be used on new and existing projects. Generally, you would opt for presets using Vue CLI at the start of the project, such as which SCSS compiler,...

Vue.js DevTools

Vue.js DevTools is a browser extension for Chrome and Firefox, and an Electron desktop app that can be run from your computer to help you debug locally run Vue.js projects. These tools do not work in production or remotely run projects (for example, if you serve a production-built project or view a website online). You can download the Vue.js DevTools extension from the Chrome extension page, as seen in the following screenshot:

Figure 3.26: The Vue.js DevTools Chrome extension page

You can also download the Vue.js DevTools extension from Firefox (https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/):

Figure 3.27: The Vue.js DevTools Firefox extension page

The DevTools are a Vue developer's best friend as they will reveal useful information inside of the browser's developer console that you normally would not see. This includes Vue component loading performance and tracking various events that are...

Summary

In this chapter, you were introduced to the multiple Vue.js tools available to help you maintain and manage your Vue applications. You created Vue.js projects from both the command line and the new Vue-UI, installed new dependencies, and served and built your projects from both those interfaces. You can use these tools together or separately – whichever you feel more comfortable with. Vue.js DevTools has a lot of quality-of-life features that will assist you on your journey through the more advanced portions of this book and as you begin to pass props between your components and route pages together.

In the next chapter, you will learn about more advanced Vue component concepts such as passing and validating information between different components by using data props and template slots.