Build your own desktop wechat using Vue + Electron from 0 to 1

About electron

Official definition :Electron is a framework for creating native applications using Web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts, and you just have to focus on the core of your application. Simply speaking, you can quickly build cross-platform desktop applications using front-end HTML,CSS,JS+Node. JS+ Chrome browser kernel. You only need to pay attention to the implementation of page logic

Small white entry, big god please skip ha

1 installation

1. Install our old friend VUE (please take the initiative to upgrade to VUE-CLI3.x)

Vue create PC // Start the project to see if it can run properly NPM Run serveCopy the code

I think it’s better not to pick Linter, personally

2. Is there anything wrong with it? Let’s take the next step and install the Vue plug-in for Electron

Vue add vue-cli-plugin-electron-builder // Recommended installation mode, why? noCopy the code

About the introduction, please pay attention to www.npmjs.com/package/vue. This step will be very slow to install and may fail. Try it a few times, and this step will change our directory structure

After the installation is completed, as shown in the picture below, the installation is successful because it has been installed, so it looks like this. Ha ha, as long as no error is reported, the installation is successful

3. How about running our project?

yarn electron:serve
Copy the code

4. Try packing?

yarn electron:build
Copy the code

Packing results:

If no configuration is performed, the package is automatically stored in the dist_electron folder. The default name is PC Setup 0.1.0

5. How about installing it?

Well, you’ve successfully run and packaged the desktop side

2 Installation and Configuration

After the first step, although you can package a desktop application, but you will find that your packaged application double click to install, you will not allow you to make any custom installation options, both to see the quick install service, so it is not arbitrary, let’s customize the installation configuration:

Create a new vue config file in the root directory.

module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "appId": "com.example.app"//ID is not explained, is it?"productName":"APP",// The project name, which is also the generated installation file name, namely ademo.exe"copyright":"Copyright © 2019"// Copyright information"directories": {"output":"./dist"// Packaged output file path},"win":{// Win-related configurations"icon":"./favicon.ico"// icon, the current icon is in the root directory, notice there is a pit"target": [{"target": "nsis",// Use nSIS to create the installation program"arch": [
                                "x64"//64位
                            ]
                        }
                    ]
                },
                "nsis": {
                    "oneClick": false, // Whether to install with one click"allowElevation": true// Allow requests for promotion. If it isfalse, the user must restart the setup program with the promoted permissions."allowToChangeInstallationDirectory": true// Allows you to change the installation directory"installerIcon": "./favicon.ico"// Install the icon"uninstallerIcon": "./favicon.ico"// Uninstall the icon"installerHeaderIcon": "./favicon.ico"// Install header icon"createDesktopShortcut": true// Create a desktop icon"createStartMenuShortcut": true// Create a start menu icon"shortcutName": "APP", // icon name (i.e. desktop shortcut name after application creation)},}}}}Copy the code

Pay attention to

If the project runs or is packaged once, the following error will be reported when the project is packaged again:

If there is an error, it is suggested to restart the computer, you can solve ha, that is because the last packaging or exercise took up a file, the task can not end, restart the computer is convenient and fast. Ha ha