基于vue3的marsgis通用UI库 mars-ui 的使用

mars-ui是火星科技针对gis应用场景定制的一套ui框架，其中基础组件是在antdv的基础之上做的二次封装。使用方式和参数与antdv基本一致。marsui除了在火星科技的项目中使用之外，也可以单独应用于其他基于vue3.0的项目，只需要将源码拷贝到自己的项目中然后做一些简单的配置即可。下面以vite+vue3.0项目为例，对mars-ui的使用和配置进行说明。此篇部分内容参考文章：CSDN博主「泽安2018」

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

按需引入

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

cnpm install vite-plugin-style-import@2.0.0 --save-dev

//然后在vite.config.ts中配置
import {createStyleImportPlugin, AndDesignVueResolve} from "vite-plugin-style-import";

// 在vite的plugins 数组中添加


    vitePluginMars3d(),
    createStyleImportPlugin({
      resolves: [AndDesignVueResolve()],
      libs: [
        {
          libraryName: "vant",
          esModule: true,
          resolveStyle: (name) => `../es/${name}/style`,
        },
      ],
    }),

// less 相关配置，在defineConfig的css对象的preprocessorOptions对象中添加
{
  javascriptEnabled: true,
  additionalData: `@import "${path.resolve(__dirname, "src/components/mars-ui/base.less")}";`
}

加载Mars-UI

import MarsUIInstall from "./components/mars-ui";
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);
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的所有样式都需要在 .mar-main-view元素中才会生效。

遇到的问题

使用 vite-plugin-style-import需引入 vant 样式文件，出现 Error: Cannot find module ‘consola‘

因为插件的使用了 consola 包，但是没有安装。所以需要安装 consola

cnpm install consola@2.15.3 --save-dev

报错， Failed to resolve import "@/components/mars-ui" from "src\main.ts". Does the file exist? Plugin: vite:import-analysis

最简单的解决：把@改为./

Cannot find module 'ant-design-vue' 17:55:16
Require stack:

解决：需安装cnpm install ant-design-vue --save

ERROR The following dependencies are imported but could not be resolved:

没有安装以上这些插件解决：安装即可

 cnpm install nprogress --save
 cnpm install echarts  --save
 cnpm install vue-color-kit --save 
 cnpm install @icon-park/svg --save

10:31:54 [vite] Internal server error: .mars-msg-bg is undefined 10:31:54
Plugin: vite:css

这里报错是因为我暂时把上文按需引入less的配置暂时注释掉了 ，重新放开就可以了

less: {
        javascriptEnabled: true,
        additionalData: `@import "${path.resolve(
          __dirname,
          "src/components/mars-ui/base.less"
        )}";`,
      },

error when starting dev server: 10:35:37
ReferenceError: path is not defined

这里是我没有引入path的路径

import path from "path";

Mars3d试水--vite（三）

基于vue3的marsgis通用UI库 mars-ui 的使用