[Vue] Construir un entorno de desarrollo

 

Al aprender algo nuevo, primero debemos construir el entorno de desarrollo. Recientemente, quiero aprender la tecnología front-end. El entorno de desarrollo de Vue todavía es relativamente simple de configurar. Aquí hay un breve registro

 

Entorno de construcción

1. Herramientas de desarrollo

---

• VSCode
• VSCode plugin-vue (resaltado de sintaxis)

2. Entorno operativo

---

• Instalar Node.js
• Ver información de la versión nodo -v

3. Herramientas de gestión de paquetes.

---

 

• npm (fuente extranjera) se
  instala con node.js, ver información de la versión npm -v

• cnpm (fuente de Taobao)

NPM instalar -g CNPM --registry = https: // registry.npm.taobao.org

• Paquete de instalación

npm install -g @ vue / cli

 

• Desinstalar paquete

npm desinstalar vue-cli -g

 

4. herramientas de embalaje

---

 

• Instalar paquete web

npm install webpack -g

 

5. Instale vue-cli (andamios)

---

 

vue-cli 4.0+ se ha cambiado a @ vue / cli, si la versión anterior está instalada, desinstálela primero

• Instalar

npm install -g @ vue / cli

• Desinstale la versión anterior de vue-cli

npm desinstalar vue-cli -g

•  Ver información de la versión
  vue -V (tenga en cuenta que está en mayúscula)
• Para utilizar

1. Crea un proyecto: vue create projectName
2. Compilación y actualización en caliente:npm run serve
3. Compilar y comprimir: npm run build

 

Practica

Crear proyecto

---

 

cmd a la carpeta donde se va a crear el proyecto

1. Proyecto de creación de andamios

1.1. Creación de andamios  vue create my-project Nota: El nombre del proyecto no se puede poner en mayúscula
. 1.2. Seleccione la configuración (predeterminada / manual), selecciónela con las teclas arriba y abajo, y seleccione la predeterminada aquí
. 1.3. Seleccione la finalización y presione Entrar para esperar a que se complete la creación.
1.4 La creación generará un archivo con el mismo nombre de proyecto. Clip

 

2. Crear a través de la interfaz de usuario

ver ui

Se abrirá una página de creación, donde puede crear proyectos, comenzar a depurar, compilar y generar, etc. La interfaz de usuario es muy simple y no se introducirá.

 

Depuración y ejecución

---

cmd a la carpeta del proyecto (no la carpeta creada anteriormente, sino la carpeta del nombre del proyecto creada por scaffolding / ui), ejecute

npm ejecutar servir

 

Debe ubicar la carpeta correspondiente cada vez que la ejecute. Esto es más engorroso. Aquí hay algunos consejos para usarlo

Si es desarrollado por VSCode, ejecute directamente en el terminal

2. Ejecute a través de Powershell, abra la carpeta correspondiente, presione Mayús + botón derecho del mouse y luego elija abrir Powershell aquí

3. Agregue espacio cmd frente a la ruta de la carpeta para ubicar directamente la carpeta correspondiente

 

 

Compilar y generar

---

ejecución cmd

npm run build

Generar carpeta dist en el archivo del proyecto

 

Implementar archivos front-end

---

1. Publicar con un servidor en segundo plano (IIS, tomcat)

Copie el archivo de recursos generado en la carpeta de recursos estáticos del servidor de fondo, y el servidor de fondo establece la página de inicio

• Ventaja
  1. Simple, no es necesario implementar múltiples servidores
• Desventajas
  1. El personal de front-end necesita cooperar con el personal de back-end
  2. Después del lanzamiento, hay problemas de depuración o es necesario basarse en el servidor de fondo

2. Despliegue de front-end independiente

nginx actúa como un servidor web para recursos front-end y solicitudes inversas para servidores back-end

• Ventaja

1. Los extremos frontal y posterior se implementan por separado para facilitar la inspección de los documentos.
2. El personal de front-end y back-end reduce los costos de comunicación
3. Puede resolver problemas entre dominios en nginx, sin procesamiento en segundo plano del servidor

• Desventajas

1. Agregue complejidad, pero esto no es mucho en nginx

archivo de configuración nginx

    servidor { 
        escuchar        80 ; 
        nombre_servidor localhost; 

       
        ubicación / { 
            root F: \ Codes \ Vue \ my - project \ dist; 
            index index.html index.htm; 
        } 

        ubicación / api { 
            proxy_pass http: // 127.0.0.1:8080; 
        } 
}

 

Indique la fuente del reenvío: https://www.cnblogs.com/WilsonPan/p/12719082.html