Proyecto actual de WebGIS Element+Vue+OpenLayers
Utilice npm para configurar el entorno de desarrollo
Si el desarrollo es a nivel de proyecto, debe usar npm para configurar el entorno de desarrollo;
el uso de npm para configurar el entorno de desarrollo incluye principalmente la instalación de Vue, Element y OpenLayers.
instalación de vue
Antes de instalar Vue, primero debe instalar node.js y vue-cli. 1. Instale node.js
Descargue el nodo del sitio web oficial de node.js, se recomienda descargar la versión LTS (versión estable a largo plazo), como se muestra en la Figura 1-1.
Figura 1-1 Descargue node Vue del sitio web oficial de node.js
El proceso de instalación de node Vue es muy simple, simplemente haga clic en el botón "Siguiente" todo el tiempo. Una vez completada la instalación, ejecute el comando en la ventana de la línea de comandos:
Puede ver la versión del nodo. Si el número de versión correspondiente se muestra en la ventana de la línea de comandos, significa que la instalación del nodo se realizó correctamente.
npm
Es el administrador de paquetes del nodo, que está integrado en el nodo.Después de instalar el nodo, habrá npm. Ejecute el comando directamente en la ventana de la línea de comandos:
puede ver el número de versión de npm 
Hasta ahora, se ha instalado el entorno de desarrollo de node y npm también está disponible. Debido a que algunos recursos de npm están bloqueados o en el extranjero, a menudo hace que npm no pueda instalar los paquetes dependientes, por lo que también se necesita el espejo doméstico de npm—cnpm.
Ejecute el comando en la ventana de la línea de comandos:
Si no se informa ningún error, la instalación de cnpm es exitosa. Ejecute el comando en la ventana de la línea de comandos:
Puede ver el número de versión de cnpm, como se muestra en la Figura 1-4. 
Después de instalar con éxito cnpm, puede usar cnpm para instalar paquetes dependientes. Si quieres saber más sobre cnpm, puedes consultar el sitio web oficial de TAONPM. En la siguiente instalación, si la velocidad de instalación es demasiado lenta, puede cambiar npm a cnpm.
Instale la herramienta de construcción de andamios vue-cli
Ejecute el comando en la ventana de la línea de comandos:
Si el número de versión se muestra en la ventana de la línea de comandos, como se muestra en la Figura 1-5, significa que vue-cli se instaló correctamente. Tenga en cuenta que la V en el comando anterior está en mayúscula.
La Figura 1-5 muestra el número de versión de Vue en la ventana de la línea de comandos.
La versión 2.X de vue-cli solo puede usar la ventana de la línea de comandos para crear proyectos. Primero presione shift+botón derecho del mouse en el lugar donde se creará el proyecto, y seleccione la opción "Abrir ventana de línea de comando aquí" en el menú contextual emergente; luego ejecute el comando en la ventana de línea de comando:
firstApp es el nombre de la carpeta que se creará; finalmente configure el proyecto en la ventana de la línea de comandos según sus necesidades.
La versión 3.X de vue-cli puede usar la página visual para crear proyectos, ejecute el comando en la ventana de la línea de comandos: 
para abrir la página visual, como se muestra en la Figura 1-6. Cree un proyecto usando la página de visualización, como se muestra en la Figura 1-7.
Figura 1-6 El comando para abrir la página de visualización
Figura 1-7 Crear un proyecto usando una página visual
La versión 3.X de vue-cli también puede usar la ventana de la línea de comandos para crear un proyecto, pero necesita instalar una herramienta puente para ejecutar el comando en la ventana de la línea de comandos:
poder
Instale la herramienta puente
. Una vez que la herramienta de puente se haya instalado correctamente, ejecute el comando en la ventana de la línea de comandos:
El proyecto ya está creado.
La estructura de directorios del proyecto creada con éxito se muestra en la Figura 1-8. 
En la Figura 1-8, la carpeta node_modules guarda el archivo del paquete de dependencias del proyecto, package.json es el archivo de configuración del paquete de dependencias del proyecto, y el valor (value) correspondiente a la clave (key) de "dependencias" en este archivo es el proyecto Los archivos de la biblioteca externa importados se muestran en la Figura 1-9.
Figura 1-9 Archivos de biblioteca externa importados por el proyecto
Una vez que el proyecto se haya creado correctamente, puede abrir la ventana de la línea de comandos en la terminal del editor o en el directorio raíz del proyecto y ejecutar el comando:
Venir
ejecutar proyecto
. Después de que el proyecto se ejecute con éxito, habrá una dirección IP. Ingrese esta IP en el navegador para abrir el proyecto creado. La página de inicialización al abrir el proyecto se muestra en la Figura 1-10.
Figura 1-10 La página de inicialización al abrir el proyecto
Cabe señalar que la herramienta de andamiaje vue-cli debe instalarse globalmente. La instalación global significa que se puede acceder a Vue desde cualquier lugar de la computadora, y la instalación local solo puede acceder a Vue en una ubicación local. Use "-g" en la ventana de la línea de comando para indicar la instalación global. Si se adopta la instalación global, pero no se puede acceder a Vue desde ningún lugar, agregar "D:\nodejs\node-globalnpm" (según la ubicación de instalación de su propio nodo) a la variable de entorno del sistema puede resolver el problema.