Skip to main content

Step 1. VUE project construction

Prerequisites​

operating environment

Before starting, please make sure you have completed Runtime Environment Installation and Node.js version >=18.

Steps​

1. Install create-vue​

  • Open command prompt

    • Method 1: Shortcut key win+r, enter cmd in the pop-up box, and click OK.

      show

    • Method 2: Search cmd in the lower left corner of the screen and click to open it.

      show

  • Run the following command to install create-vue globally

    npm install -g @vue/cli
    Attention

    If you have previously installed the Vue CLI, the create-vue command is already available.

2. Create a new project​

  • Open the file path where you want to create a new project, enter cmd in the path bar, and click Enter.

    show

  • Use the following command to create a new project. This command will create a new directory named mapmost-vue-project and initialize the project structure using Vue’s template.

    npm init vue@latest mapmost-vue-project
    show
Attention

During the process of creating a project, create-vue will provide a series of configuration options that can be selected according to your project needs.

3. Open the project​

  • Open VS Code

  • Drag the mapmost-vue-project folder directly or open the folder in the upper left corner.

    show

4. Install dependencies​

  • In the terminal, enter the following command to install the project dependencies.

    npm install
    show

5. Start the project​

  • In the terminal, enter the following command to start the project, and the project initial page will appear.

    npm run dev
    showshow

6. Install SDK​

  • Add .npmrc file and configure the following content.

    registry = "https://registry.npmjs.org/"
    @mapmost:registry="https://npm.mapmost.com/"
    show

  • In the terminal, enter the following command to install the SDK.

    npm install @mapmost/mapmost-webgl
    show
Attention

If the installation fails and an ETIMEDOUT or ECONNREFUSED error is displayed, you can change the .npmrc file to the following:

registry  = "https://registry.npmmirror.com/"
@mapmost:registry="https://npm.mapmost.com/"

7. Introduce SDK​

-Introduce SDK in src->main.js.

import mapmost from '@mapmost/mapmost-webgl';
window.mapmost = mapmost;

8. Develop applications​

  • Now we can start developing the Vue application in the src directory. We can add components, pages, and static resources and organize our code using Vue’s single-file components (.vue files).