component-template 业务组件模板

这是一个基于 CesiumJS 的前端三维 GIS 工具库，封装场景创建、实体标绘、空间测量、图层管理、相机控制等高频功能，支持模块化引入，兼容主流前端框架，提升三维地图项目开发效率。

项目结构

├── packages/                # 源码包目录
│   ├── components/          # 组件源码
│   │	└── index.ts           # 组件库入口文件
│   └── router/              # 路由配置
│       └── index.ts         # 路由定义文件
├── example/                 # 示例页面
│   └── button.vue           # Button 组件示例
├── build/                   # 构建输出目录
│   ├── bq-design.es.js      # ES 模块格式的构建文件
│   ├── bq-design.cjs.js     # CommonJS 格式的构建文件
│   └── index.css            # 样式文件
├── package.json             # 项目配置
├── vite.config.ts           # Vite 构建配置
└── tsconfig.json            # TypeScript 配置

开发流程

（1）创建组件文件夹

├── packages/                # 源码包目录
│   ├── components/          # 组件源码
│	│	├── button.vue           # 组件vue文件
│	│	└── index.ts             # 组件导出入口

示例：

<!-- Button.vue -->
<template>
  <div class="bq-button">
    <span>-测试按钮-6</span>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "BqButton",
});
</script>

<style scoped lang="less">
    .bq-button {
      background-color: red;
    }
</style>

<!-- index.ts -->
import Button from "./Button.vue";
import { withInstall } from "../../utils/tool";
export const BqButton = withInstall(Button);
export default BqButton;

（2）修改组件库入口

├── packages/                # 源码包目录
│   ├── components/          # 组件源码
│   │	└── index.ts         # 组件库入口文件

示例：

<!-- index.ts -->
export * from "./button";

（3）修改路由

├── packages/                # 源码包目录
│   ├── router/          	 # 路由配置
│   │	└── index.ts         # 路由定义文件

示例：

<!-- index.ts -->
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "button",
    component: () => import("../components/button/Button.vue"),
  },
];

（4）打包

修改NPM包名称和版本

<!-- package.json -->
"name": "component-template",
"version": "0.0.0",

修改打包后文件名称

<!-- vite.config.ts -->
{
    build: {
    lib: {
      fileName: (format) => `bq-design.${format}.js`,
    },
  },
}

打包

npm run build

（5）测试

├── packages/                # 源码包目录
├── example/                 # 示例页面
│   └── button.vue           # Button 组件示例

示例：

<template>
  <div>
    <BqButton></BqButton>
  </div>
</template>

<script setup>
import { BqButton } from "../build/bq-design.es.js";
import "../build/index.css";
</script>

<style lang="less" scoped></style>

（6）发布

npm publish --access public