Introduction to Vue

Vue is somewhat unique in its component structure, as it combines HTML templates with TypeScript logic, and also component-specific CSS within the same file. In this section of the chapter, we will set up a Vue development environment, and explore some of the concepts of Vue components.

Vue setup

Similar to what we have seen with Angular and React, Vue also provides a command-line utility for generating a bare-bones Vue application, which is known as the Vue CLI, or command-line interface. We can install the Vue CLI globally, as follows:

npm install -g @vue/cli

Here, we are using npm to install the Vue CLI, and making it available globally with the -g flag. Once it's installed, we can check the version of the Vue CLI as follows:

vue -V

Here, we are invoking the Vue CLI, which is simply called vue, and using the -V flag to retrieve the currently installed version, which at the time of writing returns:

@vue/cli 4.5.9

Here,...