Header Ads Widget

Ticker

6/recent/ticker-posts

Instale Vue CLI 4 y cree un nuevo proyecto de Vue 3

 En este tutorial, aprenderemos cómo instalar Vue CLI 4 y crear un proyecto Vue 3.

Vue CLI 4 viene con soporte para Vue 2 y Vue 3.

Paso 1: instalación de Vue CLI 4

Comencemos instalando Vue CLI 4 en nuestra máquina de desarrollo local.

Abra una interfaz de línea de comandos y ejecute el siguiente comando:

$ npm i -g vue-cli

Después de instalar CLI. Si ejecuta el vue --versioncomando, debería obtener el siguiente resultado:

@vue/cli 4.5.2

Paso 2: creación de un nuevo proyecto de Vue 3

Ahora, si tiene Vue CLI 4 instalado, puede crear un proyecto de Vue 3 usando el siguiente comando:

$ vue create vue3demo

Se le pedirá el siguiente código:

? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 

A continuación, debe seleccionar la segunda opción Default (Vue 3 Preview) ([Vue 3] babel, eslint)para indicarle a la CLI que genere un nuevo proyecto basado en Vue 3.

A continuación, presione Retorno.

Se generarán los archivos de su proyecto y las dependencias se instalarán automáticamente desde npm.

Paso 3: servicio a su proyecto Vue 3

A continuación, navegue hasta la carpeta de su proyecto y ejecute el servidor de desarrollo de la siguiente manera:

$ cd vue3demo
$ npm run serve

Podrá ver la siguiente interfaz si va a http: // localhost: 8080 / con su navegador web:

Página de presentación de Vue.js

Esta es la estructura de directorios de nuestro proyecto:

.
├── babel.config.js
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
└── src

La src/carpeta contiene los siguientes archivos:

├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
└── main.js

Conclusión

En esta publicación rápida, hemos visto cómo generar un nuevo proyecto de Vue 3 usando Vue CLI v4.

Publicar un comentario

0 Comentarios