Make it from scratch and finally put the written components together!
Pure css, which has been written for several days, is a bit tiring. sass will be used in this chapter.
If the code is too long, it will be written in two or more chapters.
There will be detailed comments in the code for you to read and understand.
The interface may be partially deviated and the comparison is imitative.

If you see this sentence in advance, it means that this article is not updated yet!

Official Interface Size

Default width: 280px
Default height: 652px (approximate)
Minimum height: 528 PX
Minimum width: 280px
Maximum height: 1041px (may be inaccurate, possibly based on resolution)
Maximum width: 605px
Top head area height: 140 PX
Bottom Option Area Height: 40px
Search box height: 30px
Head Diameter/Height: 50px
Right-click menu width: 180px

Download and install

Install electron-vue

I don't know what's happening these days. It's always very slow to download. If it's too slow, hang up the agent.

#cd F:\electron
vue init simulatedgreg/electron-vue qq_main
cd qq_main 
npm install
npm run dev

Start making

Creating Routes and Interfaces

Route:

export default new Router({
    routes: [
        {path: '/', name: 'main', component: () => import('@/components/LandingPage')},
        {path: '/main', name: 'main', component: () => import('@/view/main/index')},
        {path: '*', redirect: '/'}
    ]
})

The main window of the first window we created cannot be transparent, which means that we can't use rounded corners, so we have to create another window to make the edges of the window transparent.
Display the main window show:false temporarily
Then create a main.js to create the window we want to do!

import {BrowserWindow} from 'electron'

let main = null;

function createMainWindow() {
    main = new BrowserWindow({
        width: 280, //Default width of window creation
        height: 652,    //Default height
        minWidth: 280,  //Minimum width
        minHeight: 528, //Minimum height
        maxHeight: 1041,    //Maximum height
        maxWidth: 605,  //Maximum width
        alwaysOnTop: true,  //Window top
        useContentSize: true,   //Using web page size, this means that the size of the actual window should include the size of the window frame, slightly larger, by default
        frame: false,   //Remove the top
        transparent: true,  //Transparent window
         type: 'toolbar',    //Toolbar window
        webPreferences: {
            devTools: false,    //Close debugging tools
        }
    });
}

createMainWindow();

Page files and style files

<template>
    <div id="main">
        <header>
            <div class="toolbar-header"></div>
            <div class="search-box"></div>
        </header>
        <footer></footer>
    </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style lang="sass">
    #main
        position: absolute
        width: 100%
        height: 100%
        background-color: red
        border-radius: 4px
    header
        position: relative
        border-radius: 4px 4px 0 0
        height: 140px
        background-color: blue
        width: 100%
        .toolbar-header
            position: absolute
            top: 0
            height: 33px
            width: 100%
            background-color: yellow
        .search-box
            position: absolute
            bottom: 0
            width: 100%
            height: 32px
            background-color: black
    footer
        border-radius: 0 0 4px 4px
        height: 40px
        background-color: black
        position: absolute
        bottom: 0
        width: 100%
</style>

Effect

Copyright notice

This article only studies the use of electron ic without any commercial use. The qq related pictures and related logos used in this article are used as learning. If they infringe on the rights and interests of Tencent, please contact the author to delete them.