vue3+vite+cesium项目搭建

说明：项目中使用的库：vue3+vite+typescript+cesium+element Plus。

1、vite初始化项目

//1、构建vite+vue项目 
npm init vite@latest ol-project -- --template vue 
//2、构建vite+vue+ts项目 
npm init vite@latest 
//根据提示输入项目名称，选择vue框架，然后选择vue-ts

2、安装类型声明文件，修改vite配置文件

1）安装

//解决找不到path问题
npm install --save @types/node

2）配置：找到根目录下vite.config.ts并添加如下内容

import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
import { resolve } from 'path' 
export default defineConfig({   
    resolve: {     
        alias: {       
            '@': resolve(__dirname, 'src'),
        }   
    },   
    plugins: [vue()],   
    base: './', //打包路径   
    server: {     
        port: 18120,  //服务端口号     
        open: true,   //服务启动时是否自动打开浏览器     
        cors: true,   //允许跨域     
        proxy: {       
            '/api': {         
                target:'http://www.xxxx.com.cn',         
                changeOrigin:true,         
                rewrite:(path) =>path.replace('/api','')       
            }     
        }   
    } 
})

3、添加路由

1）安装

npm i vue-router

2）创建src/router/index.ts文件

import { createRouter, createWebHistory } from 'vue-router'; 
const routerHistory = createWebHistory(); 
const router = createRouter({   
    history: routerHistory, //history写法不同   
    routes: [{       
            path: '/',       
            redirect: '/home',     
        },{       
            path: '/home',       
            component: () => import(`@/views/Home.vue`),     
        }], 
    }); 
export default router;

3）在main.ts文件中挂载

import { createApp } from 'vue' 
import App from './App.vue'
import router from './router/index' 
createApp(App).use(router).mount('#app')

4）修改app.vue中初始页面路由

<template>   
    <router-view/> 
</template>

4、安装cesium和vite-plugin-cesium

由于 Cesium 不是一个普通的 npm 包，需要依赖一些 css、图片、json 等。我们要参考 Cesium 官方的 webpack 教程 来做一堆额外的工作。 现在可以直接使用 vite-plugin-cesium 插件，来帮我们完成这些配置。

npm i cesium vite-plugin-cesium vite -D

5、修改vite配置文件--vite.config.ts

import { defineConfig } from 'vite'; 
import cesium from 'vite-plugin-cesium'; 
export default defineConfig({ 
    plugins: [cesium()] 
});

项目地址：github.com/DLFouge/vue…

欢迎指正与star