Vue.js 3 Cookbook
上QQ阅读APP看书,第一时间看更新

Technical requirements

In this chapter, we will be using Node.js and Vue-CLI.

Attention Windows users! You need to install an NPM package called windows-build-tools to be able to install the following requisite packages. To do this, open Power Shell as an administrator and execute the following command:
> npm install -g windows-build-tools

To install Vue-CLI, you need to open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:

> npm install -g @vue/cli @vue/cli-service-global

Creating the base file

In all recipes in this chapter, we will use this base template which we will create now. Make sure you follow these steps to create the file before starting the example in the recipe:

  1. Create a new .html file in any folder and open it.
  2. Create an html tag and add a head HTML element as a child. Inside the head HTML element, add a script HTML element with the src attribute defined as http://unpkg.com/vue@next:
<html>
<head>
<script src="https://unpkg.com/vue@next"></script>
</head>
</html>
  1. As a sibling of the  head HTML element, create a body HTML element. Inside the body HTML element, add a div HTML element with the attribute id defined as "app":
<body>
<div id="app">
</div>
</body>
  1. Finally, as a sibling of the div HTML element, create a script HTML element, with empty content. This will be where we will place the code for the recipes:
<script></script>