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.youkuaiyun.com/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>