从0到1使用vue+electron构建本身的桌面端微信(一)

时间 2019-11-21

标签使用 vue+electron vue electron 构建本身桌面微信繁體版

原文原文链接

关于electron

官方定义:Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术建立原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上便可. 简单的说既为使用前端HTML,CSS,JS+Node.js+chrome浏览器内核构建的跨平台桌面端应用,你只须要关注页面逻辑的实现,便可快速构建跨平台桌面应用前端

小白入门,大神请略过哈

1 安装

1.首先固然是安装咱们的老朋友vue(请主动升级为vue-cli3.x)

vue create pc

//启动项目,看是否能够正常跑起来
npm run serve
复制代码

我以为仍是是不选Linter的好哈,我的见解 vue

我习惯了less,我的随意哈,不装也能够

2.没毛病?那咱们进行下一步,安装electron的vue插件

vue add vue-cli-plugin-electron-builder   //推荐安装方式,具体为啥? 不着
复制代码

有关介绍,请关注 www.npmjs.com/package/vue… 这一步安装会很是慢,且可能安装失败,多试几回啦,而且这一步会改变咱们的目录结构哈chrome

这一步请选择6.0.0,为啥? 旧不如新嘛.哈哈

安装完成之后,以下图,表示安装成功由于是装过了,全部成这样子了,哈哈,只要不报错,既表明安装成功 vue-cli

3.接下来运行咱们的项目吧?

yarn electron:serve
复制代码

哈哈,很是好,已经能够正常的跑起来了

4.试着打包一下?

yarn electron:build
复制代码

打包结果:npm

通常在不进行任何配置的状况下,打包完自动存在dist_electron文件夹下,默认名字为pc setup 0.1.0json

5.安装一下吧?

双击打开

嗯你已经成功的运行并打包生成桌面端了浏览器

2 安装配置

通过第一步,虽然能够打包完成一个桌面端应用了,但你会发现你打包的应用双击安装后,不会让你作任何自定义安装选择,既进行看快速安装服务,这样是很不任性化的,下面咱们进行自定义的安装配置:bash

在根目录新建 vue.config.js,也就是俗称的vue 的配置文件,内容以下(功能请看注释)微信

module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "appId": "com.example.app",  //ID 不用解释吧?
                "productName":"APP",//项目名，也是生成的安装文件名，即aDemo.exe
                "copyright":"Copyright © 2019",//版权信息
                "directories":{
                    "output":"./dist"//打包后的输出文件路径
                },
                "win":{//win相关配置
                    "icon":"./favicon.ico",//图标，当前图标在根目录下，注意这里有个坑
                    "target": [
                        {
                            "target": "nsis",//利用nsis制做安装程序
                            "arch": [
                                "x64"//64位
                            ]
                        }
                    ]
                },
                "nsis": {
                    "oneClick": false, // 是否一键安装
                    "allowElevation": true, // 容许请求提高。 若是为false，则用户必须使用提高的权限从新启动安装程序。
                    "allowToChangeInstallationDirectory": true, // 容许修改安装目录
                    "installerIcon": "./favicon.ico",// 安装图标
                    "uninstallerIcon": "./favicon.ico",//卸载图标
                    "installerHeaderIcon": "./favicon.ico", // 安装时头部图标
                    "createDesktopShortcut": true, // 建立桌面图标
                    "createStartMenuShortcut": true,// 建立开始菜单图标
                    "shortcutName": "APP", // 图标名称(也就是应用建立后的桌面快捷方式名称)
                },
                }
            }

    }
}
复制代码