使用Vite工具构建OpenLayers应用

vite作为最近大火的前端构建工具,吸引了大批开发者和工具框架作者的关注。vite自称为下一代的构建工具,这是要取代webpack的节奏啊。openlayers最新版本的案例代码就使用了vite来构建,因此这一篇文章我们来给大家示范一下如何使用vite来构建一个基于openlayers的应用。

 首先要学会如何初始化vite。

你需要在自己的电脑里安装node环境,这个大家可以自行百度我就不废话了。

安装好node以后可以打开电脑的终端,windows用户直接按win+R即可。mac用户直接command+空格搜索终端然后打开。

在终端里输入命令:npm create vite@latest

这时候终端窗口会询问我们项目的名字,自己起个名字就好

然后选择第一项即可:

 

然后选择javascript按下回车项目就构建好了,特别神速有没有。

当然这个神速是暂时的,vite不同于webpack,webpack在初始化项目的时候就会下载对应的依赖包。因此需要花费很长时间才能初始化好,而vite相反,它并没有去下载对应的依赖而是直接告诉你项目初始化好了,然后你去项目里开始运行的时候才开始给你下载对应的依赖包。所以现在并不能说vite比webpack快了多少。

言归正传我们是要构建openlayers的工程。

我们打开刚才建立好的工程文件夹,然后打开终端,输入命令:

npm install

安装项目对应的基础依赖包。然后再输入命令:

npm install ol  --save

安装openlayers的依赖包。

都安装完成后就可以点击运行package.json里的dev命令或者在终端直接输入:

npm run dev

也可以。

然后我们点击生成的链接就可以访问到项目的首页:

 

项目首页:

 这时候我们就成功的安装了依赖并且成功的启动了项目。

然后我们openlayers官网上的例子代码对应的copy到相应位置。

比如我们随便找一个例子:

 打开看看里面的代码构造,代码其实很简单,就一个main.js和index.html。下面的package.json文件是我们vite 项目里本就有的。

所以我们只需要复制走html里的代码然后替换掉项目里的index.html的代码。

复制main.js代码替换掉项目里的main.js代码。

然后重新启动项目,就可以看到

这样我们就成功搭建了我们的应用,后续如果需要做什么改动的话只需要整理项目结构即可。

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WebGIS小智

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值