vue3+vite+openlayers6项目搭建

说明：项目中使用的库：vue3+vite+typescript+openlayers+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'), 
            //'@': resolve(__dirname, './src'),     
        }   
    },   
    plugins: [vue()],   
    base: './', //打包路径   
    server: {     
        port: 18110,  //服务端口号     
        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'; 
//和vue2 路由不同 
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、安装openlayers和其他常用包

npm install ol
npm i sass 
npm i element-plus 
npm i momnet

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

欢迎指正与star