Enseñarle cómo usar Vue-cli para crear un proceso de proyecto Vue

1. Verifique la versión actual de Vue

Ingrese el siguiente comando para verificar la versión de Vue-cli actualmente instalada:

Si le indica que vue no es un comando interno, ingrese

npm install -g @vue/cli

Nota: V debe estar en mayúscula al verificar la versión de vue-cli

2. Cree un proyecto usando la línea de comando

Primero creemos una carpeta, D:\project\vue-demo vue-demo es la carpeta que creamos, ingresamos al directorio raíz y ejecutamos cmd

1. Ingrese el comando de creación

vue create my-demo

Como se muestra abajo:

Después de ingresar el comando, presione Entrar directamente y algunos aparecerán como se muestra a continuación

Decir que su conexión al registro pnpm predeterminado parece ser lenta.

¿Utiliza https://registry.npmmirror.com para instalar rápidamente? También podemos elegir Y

Después de ingresar Y, aparecerá la siguiente imagen,

y luego se le pedirá que elija si desea usar el valor predeterminado (predeterminado) para elegir instalar vue3 o vue2, y elija según sus propias necesidades. Instalaré vue3 de forma predeterminada aquí, o manualmente (Manualmente).

1. Primero elegimos la instalación predeterminada de la siguiente manera:

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)

> Use PNPM
  Use NPM

Elija el administrador de paquetes para usar al instalar dependencias
Seleccione el administrador de paquetes para usar al instalar dependencias

Instalemos pnpm, así que no explicaré la diferencia entre pnpm y npm aquí. Si no sabes cómo hacerlo, puedes ir a Baidu para comprobarlo.

2. Primero elegimos la instalación manual de la siguiente manera:

Nota: Utilice las teclas de flecha arriba y abajo del teclado para seleccionar arriba y abajo, la barra espaciadora es para seleccionar o cancelar y a es para seleccionar todo

Primero, déjame explicarte qué significa cada opción.

1. TypeScript: admite codificación en TypeScript.
2. Compatibilidad con aplicaciones web progresivas (PWA): compatibilidad con PWA.
3. Enrutador: admite vue-router.
4. Vuex: admite la gestión del estado de Vuex.
5. Preprocesadores CSS: soporte para preprocesadores CSS.
6. Linter/Formatter: admite la verificación y el formateo del estilo del código.
7. Pruebas unitarias: admite pruebas unitarias.
8. Pruebas E2E: admite pruebas E2E.

Elija la opción que queremos instalar según las necesidades de nuestro proyecto,

luego de elegir presione Enter directamente para ingresar a la interfaz de selección:

Elija una versión de Vue.js con la que desee iniciar el proyecto

Aquí elijo 3.x
y luego presiono Enter directamente para ingresar a la interfaz de selección de configuración de enrutamiento.

Nota: Y significa usar el modo historial, N significa usar el modo hash (es decir, la dirección URL contiene

Después de seleccionar, continúe presionando Enter y luego seleccione Preprocesador CSS, aquí seleccione Modo menos:

continúe presionando Enter, seleccione la configuración estándar como inspección de código

Continúe presionando Enter, verifique la verificación de estilo cuando elija guardar:

continúe presionando Enter , seleccione el método de enrutamiento (y o n seleccione y) y seleccione In package.json

para continuar presionando Enter, y finalmente pregunte si desea guardar esta configuración como un ajuste preestablecido para proyectos futuros, puede elegir sí, podemos presionar Enter de forma predeterminada, y

finalmente vea la imagen a continuación, significa que nuestra configuración se creó correctamente:

3. Se crean ambos modos, iniciamos el servicio.

pnpm run serve

Comience con éxito como se muestra en la siguiente figura

Ingrese http://localhost:8080/ en el navegador y aparecerá la siguiente página, indicando que nuestro proyecto se ha iniciado exitosamente

Hasta ahora, se ha creado un proyecto vue mediante selección de línea de comando y operaciones de comando.