1. vue环境的搭建

1.1. 下载安装

首先在node官网下载node

下载完成后后安装,双击安装包，开始安装，一直点next即可，
安装路径默认在 C:\Program Files 也可以自定义修改

安装完成后打开cmd窗口执行命令 node -v 可以查看node的版本

最新版的node在安装的同时也安装了npm(包管理工具) 执行npm -v可以查看npm 的版本

1.2. 修改全局依赖包路径

默认情况下，我们在执行 npm install -g XXXX 下载全局包时，这个包的默认存放路径位 C:\Users\用户名\AppData\Roaming\npm\node_modules 下，可以通过指令 npm root -g 查看

但是有时候我们不想让全局包放在这里，我们可以自定义存放目录,在CMD窗口执行以下两条命令修改默认路径：

npm config set prefix E:/npm/globel
npm config set cache E:/npm/cache

使用默认的镜像安装项目会比较慢，推荐使用淘宝的镜像来安装项目

npm config set registry https://registry.npm.taobao.org

2. 搭建 electron-vue 开发环境

vue-cil 能更加方便的帮助我们搭建 vue 项目，所以我们需要下载一个 vue-cil 使用以下命令来全局安装 vue-cil

npm install -g @vue/cli
npm install -g @vue/cli-init

vue-cil 安装好后，便可以使用以下命令来安装vue-electron项目

vue init simulatedgreg/electron-vue my-project

再次确认项目的名称，如果需要更改名称就更改后，回车确认，如果不做更改直接回车确认

再次确认appid，如果需要更改名称就更改后，回车确认，如果不做更改直接回车确认

输入项目描述，如果需要更改描述就更改后，回车确认，如果不做更改直接回车确认

确认后弹出询问是否需要使用Sass的提示信息，项目中想使用sass 就输入Y，然后回车，不想使用就输入N然后回车

选择你所需要使用的模块，其中 vue-electron 必须选择，其他模块看需求来决定选不选

模块选择完毕后，选择eslint,这个可以规范编码格式，最好还是需要

选择一个编码规范配置

选择是否需要单元测试模块，以及打包方式，这里我没选择单元测试模块，打包模式也用的package

至此 electron-vue 的开发环境就算是搭建完成了，切换到项目目录，使用以下命令安装一下依赖模块

npm i

再使用以下命令启动项目

npm run dev

如果项目启动后出现如图所示错误

在 .electron-vue 目录下找到 webpack.renderer.config.js 和 webpack.web.config.js 两个文件添加如下代码

templateParameters (compilation, assets, options) {return {compilation: compilation,webpack: compilation.getStats().toJson(),webpackConfig: compilation.options,htmlWebpackPlugin: {files: assets,options: options},process,};},

解决方案参考https://segmentfault.com/a/1190000019487488
再次运行命令

npm run dev

看到如下界面，表示 electron-vue 环境搭建成功

3. 搭建 bigemap+electron+vue 开发环境

3.1. 软件下载

除去 electron+vue 相关的软件之外，还需下载 bigemap 的离线服务器（3D版）

在bigemap官网下载离线服务器(3D版本)，下载后安装

3.2. 代码编写

在项目目录 src/renderer 下新建一个文件 map.js 这个js 用来动态获取存放在离线服务器端的js,css。该文件中添加如下代码

// map.js
// 换成本地的服务器js文件即可
let script = ['http://localhost:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'// 如果有更多的JS要引用 ，也一起放到这个数组中
]
export default new Promise(resolve => {let link = document.createElement('link')link.rel = 'stylesheet'link.async = false// 换成本地的服务器css文件即可link.href = 'http://localhost:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css'document.head.appendChild(link)let loads = script.map(v => {let script = document.createElement('script')script.type = 'text/javascript'script.async = falsescript.src = vdocument.head.appendChild(script)return script})let end = loads.pop()end.onload = resolve
})

把 src/renderer/components 下的文件删掉，新建一个 map.vue文件
写下如下代码

<template><div id="map"></div>
</template><script>
import maps from '@/map'let viewerexport default {mounted () {maps.then(() => {window.bmgl.Config.HTTP_URL = 'http://127.0.0.1:9000'viewer = new window.bmgl.Viewer('map', {terrainId: 'bigemap.4nxrqbro',requestRenderMode: true,selectionIndicator: true,// sceneModePicker: true,// navigationHelpButton: true,shouldAnimate: true})let canvas = viewer.canvascanvas.setAttribute('tabindex', '0')canvas.addEventListener('click', function () {canvas.focus()})canvas.focus()})}
}
</script><style>
</style>

改变 src/renderer 下的App.vue

<template><div id="app"><Map></Map></div>
</template><script>
import Map from '@/components/Map'export default {name: 'map-learn',components: {Map}
}
</script><style>
/* CSS */
</style>

npm run dev 启动项目看到如下界面表示bigemap+vue+electron的环境搭好了

bigemap+vue+electron做桌面端GIS开发（3D 版）相关推荐

基于Electron的桌面端应用开发和实践
引言如果开发跨桌面端的应用开发的话,我相信,electron目前绝对是不可避免的技术方案. web应用大家都知道,通过浏览器访问的应用就是web应用,那什么是桌面端? 桌面端有两个重要特点: 具备独 ...
基于C#的AE+IDL二次桌面端程序开发
目录一.内容 1.2 实训内容 1.2.1 IDL综合开发 1.2.2 基于AO/AE的GIS二次开发 1.2.3 COM_IDL_connect组件开发三. 实训软硬件 ...
使用vue+electron创建桌面软件（一）
使用vue项目,添加electron,创建桌面软件.软件的本地运行.打包等功能环境配置 node环境开发环境:linux vue-vli 若没有vue环境,则终端安装:npm install -g ...
使用vue+electron创建桌面软件（二）
文章目录打包配置界面配置窗口配置自定义顶部栏 vue+electron项目,对软件进行配置,包括打包图标.名称等:自定义窗口最小化.全屏.退出软件.界面信息传递等打包配置在vue.conf ...
vue+electron 跨平台桌面应用开发实战教程
一.创建项目 1.1 安装vue-cli 先查看是否已经安装了vue-cli,vue-cli的版本是什么? 查看版本命令:vue --version 如果版本叫老,可以直接卸载,再安装最新版本卸载命 ...
常用桌面端软件开发语言整理
桌面UI组件/框架 - 开源软件 - Gitee.com C# 原型工具axureRp8:C#.图形库ImageMagick. SharpSvn.SharpZipLib.Newtonsoft.Jso ...
vue项目对接pad端——混合开发总结
近期互动项目的开发接近尾声,完成了pad端的对接工作,在此记录总结对接中遇到的问题与收获. 设备类型的判断因为项目同时需要适配PC.PAD两个端,因此需要通过windows的navigator对象获 ...
Vue结合天地图(天地图API)Gis开发
(此代码结合vue.element-ui) 1.首先在index.html中引入需要的文件当前引入的是在线的gis文件,如需离线也可以换成离线文件 <scri ...
php 可以做pc客户端吗,vue.js能做pc端吗
vue.js能做pc端,因为Vue是一套构建用户界面的渐进式框架,不管是用在PC端还是用在移动端,只要提供对应的API及数据相应就可以:但是PC端单页面对于搜索引擎可能不太友好,无法让搜索引擎把整个网 ...

bigemap+vue+electron做桌面端GIS开发（3D 版）