Use andamios de paquete web para crear un proyecto vue

Use andamios de paquete web para crear un proyecto vue

Introducción

Hay muchas formas de crear un proyecto vue. Aquí solo presentamos el uso de andamios webpack para crear un proyecto vue. A continuación, se creará una película como proyecto de ejemplo.

Preparación preambiental

Paso 1: Instale npm y node
. Descargue la versión de npm correspondiente y la versión de nodo de la máquina desde el sitio web oficial. No lo introduciré aquí. Una vez completada la instalación, compruebe si la instalación se ha realizado correctamente.
Método de inspección: abra el programa de línea de comando de control- "cmd, ingrese el nodo -v y npm -v para verificar sus números de versión, si lo hay, la instalación es exitosa. Como se muestra en la siguiente figura,
La imagen de arriba muestra que la instalación se realizó correctamente
si el npm que viene con node no es la última versión, puede usar el comando
npm install -g npm
para que npm sea la última versión (-g significa instalación global)

Empezar a crear proyecto

Paso 2: Inicialice el proyecto de la película
1. Paso 1: Instale vue-cli
npm install vue-cli -g // Instale vue-cli globalmente

El resultado de la instalación es como se muestra en la siguiente figura.
Inserte la descripción de la imagen aquí
Verifique si la instalación de vue-cli es exitosa, no puede verificar vue-cli, solo puede verificar vue

Inserte la descripción de la imagen aquí
Paso 3: crea el proyecto

Seleccione la ruta y cree un nuevo proyecto vue. Aquí he tomado el proyecto de la película como ejemplo. Primero use cd "ruta" para ingresar al directorio correspondiente. En este ejemplo,
Inserte la descripción de la imagen aquí
use el comando para crear un nuevo proyecto y establecer el nombre del proyecto y otra información.
vue init webpack "movie"
Inserte la descripción de la imagen aquí
Paso 4: Ejecuta el proyecto

Ahora que se ha creado el proyecto de la película, use el comando para ingresar al directorio raíz del proyecto
cd movie para
Inserte la descripción de la imagen aquí
ingresar al directorio del proyecto, instale las dependencias antes de ejecutarlo, use el comando, este paso se opera en el directorio de la película. ! !

npm install

npm ejecutar dev

Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Hasta ahora, se ha creado el proyecto cinematográfico de vue. A continuación, consulte la interfaz inicial del proyecto de la película.
Inserte la descripción de la imagen aquí
Utilice vue-cli para inicializar y compilar el proyecto vue. Obtendremos una estructura de archivo, como se muestra en la siguiente figura:
Inserte la descripción de la imagen aquí
donde src es lo que escribimos y contiene los siguientes archivos.
Inserte la descripción de la imagen aquí
¡Ahora puedes codificar códigos felizmente! Si es útil para usted, por favor comente 1, gracias por navegar

Ejemplo

¡Puedes venir a mi github para explorar los siguientes proyectos vue e ir de inmediato! ! !

https://github.com/hzequn/vuemusic

comunicarse con

Si tiene alguna pregunta, comuníquese conmigo, intercambiaremos y aprenderemos juntos.

WeChat: huang009516

Supongo que te gusta

Origin blog.csdn.net/Smell_rookie/article/details/91334847
Recomendado
Clasificación