Vue3项目引入Mars3D（vite 技术栈）

目录

一、创建vue3+vite+ts的项目

1、执行下面命令，进行项目的创建

2、项目创建后，进行相关依赖的安装 

2.1 执行下面命令，进入项目文件下

2.2 执行下面命令，进行依赖的安装 

 2.3 执行下面命令，运行整个项目

2.4 运行结果如下所示 

二、引入相关依赖

1、依次执行下面命令，引入Mars3D和项目所需的依赖

2、在package.json文件中输入下图红框中的两个Mars3D的依赖 ，执行安装命令进行安装

三、文件配置

1、 配置vite.config.ts文件

 2、删除components文件夹下的HelloWorld.vue文件

3、在components文件夹下再建一个component文件夹，在该文件夹下新建一个index.vue文件

 4、修改App.vue文件

 5、运行下面命令，前端出现地球，表明成功在Vue项目中引入Mars3D

---

项目背景：笔者采用Vue3引入Mars3D后，再调用GeoServer离线发布的图层。

一、创建vue3+vite+ts的项目

1、执行下面命令，进行项目的创建

npm init vite mars

2、项目创建后，进行相关依赖的安装 

2.1 执行下面命令，进入项目文件下

 cd .\mar\

2.2 执行下面命令，进行依赖的安装 

 npm install

 2.3 执行下面命令，运行整个项目

 npm run dev

2.4 运行结果如下所示 

二、引入相关依赖

1、依次执行下面命令，引入Mars3D和项目所需的依赖

 npm install vite-plugin-mars3d --save-dev

npm install @vitejs/plugin-vue-jsx

npm install @vitejs/plugin-vue

2、在package.json文件中输入下图红框中的两个Mars3D的依赖 ，执行安装命令进行安装

npm install

三、文件配置

1、 配置vite.config.ts文件

// import { defineConfig } from 'vite'
// import vue from '@vitejs/plugin-vue'
// import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),mars3dPlugin(),vueJsx(),],
})

 2、删除components文件夹下的HelloWorld.vue文件

3、在components文件夹下再建一个component文件夹，在该文件夹下新建一个index.vue文件

文件中代码如下：

<template>
    <div>
    <div id="mars3dContainer" class="mars3d-container"></div>
  </div>
  </template>
  
  <script lang="ts" setup>
  import { onMounted,reactive } from "vue";
  import * as mars3d from "mars3d";
  
  onMounted(() => {
   var mapOptions = {
    basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
  };
  var map = new mars3d.Map("mars3dContainer", mapOptions);
  
  });
</script>


<style scoped >
.mars3d-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
  

如果运行项目，前端报如下错误，执行下面命令，补装相关依赖。 

npm install -D less

 4、修改App.vue文件

代码如下图所示：

<template>
   <div id="app">
   <!-- {{msg}}
   <br> -->
    <v-index />
  </div>
</template>
<script>
import index from './components/component/index.vue'
export default {
  // data(){
  //   return{
  //     msg:'hello vue'
  //   }
  // },
  components:{
      'v-index':index
    }
}
</script>


<style scoped lang="less">
html, body, #app{
  width: 100%;
  height: 100%;
  margin: 0;
}
</style>

 5、运行下面命令，前端出现地球，表明成功在Vue项目中引入Mars3D

 npm run dev