# # 本地 link 部署包——开发者

## # 步骤 1 clone 代码

代码地址：https://gitee.com/osmapgis/WebClient-Vue、https://github.com/MapGIS/WebClient-Vue

    git clone https://gitee.com/osmapgis/WebClient-Vue.git

    或

    git clone https://github.com/MapGIS/WebClient-Vue.git

## # 步骤 2 link 前的准备

### # 1. 获取部署包

部署包的获取有两种途径：

#### # ① 我们直接提供部署包，解压后放到对应目录下（路径：/WebClient-Vue/ui/），如下图：

#### # ② 研发人员自行打包，下面为打包步骤：

    cd /WebClient-Vue/ui
    npm install
    npm run build

### # 2. 打开 /WebClient-Vue/ui/package.json 文件，按下面内容修改第 5-6 行（重点关注第 6 行“module”改为了“module1”），如下所示：

    5   "main": "dist-libs/webclient-vue-ui.umd.min.js",
    6   "module1": "src/index.js",

## # 步骤 3 在其他项目中 link

### # 1. 进入 ui 文件夹目录下，并 link 至全局

    cd /WebClient-Vue/ui

    npm link

### # 2. 进入其他项目（如云门户项目），并 link 本组件

    cd /需要引用ui组件的其他项目路径下

    npm link @mapgis/webclient-vue-ui

## # 步骤 4 引用方式（全局引用）

在其他项目中，采用全局引用的方式，下面为示例代码：

    import Vue from "vue";
    import App from "./App.vue";

    import "@mapgis/webclient-vue-ui/dist-libs/webclient-vue-ui.css";
    import MapgisUi from "@mapgis/webclient-vue-ui";

    Vue.config.productionTip = false;

    Vue.use(MapgisUi);

    new Vue({
      render: h => h(App)
    }).$mount("#app");

## # 注意事项

### # 1、由于 link 机制问题，其他项目（如云门户项目）在每次执行了 npm install 或 npm uninstall 后要重新执行下面命令，即重新 link 该组件。

    npm link @mapgis/webclient-vue-ui