mars-ui 的使用

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

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

2. 配置按需引入

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

import { createStyleImportPlugin, AndDesignVueResolve } from"vite-plugin-style-import"// 在vite的plugins 数组中添加createStyleImportPlugin({
  resolves: [AndDesignVueResolve()],
  libs: [
    {
      libraryName: "ant-design-vue",
      esModule: true,
      resolveStyle: (name) => {
        return`ant-design-vue/es/${name}/style/index`
      }
    }
  ]
})

// less 相关配置
{
  javascriptEnabled: true,
  additionalData: `@import "${path.resolve(__dirname, "src/components/mars-ui/base.less")}";`
}
复制代码

3. 加载mars-ui

importMarsUIInstallfrom"@mars/components/mars-ui"const app = createApp(Application)

MarsUIInstall(app, { // 这里可以传入一些默认的扩展配置，功能正在逐步支持 })复制代码

此时已经完成了所有的配置工作，可以开始使用mars-ui了。mars-ui包括两个部分 1. 组件。2. class

组件：

marsui的组件已经注册为全局组件，通过 mars-* 的方式直接在vue模板中使用，没有被mars-ui二次封装的antdv组件保持原有的使用方式，注册的组件列表可以参考 mars-ui/index.ts

class:

mars-ui提供的 通用的class，方便快速的给元素添加简单样式，具体可参考 mars-ui/function.less

定制主题：

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

样式冲突：

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