Saltar al contenido

Vue CLI 3-tutorial Cómo crear vue projectDec, 3rdIn este tutorial, vamos a aprender acerca de cómo crear un vue …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo crear un proyecto Vue mediante el uso de Vue CLI (Command Line Interface) y Vue interfaz de usuario.

Vuejs ofrece una interfaz de línea de comandos con nosotros para generar rápidamente el Vue proyectos.

Instalación Vue Cli

vamos a instalar la CLI Vue ejecutando el siguiente comando en su terminal.

npm install -g @vue/cli

Si estás usando un Mac a continuación, es necesario agregar sudo antes de NPM.

la creación de nuestro proyecto Vue

Una vez que se instala con éxito vue-cli tendrá acceso al binario vue en su línea de comandos.

Vamos a crear nuestro proyecto vue mediante la ejecución de comandos a continuación.

vue create my-vueapp #vue create folder-name

Este comando descargará nuestros archivos relacionados con el proyecto en mi-vueapp carpeta.

Una vez que ejecute este comando se le pedirá que con diferentes preguntas.

Seleccionar la opción de características seleccione manualmente presionando las teclas de flecha hacia abajo y pulsa enter.

Vue CLI v3.0.0
? Please pick a preset:
default (babel, eslint)
❯ Manually select features

Ahora se le pedirá con varios complementos para agregar en nuestro proyecto utilizar la barra espaciadora para seleccionar CSS Pre-procesadores luego pulsa enter.

? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
❯◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing

Ahora se le pedirá elegir el preprocesador CSS utilizando las teclas de flecha para seleccionar su favorito preprocesador.

Hemos de ir con SCSS / SASS.

? Pick a CSS pre-processor (PostCSS, Autoprefixer
and CSS Modules are supported by default): (Use arrow keys)
❯ SCSS/SASS
LESS
Stylus

A continuación, va a elegir la opción ESLint + Más bonito para nuestro proyecto.

? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
❯ ESLint + Prettier

Ahora Se le pedirá con pelusa adicional cuenta con la opción de elegir Pelusa en la opción Guardar y pulsa enter.

? Pick additional lint features
> to invert selection)
❯◉ Lint on save
◯ Lint and fix on commit

Ahora elija la opción archivos de configuración dedicado.

? Where do you prefer placing config for Babel,
PostCSS, ESLint, etc.?
❯ In dedicated config files
In package.json

pediremos salva esto como un valor preestablecido para proyectos futuros escriba N para este proyecto.

Save this as a preset for future projects? (y/N): N

Nota: si desea guardar esta opción como su preset a continuación, escriba: Y para que la próxima vez si va a crear un proyecto vue se puede elegir este ajuste predefinido para generar su proyecto vue rápidamente.

descargado vez con éxito nuestros archivos relacionados con el proyecto en mi-vueappfolder ahora tenemos que cambiar nuestro directorio de trabajo actual mediante el siguiente comando.

cd my-vueapp

Ejecutar nuestro servidor de desarrollo de

Let sirven a nuestro proyecto vue mediante la ejecución de nuestro servidor de desarrollo.

En su terminal ejecutar el comando siguiente para iniciar el servidor de desarrollo.

npm run serve

Ahora abra su navegador e introduzca localhost: 8080 para ver nuestra aplicación vue.

Vue IU

Hasta ahora hemos aprendido a crear Vue aplicación mediante el uso de línea de comandos interfacenow Vamos a crear el mismo proyecto vue de interfaz gráfica de usuario Vue.

Abrir el siguiente comando en el terminal y ejecutar para iniciar Vue interfaz gráfica de usuario en su navegador.

vue ui

Ahora haga clic en una pestaña crear y seleccione una ubicación para guardar su aplicación a continuación, haga clic en Crear un nuevo proyecto aquí el botón.

Introduzca el nombre del proyecto y elija su gestor de paquetes a continuación, haga clic en el botón Siguiente.

A continuación, va a elegir la opción de selección de características de forma manual.

A continuación, se seleccionará la opción de pre-procesadores en la ficha Características.

En la pestaña configuraciones, SCSS opción / Sass seleccionamos mediante el uso desplegable andselect ESlint + opción más bonita continuación, haga clic en el botón Crear proyecto se le pedirá con introduzca su nombre predefinido seleccionar continuar sin opción ahorro.

Ahora haga clic en Tareas en su parte izquierda navegación y seleccione la opción de servir. clic

Vamos en el botón Ejecutar la tarea para iniciar el servidor de desarrollo a continuación, haga clic en aplicación abierta para abrir la aplicación vue en su navegador.

Exploración de nuestro proyecto explorar nuestro proyecto vue de

Let que acabamos de crear mediante el uso de CLI o la interfaz de usuario Vue. -Plegadora-estructura vue

node_modules : En esta carpeta, todos hemos paquetes necesarios para ejecutar la aplicación preventiva.

src : En la carpeta src , nuestra aplicación Vue se almacena.

pública : En esta carpeta, que tiene un archivo index.html y favicon.

main.js : Este es el archivo principal, donde nuestros vue montajes de aplicación para el DOM.

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({ render: h => h(App)}).$mount("#app");

Significa que la representación nuestra aplicación Vue dentro de nuestra etiqueta div con ID de aplicación.

componentes : En esta carpeta, que almacenar piezas reutilizables de Vue componentes Por ejemplo: componente Button.

App.vue : Este archivo App.vue impulsa nuestra aplicación vue mediante la importación de componentes necesarios.