使用Mars3d相关UI库-MarsUI

写练习项目的时候用到了Mars3d，想用官网案例中的UI得是配套使用 这里可以参考该文章：Mars3d-vue最简项目模板集成使用Mars3d的UI控件样板-CSDN博客

1、拉取一个Mars3d的项目

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

然后运行该项目，将该项目中的拷贝到需要项目中，路径要一致，不能改变。

2、安装下载相对应的依赖库

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

npm i vite-plugin-style-import
    
npm i @icon-park/svg
    
npm i vue-color-kit


npm i less 

3、配置文件夹在main.ts目录中的引入

    //mars-ui
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"
import "mars3d/dist/mars3d.css"
import "./components/mars-ui/common"
import MarsUIInstall from "./components/mars-ui"

const app = createApp(App)


MarsUIInstall(app)
useModules(app) // register package modules

app.mount('#app')

4、在<vite.config.ts>文件配置

import { resolve } from 'path'
import { ConfigEnv, UserConfigExport } from 'vite'
import { serverOptions, generatePlugins } from './build'
import { mars3dPlugin } from 'vite-plugin-mars3d';
import { createStyleImportPlugin, AndDesignVueResolve } from "vite-plugin-style-import";

//引入依赖
import path from "path";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

const currentTimestamp = new Date().getTime()
const nodeModulesFileName = `vendor_${currentTimestamp}`

export default ({ mode, command }: ConfigEnv): UserConfigExport => ({
  base: './',
  // Development server config
  server: serverOptions,
  resolve: {
    // Alias config
    alias: {
      '~': resolve(__dirname, 'src/'),
    },
  },
  css:{
    preprocessorOptions:{
      less:{
        javascriptEnabled: true,

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

          __dirname,

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

        )}";`,
      }
    }
  },
  //配置dataV
  optimizeDeps: {
    include: [
      "@jiaminghi/c-render",
      "@jiaminghi/c-render/lib/plugin/util",
      "@jiaminghi/charts/lib/util/index",
      "@jiaminghi/charts/lib/util",
      "@jiaminghi/charts/lib/extend/index",
      "@jiaminghi/charts",
      "@jiaminghi/color",
    ]
  },
  // Plugins config
  plugins: [
    generatePlugins(command, mode),
    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`
          }
        }
      ]
    }),
    mars3dPlugin(),
    //启用插件
    createSvgIconsPlugin({
      // 指定图标文件夹，绝对路径（NODE代码）
      iconDirs: [path.resolve(process.cwd(), "src/svgs")],
    }),
  ],
  // Build config
  build: {
    rollupOptions: {
      // Vite < 2.9.0 does not automatically split vendor chunks when using the build command.
      // Reference: https://cn.vitejs.dev/guide/build.html#chunking-strategy
      output: {
        // https://www.rollupjs.com/guide/big-list-of-options#outputmanualchunks
        // 将 node_modules 中的模块打包到自定义 vendor chunk 中，利用浏览器缓存机制，加快页面加载速度
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            return nodeModulesFileName
          }
        },
      },
    },
    commonjsOptions: {
      include: [
        /node_modules/,
      ]
    }
  },
})