跳到主要内容
版本：9.4.1

步骤一、VUE工程搭建

先决条件​

运行环境

开始前，请确保已完成运行环境安装，Node.js版本>=18。

步骤​

1、安装 create-vue​

  • 打开命令提示符

    • 方式一：快捷键 win+r ，在弹出框中输入 cmd，点击确定。

      show

    • 方式二：屏幕左下角搜索 cmd，点击打开。

      show

  • 运行以下命令来全局安装 create-vue

    npm install -g @vue/cli
    注意

    如果你之前已经安装了 Vue CLI，那么 create-vue 命令已经可用。

2、创建一个新项目​

  • 打开你想要创建新项目的文件路径，在路径栏中输入 cmd，点击回车。

    show

  • 使用以下命令创建一个新项目，这个命令会创建一个名为mapmost-vue-project的新目录，并使用Vue的模板初始化项目结构。

    npm init vue@latest mapmost-vue-project
    show
注意

在创建项目的过程中，create-vue 会提供一系列的配置选项，可以根据你的项目需求进行选择。

3、打开项目​

  • 打开 VS Code

  • 将mapmost-vue-project文件夹直接拖进去或者左上角文件打开该文件夹。

    show

4、安装依赖​

  • 在终端，输入以下命令安装项目依赖。

    npm install
    show

5、启动项目​

  • 在终端，输入以下命令启动项目，会出现项目初始页面。

    npm run dev
    showshow

6、安装SDK​

  • 添加.npmrc文件，配置以下内容。

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

  • 在终端，输入以下命令安装SDK。

    npm install @mapmost/mapmost-webgl
    show
注意

若安装失败，显示 ETIMEDOUT 或者 ECONNREFUSED 错误，可将.npmrc文件改成以下内容：

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

7、引入SDK​

  • 在 src->main.js 中引入SDK。

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

8、开发应用​

  • 现在我们就可以开始在 src 目录下开发 Vue 应用了。我们可以添加组件、页面和静态资源，并使用 Vue 的单文件组件（.vue 文件）来组织代码。