Mars3d-vue最简项目模板集成使用Mars3d的UI控件样板

备注说明：

1.小白可看步骤一二，进阶小白可直接看步骤三

步骤一：新建文件夹<uitest>，在mars3d仓库拉一份最简项目模板：

git clone mars3d-vue-template: Vue3.x 技术栈下的Mars3D项目模板

步骤二：运行>基于 Vue3.x + Vite 的最简项目模板，查看README.md文档说明：

npm i安装依赖，npm run dev运行

步骤三：安装相关依赖库

npm i --save ant-design-vue@4.x

npm i nprogress

npm i consola

npm i echarts

npm i vue-color-kit

npm i @icon-park/svg

npm i vite-plugin-style-import

npm i less

步骤四：继续在Mars3d仓库拉一份基础项目的代码，拿到<mars-ui>文件夹：

git clone mars3d-vue-project: 在Vue 3.x技术栈下的Mars3D平台 基础项目

相对路径：src\components\mars-ui

 

步骤五：拷贝目标文件夹<mars-ui>到（目标项目）最简项目模板的工程里面，保证目录一致

 

步骤六：配置<mars-ui>文件夹在main.ts目录中的引入

import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";

import "mars3d/dist/mars3d.css";

import "./components/mars-ui/common";

import MarsUIInstall from "./components/mars-ui";

import { createApp } from "vue";

import App from "./App.vue";

import "./style.css";

const app = createApp(App);

MarsUIInstall(app);

app.mount("#app");

步骤七：在<vite.config.ts>文件配置（按需配置）

import path from "path";

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";

import { mars3dPlugin } from "vite-plugin-mars3d";

import {

  createStyleImportPlugin,

  AndDesignVueResolve,

} from "vite-plugin-style-import";

// https://vitejs.dev/config/

export default defineConfig({

  css: {

    preprocessorOptions: {

      less: {

        javascriptEnabled: true,

        additionalData: `@import "${path.resolve(

          __dirname,

          "src/components/mars-ui/base.less"

        )}";`,

      },

    },

  },

  plugins: [

    vue(),

    mars3dPlugin(),

    createStyleImportPlugin({

      resolves: [AndDesignVueResolve()],

      libs: [

        {

          libraryName: "ant-design-vue",

          esModule: true,

          resolveStyle: (name) => {

            if (name === "auto-complete") {

              return `ant-design-vue/es/${name}/index`;

            }

            return `ant-design-vue/es/${name}/style/index`;

          },

        },

      ],

    }),

  ],

});

步骤八：在<App.vue>页面的template标签中使用marsui示例参考

  <mars-button>点击</mars-button>

最后，参考学习开发教程的步骤：Mars3D 三维可视化平台 | 火星科技 | 地图开发

ui示例参考：功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技