preface

As a normal back-end development, there has always been a front end at heart.

Has been facing Baidu (Google) programming, what needs and difficulties will search to solve. But the thing on the net is broken, and the keyword that searches is not right still can’t search out content, want to write some of oneself summative article. I want to create my own IM system (back end + client). Since I am interested in the front end, especially the desktop end, I first use Electron to make a client program imitating wechat. Still learning, the level is limited, if there are mistakes, please do not criticize, affect the writing motivation.

On electron and VUE

  • electron-vue

The purpose of this project is to avoid using VUE to manually set up the Electron application. Electric-vue makes full use of vue-CLI as a scaffolding tool, plus webpack, electric-Packager, or electric-Builder with vue-Loader, and some of the most commonly used plug-ins, For example, vuE-Router and VUex.

The open source project was created in early May 2016, but has not been updated. This is a template project built directly and can be used directly. The default is electron2, but can be manually changed to electron4. Since there is no update, the electron version also stays at a lower version, so it is not recommended to use it unless you make your own changes to fit the latest electron version.

  • Quasar

Responsive desktop/mobile Web site, PWA (Progressive Web application), mobile APP (look native) and multi-platform desktop application (via Electron).

Full platform development framework, with its own set of custom UI components. I didn’t choose this project because I didn’t know much about this framework. For details, please click Quasar. The documentation is abundant.

  • *vue-cli-plugin-electron-builder

Vue-a plug-in for CLI, follow version update community active, is the client program of choice. The latest version has been supported to Electron9 at least, and has reached production use after testing. If you switch from electron-vue to ue-cli-plugin-electron- Builder, upgrade node, UE – CLI.

The development environment

  • Windows10
  • vscode
  • The node 12.16.1
  • NPM 6.13.4
  • Yarn 1.22.4
  • Electron 9.1.1
  • Visual Studio 2017 15.7.2 or later
  • Python 2.7.10 or later
  • Git

You are advised to use YARN. Make sure that the NPM and YARN sources are set to Taobao sources. Otherwise, the connection to the Internet is slow.

Vscode plug-in configuration

VS Code will simply search the store for the Extension Vue VS Code Extension Pack to install.

Electron version selection

  1. Electron3 initially said it would no longer support PDF preview natively, but Electron9 has changed to support PDF preview natively. PDF preview reading can be replaced with PDFJS.
  2. All versions of Electron are available if you study on your own. But in my own Windows environment, users have strange machines. First of all, the electron native doesn’t support WindowsXP, and Windows10 supports it very well. The hardest hit area is Windows7, which has a lot of folk demons or older versions of Windows7. These Windows7 versions are generally lower than the.net framework version, so either update the.net framework version to 4.6 for these machines or select a slightly older version like electron5.0.13 for the electron version, otherwise it will run incorrectly and cause a white screen. If you want reinsurance, choose to pack it into 32 bits, so that Windows7 and above are basically compatible.
  3. Electron9 will be used this time.

Develop compile and package dependency download issues

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

This version will download some required libraries directly from Github, resulting in not using taobao source mirror library, stuck in the compilation or packaging process (in fact, the file size is relatively large, but the download is slow, after a period of time will timeout).

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

The use of 2.x version, directly from taobao source download, very smooth.

1. Initialize the project

Here you can also use the Vue UI command to open a visual web page for project creation and plug-in addition. The following is a terminal command to create a project.

1.1 New Construction project

Using vue-CLI, enter the command in the terminal to establish the project:

 vue create im-client
Copy the code

Follow the prompts to select the required modules, step by step.

Note: Do not select the vue-router history mode here. The history mode depends on the background. The electron is equivalent to loading a local static file, so it will fail to run due to a loading error.

1.2 Add vuE-cli-plugin-electron – Builder plug-in

The terminal switches to the project root directory and runs the command

vue add electron-builder
Copy the code

The terminal prompts you to select the ELECTRON version and select Electron9. This plugin automatically adds modules to the project and automatically generates background.js files.

Electron is divided into the main process and the renderer process. The main process is the link responsible for interacting with the underlying system, and the renderer process is responsible for displaying the web UI. Background.js is the main process file.

Change the electron version to the current latest version 9 in the package.json file

"electron": "^ 9.1.1." "
Copy the code

Terminal Input YARN installation dependency.

 yarn
Copy the code

1.3 Development Mode

After the above steps are completed and all dependencies are installed, the development can be carried out. Enter:

yarn electron:serve
Copy the code

Go into development mode

Note: By default, vue Devtools will automatically download from chrome Store when you enter development mode. It is well known that it will not download here. At first you think it failed to run, but after a while you will find that the terminal will open the development screen after several failed attempts to print Log. It is best to comment this out (if you want to use this plugin, do your own search for keywords such as airport), and the relevant code location in 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() })Copy the code

1.4 Packing Configuration

The electron Builder package can be packaged in green and run directly without installation (the file is uncompressed and bulky), or optionally packaged as an EXE installation version (the file is compressed and you can choose the installation option). Choose the green version this time. Create a new vue.config.js file in the project root directory and type the following code:

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' // directories: {output: './dist_electron' // 'public/favicon.ico', // icon 256*256 target: [{target: 'dir', // not packaged as installer arch: ['x64' // 64-bit // "ia32", // 32-bit]}]}}}}}Copy the code

Notice The icon must be a 256 x 256 ICO icon. Make it yourself. You can choose to find the favorite icon in Ali icon library after downloading to PNG images, online ICO conversion.

After configuration, terminal type:

yarn electron:build
Copy the code

The dist_electron\win-unpacked directory generates a green version of the program. Double-click exe to run it.

1.5 Code Repository

Code warehouse

1.6 the last

All kinds of problems encountered in the preparation stage are prompted, there are a lot of people also encounter these problems, there are a lot of people on the Internet say these problems, we search to have a look, there are always good solutions.

To be continued…