如果使用marsgis+vue的相关产品，mars-ui的使用一定需要了解，mars-ui是火星科技针对gis应用场景定制的一套ui框架，其中基础组件是在antdv的基础之上做的二次封装。使用方式和参数与antdv基本一致。marsui除了在火星科技的项目中使用之外，也可以单独应用于其他基于vue3.0的项目，只需要将源码拷贝到自己的项目中然后做一些简单的配置即可。下面以vite+vue3.0项目为例，对mars-ui的使用和配置进行说明

    1. 复制mars-ui到项目的components文件夹下

    image.png

    1. 配置按需引入

    按需引入有多种方式，这里使用vite-plugin-style-import，（如果是webpack的项目可以使用 babel-import-plugin）

    1. import { createStyleImportPlugin, AndDesignVueResolve } from "vite-plugin-style-import"
    3. // 在vite的plugins 数组中添加
    4. createStyleImportPlugin({
    5.   resolves: [AndDesignVueResolve()],
    6.   libs: [
    7.     {
    8.       libraryName: "ant-design-vue",
    9.       esModule: true,
    10.       resolveStyle: (name) => {
    11.         return `ant-design-vue/es/${name}/style/index`
    12.       }
    13.     }
    14.   ]
    15. })
    17. // less 相关配置
    18. {
    19.   javascriptEnabled: true,
    20.   additionalData: `@import "${path.resolve(__dirname, "src/components/mars-ui/base.less")}";`
    21. }
    1. 加载mars-ui ```javascript import MarsUIInstall from “@mars/components/mars-ui”

    const app = createApp(Application)

    MarsUIInstall(app, { // 这里可以传入一些默认的扩展配置，功能正在逐步支持 }) `` 此时已经完成了所有的配置工作，可以开始使用mars-ui了。mars-ui包括两个部分 1. 组件。2. class<br />**组件：**<br />marsui的组件已经注册为全局组件，通过 mars-* 的方式直接在vue模板中使用，没有被mars-ui二次封装的antdv组件保持原有的使用方式，注册的组件列表可以参考mars-ui/index.ts<br />**class:**<br />mars-ui提供的 通用的class，方便快速的给元素添加简单样式，具体可参考mars-ui/function.less`

    定制主题：
    在mars-ui/base.less中定义了less变量，支持根据具体情况修改对应的全局样式

    样式冲突：
    为了防止与外部样式冲突，mars-ui的所有样式都需要在 .mars-main-view元素中才会生效