Element+Vue+OpenLayers project actual combat

Actual project of WebGIS Element+Vue+OpenLayers

Use npm to configure the development environment

If the development is at the project level, you need to use npm to configure the development environment;
using npm to configure the development environment mainly includes the installation of Vue, Element, and OpenLayers.

Vue installation

Before installing Vue, you need to install node.js and vue-cli first. 1. Install node.js
Download node from the node.js official website, it is recommended to download the LTS version (long-term stable version), as shown in Figure 1-1.
insert image description here

Figure 1-1 Download node Vue from the official website of node.js.
The installation process of node Vue is very simple, just click the "Next" button all the time. After the installation is complete, execute the command in the command line window:
insert image description here

You can view the version of node. If the corresponding version number is displayed in the command line window, it means that the node installation is successful. insert image description here

npm

It is the package manager of node, which is integrated in node. After installing node, there will be npm. Execute the command directly in the command line window:
you can see the version number of npm insert image description here
So far, the development environment of node has been installed, and npm is also available. Because some npm resources are blocked or abroad, it often causes npm to fail to install dependent packages, so the domestic mirror of npm—cnpm is also needed.
Execute the command in the command line window: insert image description here

If no error is reported, the cnpm installation is successful. Execute the command in the command line window:
You can view the version number of cnpm, as shown in Figure 1-4. insert image description here
After successfully installing cnpm, you can use cnpm to install dependent packages. If you want to know more about cnpm, you can check the official website of TAONPM. In the following installation, if the installation speed is too slow, you can change npm to cnpm.

Install the vue-cli scaffolding build tool

Execute the command in the command line window: insert image description here

If the version number is displayed in the command line window, as shown in Figure 1-5, it means that vue-cli is installed successfully. Note that the V in the above command is capitalized.
insert image description here

Figure 1-5 shows the version number of Vue in the command line window
The 2.X version of vue-cli can only use the command line window to create projects. First press shift+right mouse button at the place where the project will be created, and select the "Open command line window here" option in the pop-up right-click menu; then execute the command in the command line window: insert image description here

firstApp is the name of the folder to be created; finally set the project in the command line window according to your needs.
The 3.X version of vue-cli can use the visual page to create projects, execute the command in the command line window: insert image description here
to open the visual page, as shown in Figure 1-6. Create a project using the visualization page, as shown in Figure 1-7.

Figure 1-6 The command to open the visualization page
insert image description here

Figure 1-7 Create a project using a visual page
The 3.X version of vue-cli can also use the command line window to create a project, but you need to install a bridge tool to execute the command in the command line window: insert image description here

can

Install bridge tool

. After the bridge tool is successfully installed, execute the command in the command line window: insert image description here

The project is now created.
The successfully created project directory structure is shown in Figure 1-8. insert image description here
In Figure 1-8, the folder node_modules saves the project's dependency package file, package.json is the configuration file of the project's dependency package, and the value (value) corresponding to the "dependencies" key (key) in this file is the project The imported external library files are shown in Figure 1-9. insert image description here

Figure 1-9 External library files imported by the project
After the project is successfully created, you can open the command line window in the editor terminal or the project root directory and execute the command: insert image description here

Come

run project

. After the project runs successfully, there will be an IP address. Enter this IP in the browser to open the created project. The initialization page when opening the project is shown in Figure 1-10. insert image description here

Figure 1-10 The initialization page when opening the project
It should be noted that the vue-cli scaffolding tool must be installed globally. Global installation means that Vue can be accessed anywhere on the computer, and local installation can only access Vue in a local location. Use "-g" in the command line window to indicate global installation. If the global installation is adopted, but Vue cannot be accessed anywhere, then adding "D:\nodejs\node-globalnpm" (according to the installation location of your own node) to the system environment variable can solve the problem.