1. Electron + vue 打造自己的IM客户端(vue-cli-plugin-electron-builder)[初始化]

1. Electron + vue 打造自己的IM客户端(vue-cli-plugin-electron-builder)[初始化]一直以来都是面向百度(谷歌)编程,有什么需求和难点都会搜索解决。但是网上的东西细碎,而且搜索的关键词不对还搜不出内容,就想自己写一些自己的总结性文章。萌发了想要打造一套属于自己的IM系统(后端+客户端)的想法,由于对前端特别是桌面端感兴趣,所以先来用electron仿照微信做一…

前言

作为一个普通后端开发,一直都有一个前端的心。

一直以来都是面向百度(谷歌)编程,有什么需求和难点都会搜索解决。但是网上的东西细碎,而且搜索的关键词不对还搜不出内容,就想自己写一些自己的总结性文章。萌发了想要打造一套属于自己的IM系统(后端+客户端)的想法,由于对前端特别是桌面端感兴趣,所以先来用electron仿照微信做一个客户端程序。还在学习中,水平有限,如有错漏请千万不要批评,影响写作动力。

关于electron和vue的结合

该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具,加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等。

2016年5月初创建的开源项目,但是早已不更新。此为直接搭建好的模板工程,可以直接克隆使用,默认为electron2,但是可以手动更改到electron4。由于不更新,electron的版本也停留在较低的版本,所以基本不推荐使用,除非自己进行更改以适应最新electron版本。

响应式桌面/移动网站,PWA(渐进式Web应用程序),移动APP(外观原生)和多平台桌面应用程序(通过Electron)。

全平台的开发框架,拥有自己的一套定制UI组件。由于对这个框架了解不多,所以此次项目未选择。详细情况请点击Quasar进行查看,文档很丰富。

vue-cli的一个插件,跟随版本更新社区活跃,是本次客户端程序的选择。最新版本最低已经支持到electron9,且经过测试已经达到生产使用。如果是从electron-vue切换到vue-cli-plugin-electron-builder请注意升级node,vue-cli的版本。

开发环境

  • Windows10
  • vscode
  • node 12.16.1
  • npm 6.13.4
  • yarn 1.22.4
  • electron 9.1.1
  • Visual Studio 2017 15.7.2 或更高版本
  • Python 2.7.10 或更高版本
  • Git

推荐使用yarn,切记要更改npm和yarn的源为淘宝源,否则连接外网真的很慢。

vscode 插件配置

vscode 直接在商店中搜索扩展 Vue VS Code Extension Pack 安装即可。

electron的版本选择

  1. electron3开始说精力不济不再原生支持预览PDF,但是electron9又改回来可以支持。PDF预览阅读可以使用pdfjs代替。
  2. 如果自己学习,那么electron所有版本皆可。但是就我自己使用Windows环境情况来看,用户的机器千奇百怪。首先electron原生不支持WindowsXP,Windows10支持情况很好。重灾区在于Windows7,Windows7有很多民间魔改版本或者是Windows7老版本。这些Windows7普遍.net framework版本偏低,要么更新这些机器的.net framework版本到4.6,要么electron版本选择稍微老一些版本,比如electron5.0.13,否则就会运行错误从而出现白屏。如果想要再保险那么选择打包成32位,这样Windows7及以上就基本都可以适配。
  3. 此次使用electron9

开发编译和打包的依赖下载问题

  • vue-cli-plugin-electron-builder1.x

此版本会直接从github上下载某些所需库,导致不走淘宝源的镜像库,卡在编译或者打包环节(其实是文件大小比较大,下载却很慢,过一段时间就超时了)。

  • vue-cli-plugin-electron-builder2.x

此次使用2.x版本,直接从淘宝源下载,很顺畅。

1.初始化工程

这里也可以使用vue ui命令打开可视化网页进行工程新建和添加插件。以下是以终端命令的方式新建工程。

1.1 新建工程

使用vue-cli,在终端中输入命令建立工程:

 vue create im-client

根据提示选择所需模块,一步一步来即可。

注意:这里不要选择vue-router的 history模式。history模式依赖后台,electron相当于加载本地静态文件,所以会出现加载错误无法运行。

1.2 添加vue-cli-plugin-electron-builder插件

终端切换到工程根目录运行命令

vue add electron-builder

终端提示选择electron版本,选择electron9即可。 此插件会自动在项目里增加模块和自动生成background.js文件。

electron分为主进程渲染进程,主进程为纽带负责与底层系统交互,渲染进程负责网页UI展示。background.js为主进程文件。

在package.json文件中把electron版本改为9版本的当前最新

"electron": "^9.1.1"

终端输入 yarn 安装依赖。

 yarn

1.3 开发模式

当以上步骤完成依赖全部安装之后即可进行开发, 终端中输入:

yarn electron:serve

进入开发模式

注意:默认情况下进入开发模式会自动下载chrome商店的vue开发工具插件Vue Devtools,众所周知原因这里会下载不了,起初你以为运行失败了,但是等待一会你会发现终端打印Log尝试失败几次后就会打开开发界面,最好将之注释掉(如果非要这个插件,自行搜索飞机场等关键字),background.js 文件中相关代码位置:

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

1.4 打包配置

electron-builder打包可以打成绿色版不需要安装直接运行(文件未压缩,体积较大),也可以选择打包成exe安装版本(文件压缩,可以选择安装选项)。此次选择绿色版。 在项目根目录新建vue.config.js文件,输入以下代码:

module.exports = {
  pluginOptions: {
    // NOTE:https://www.electron.build
    // NOTE:https://nklayman.github.io/vue-cli-plugin-electron-builder/
    electronBuilder: {
      nodeIntegration: true,
      builderOptions: {
        appId: 'com.ldy',
        productName: 'im-client',
        copyright: 'Copyright©ldy',
        directories: {
          output: './dist_electron' // 输出文件路径
        },
        win: {
          // win相关配置
          icon: 'public/favicon.ico', // 图标256*256
          target: [
            {
              target: 'dir', // 不打包为安装程序
              arch: [
                'x64' //64位
                // "ia32", //32位
              ]
            }
          ]
        }
      }
    }
  }
}

注意图标必须是256*256的ico图标,请自行制作。可以选择在阿里图标库中找到心仪图标之后下载为PNG图片,在线ico转换

配置好之后,终端输入:

yarn electron:build

就会在dist_electron\win-unpacked目录下生成绿色版程序,双击exe即可运行。

1.5 代码仓库

代码仓库

1.6 最后

把在准备阶段遇到的各种问题都提示出来了,有很多人也遇到这些问题,网上也有很多人说这些问题,大家搜索一下都看看,总有好的解决办法。

未完待续。。。

今天的文章1. Electron + vue 打造自己的IM客户端(vue-cli-plugin-electron-builder)[初始化]分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/16272.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注