!!! Vue.js For Beginner Section 1 Installation of Vue JS and how set up a project

ВАЖЕН КЛИП!!!

https://www.youtube.com/watch?v=HGs6MvHXh3w

--> Installation
To make building Vue applications easier, there is also a Vue CLI to streamline the development process. To use the npm and CLI packages, you will need:

Installed Node.js 16.14.0
To install the CLI, run the following command in your terminal:

npm install –g @vue/cli


--> Installation of Vue JS and how set up a project
Initialize a new project
Once the Vue CLI is installed, you can open a terminal in the directory where you want to create the project and run the vue create <project-name> command.

After entering the command, the CLI will give you the possible configurations that you can use for the project. There are a few preset ones, but you can make others of your choice yourself. These options allow you to configure things like TypeScript, vue-router, test tools, and more.

We will select the Default option (Vue 3). Select the option using the arrow keys and then press Enter.


--> Installation of Vue JS and how set up a project
Project structure
One of the most important files is package.json. This file contains all the details for your project.

-project name
-project version
-public or private project
-scripts
-start server
-build

The folder node_modules are packages supported by the dependency. A package is a file or directory that is described by a package.json file. A package must contain a package.json file in order to be published to the npm registry.

Public folder contains two files: index.html and favicon.ico

-index.html:  This is the basic template for your application. Your Vue application will always run from this HTML page

SRC folder is the core of your Vue application.

-main.js file initialize your Vue application and specifies which HTML element in the index.html file should be attached to your application.
-In this file you register global components or additional Vue libraries.
-App.vue: this is the top level component in your Vue app.
-Assets in this folder are located all css files or images


--> Installation of Vue JS and how set up a project
Launch the application locally
In your terminal, write the command to start your server: npm run serve

Your terminal should display something like the following:

1. INFO  Starting development server…
2. 98% after emitting CopyPlugin
3. DONE  Compiled successfully in 18121ms
4. App running at:
5. – Local:   <http://localhost:8080/>
6. – Network: <http://192.168.1.9:8080/>
7. Note that the development build is not optimized.
8. To create a production build, run npm run build.

Open your browser and enter one of the following addresses:

1. – Local:   <http://localhost:8080/>
2. – Network: <http://192.168.1.9:8080/>


--> Installation of Vue JS and how set up a project
Make first changes
Let’s make our first change to the app:
Above the code ( <HelloWorld msg=“Welcome to Your Vue.js App“/> ) , add the following line:
<h2>This is my first Vue app</h2>