electron+vue+elementui+cesium环境搭建_cesium element-优快云博客

本文链接：https://blog.youkuaiyun.com/Feelings_/article/details/114927304

本文介绍了如何搭建一个结合Electron、Vue、ElementUI和Cesium的开发环境。首先，详细讲解了安装Node.js、Vue CLI、Yarn的过程，然后创建Vue项目并选择Sass作为CSS预处理器。接着，安装Electron并启动项目，导入ElementUI，并解决Vue Devtools安装时可能出现的问题。最后，添加Cesium到项目，配置vue.config.js、electron-builder.yml文件，以及设置多环境配置，如test、preview和production环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

electron+vue+elementui+cesium环境搭建

nodejs安装（可以百度怎么安装）
安装之后查看版本

node -v

我的nodejs版本 14.15.1

安装vue/cli脚手架

npm  install -g @vue/cli
//查看版本
vue -V

我的版本时4.5.11

全局安装yarn

npm i yarn -g

yarn安装随意，不想安装也可以搭建（至于yarn和npm的区别，此处不再赘述。可以百度查看一下）

vue create创建项目

vue create myproject1

在这里插入图片描述

此处选择2.0（3.0）也可以

选择是否使用路由 history router，其实直白来说就是是否路径带 # 号，建议选择 N，否则服务器还要进行配置

css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的，dart-sass需要保存后才会生效
sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现
在这里插入图片描述
In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中

在这里插入图片描述
最后就是是否保存本次的配置了，N 不记录，如果选择 Y 需要输入保存名字

在这里插入图片描述
然后就时等待项目创建
项目创建完成如下图

安装Electron

//进入到项目根目录，执行
vue add electron-builder

在这里插入图片描述
这里选择最高版本 11.0.0

在这里插入图片描述
编译启动

//编译启动
yarn electron:serve 或者 npm run electron:serve

在这里插入图片描述
添加element-ui

vue add element

第一个时全部导入第二个时部分导入（根据自己需求引入）这里为了方便选择全部导入
在这里插入图片描述

安装完成

运行yarn electron:serve

在这里插入图片描述

安装Cesium

yarn add cesium -s 或者 npm install cesium -s

修改main.js 文件在里面添加

var Cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');

Vue.prototype.Cesium = Cesium
Vue.prototype.widgets = widgets

引入完成后，在项目文件夹下新建文件：vue.config.js，文件内容为：

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'

module.exports = {
   
  // 基本路径  3.6之前的版本时 baseUrl
  publicPath: "./",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  // webpack-dev-server 相关配置
  devServer: {
   
    open: process.platform === "darwin",
    host: "0.0.0.0",
    port: 5000,
    https: false,
    hotOnly: false
  },
  configureWebpack: {
   
    output: {
   
      sourcePrefix: ' '
    },
    amd: {
   
      toUrlUndefined: true
    },
    resolve: {
   
      alias: {
   
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'cesium': path.resolve(__dirname, cesiumSource)
      }
    }