vue3.2封装cesium自定义组件发布到私仓--（二）Vue自定义组件并打包(以cesium组件为例)

1. 使用cli快速创建vue项目（vue3要求cli4.5以上）

vue create 项目名称 创建一个基础的vue3项目，创建成功后npm run serve启动能正常访问就可以了;这里指定版本，执行npm i vue@3.2.8将vue版本更新到3.2.8

1. vue3导入cesium

cmd窗口到新建的项目目录，执行vue add vue-cli-plugin-cesium，执行过程中根据提示选择会自动配置安装cesium；参考（https://blog.csdn.net/Apple_Coco/article/details/118415169?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-1-118415169.pc_agg_new_rank&utm_term=vue3+%E6%95%B4%E5%90%88cesium&spm=1000.2123.3001.4430），此时调用自动生成的CesiumExample组件能正确加载地图

1. 改造项目目录

将原来的src目录名称修改为examples;

在项目根目录新增文件夹packages;

新增vue.config.js(如果有就修改),添加如下配置，将文件入口修改到examples并将packages加入构建:

module.exports = {

  // 修改 src 为 examples

  pages: {

    index: {

      entry: "examples/main.js",

      template: "public/index.html",

      filename: "index.html",

    },

  },

  // 扩展 webpack 配置，使 packages 加入编译

  chainWebpack: (config) => {

    config.module

      .rule("js")

      .include.add("/packages/")

      .end()

      .use("babel")

      .loader("babel-loader")

      .tap((options) => {

        // 修改它的选项...

        return options;

      });

  },

};

在packages目录下新增自定组件目录vue-cesium,新增组件目录统一添加src文件夹和index.js文件，packages目录新增index.js出口文件；目录结构应该为：

--packages

----vue-cesium

------vue-cesium.vue

----index.js

--index.js

1. 编写组件代码

注意：这里vue3定义组件名称属性需要写两个script

<template>

  <div class="map-box">

    <div id="cesiumContainer"></div>

  </div>

</template>

<script>

import { onMounted, defineExpose } from "vue";

export default {

  name: "vue-cesium",

};

</script> 

<script setup>

const showTest = () => {

  alert("测试测试测试呢");

};

onMounted(() => {

  // eslint-disable-next-line no-undef

  var viewer = new Cesium.Viewer("cesiumContainer");

  // eslint-disable-next-line no-console

  console.log(viewer);

});

defineExpose({

  showTest,

});

</script>

<style lang="scss" scoped>

.map-box {

  width: 100%;

  height: 100%;

}

#cesiumContainer {

  width: 100%;

  height: 100%;

}

</style>

在组件index.js页面写export函数

import vueCesium from "./src/vue-cesium.vue";

// 为组件提供 install 安装方法，供按需引入

vueCesium.install = function (Vue) {

  Vue.component(vueCesium.name, vueCesium);

};

// 默认导出组件

export default vueCesium;

在packages/index.js写总的导出函数

import vueCesium from "./vue-cesium";

// 存储组件列表

const components = [vueCesium];

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册

const install = function (Vue) {

  // 判断是否安装

  if (install.installed) return;

  // 遍历注册全局组件

  components.forEach((component) => {

    Vue.component(component.name, component);

  });

};

// 判断是否是直接引入文件

if (typeof window !== "undefined" && window.Vue) {

  install(window.Vue);

}

export default {

  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装

  install,

  // 以下是具体的组件列表

  vueCesium,

};

1. 在package.json文件添加打包命令，添加打包信息，执行并打包

打包脚本："lib": "vue-cli-service build --target lib --name vuecesium --dest lib packages/index.js"

修改后完整package.json如下：

{

  "name": "vue-cesium",

  "version": "0.1.2",

  "private": false,

  "description": "自定义封装的map组件",

  "main": "lib/vuecesium.umd.min.js",

  "keywords": [

    "huicai map gis"

  ],

  "author": "linquan",

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint",

    "lib": "vue-cli-service build --target lib --name vuecesium --dest lib packages/index.js"

  },

  "dependencies": {

    "cesium": "*",

    "core-js": "^3.6.5",

    "vue": "^3.2.8"

  },

  "devDependencies": {

    "@vue/cli-plugin-babel": "~4.5.14",

    "@vue/cli-plugin-eslint": "~4.5.14",

    "@vue/cli-service": "~4.5.14",

    "@vue/compiler-sfc": "^3.0.0",

    "babel-eslint": "^10.1.0",

    "eslint": "^6.7.2",

    "eslint-plugin-vue": "^7.0.0",

    "sass": "^1.26.5",

    "sass-loader": "^8.0.2",

    "vue-cli-plugin-cesium": "~1.1.7"

  },

  "eslintConfig": {

    "root": true,

    "env": {

      "node": true

    },

    "extends": [

      "plugin:vue/vue3-essential",

      "eslint:recommended"

    ],

    "parserOptions": {

      "parser": "babel-eslint"

    },

    "rules": {}

  },

  "browserslist": [

    "> 1%",

    "last 2 versions",

    "not dead"

  ]

}

执行 yarn lib 或者 npm run lib 打包；

1. 将生成的lib包发布到npm私仓

在项目更目录新建.npmignore忽略文件，只用上传lib包和package.json文件就好了

.npmignore文件内容：

# 忽略目录

examples/

packages/

public/

 

# 忽略指定文件

vue.config.js

babel.config.js

*.map

访问刚刚搭建的nexus服务，找到新建的私仓复制仓库地址

在项目目录下修改本地registry地址为私仓地址，并登录上传组件；

npm config set registry 私仓地址

npm login

输入用户名密码邮箱

登录后 npm publish

显示推送成功后，在nexus服务中对应私仓中可以找到刚刚推送的组件

拉取使用发布的组件

1.设置本地镜像地址为私仓地址

npm config set registry 私仓地址

1. 拉取组件

npm insall vue-cesium

1. main.js中全局引用vue-cesium组件

注意:cesium要手动引一下样式文件

import hmap from "vue-cesium";

import "vue-cesium/lib/Widgets/widgets.css";

createApp(App).use(hmap).mount("#app");

1. 将vue-cesium下lib包内的Assets、ThirdParty、Widgets、Workers目录复制到当前项目的public目录下(这个事cesium组件需要做的，别的组件不需要这么做)
2. 在别的页面使用组件示例：

<template>

  <div>

    <vue-cesium ref="mapRef"></vue-cesium>

  </div>

</template>

<script setup>

import { ref, onMounted } from "vue";

const mapRef = ref(null);

onMounted(() => {

  console.log(mapRef.value);

  mapRef.value.showTest();

});

</script>

<style lang="scss" scoped>

</style>