美文网首页
Electron+Vue3+Element-plus

Electron+Vue3+Element-plus

作者: 洛钧寒 | 来源:发表于2023-09-20 13:29 被阅读0次
  • 安装NVM

  1. 下载NVM的Windows安装程序。NVM的GitHub仓库中提供了Windows安装程序,可以在这里下载:https://github.com/coreybutler/nvm-windows/releases

  2. 运行安装程序,按照提示完成安装。安装过程中可以选择安装目录,默认是C:\Users\用户名\AppData\Roaming\nvm

  3. 安装完成后,重新打开命令提示符窗口以获取nvm和npm的路径。

  4. 使用nvm命令来安装需要的Node.js版本。
    nvm install 16 lts

安装

# 安装 Vue Cli
npm install -g @vue/cli 

# 全局安装 Electron
cnpm install electron -g 

# 搭建 vue 环境
vue create .

# 添加Element-plus
vue add element-plus

# vue项目中添加 electron 模块
vue add electron-builder

# 运行
npm run electron:serve

# 打包 electron 应用
npm run electron:build

windows 解决方案

打包 windows 应用时我们需要将整个项目的源码上传到 windows 电脑上
上传到 windows 电脑上后同样需要安装 cnpm 不然 electron 是安装不上的
打开项目目录删除掉 node_modules 重新 cnpm install
如果还是无法打包删除掉 node_modules/electron 目录重新 cnpm install
然后运行 npm run electron:build 进行打包


  • 通用窗口控制代码

  1. 无边框窗口
mainWindow = new BrowserWindow({
  frame: false,
   ...
})
  1. 隐藏工具栏
    mainWindow.removeMenu()

相关文章

网友评论

      本文标题:Electron+Vue3+Element-plus

      本文链接:https://www.haomeiwen.com/subject/odaovdtx.html