This is the fourth day of my participation in the August Text Challenge.More challenges in August

The electron + VUe3 + TS realizes the third day of desktop gadget

preface

What we want to do today is to basically build up the framework, some basic code to write, detailed basic code will make the development faster

Window design

Borderless window

Yesterday we studied the Electron BrowserWindow module. The frame argument determines whether there is a border.

Go to background.ts and change the frame parameter of BrowserWindow to true, as shown in the following figure:

After that, we have an open window:

There is some sample code in there, so delete it:

  1. deleteHome.vueandAbout.vue
  2. Create index. Vue
  3. Adjust the router file to
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Index from '.. /views/index.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/'.name: 'Index'.component: Index
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
Copy the code
  1. Adjust theApp.vueAfter adjustment, is
<template>
  <router-view />
</template>

<style lang="scss"></style>
Copy the code

Window drag

At this time we found that our window seems not to drag, don’t worry. Let me water again

Add CSS -webkit-app-region: drag to the element. Add CSS -webkit-app-region: drag to the element. Add CSS -webkit-app-region: drag to the element.

We create a Layout folder under the project SRC folder and create the header. vue file under the folder.

Header.vue

<template>
  <div class="header"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
});
</script>

<style lang="scss" scoped>
.header {
  -webkit-app-region: drag;
  width: 100%;
  height: 40px;
  background-color: rgb(38.163.247);
}
</style>
Copy the code

Introduce headers in app.vue

App.vue

<template>
  <Header />
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Header from "@/layout/Header.vue"

export default defineComponent({
  components: {
    Header
  }
});
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box
  ;
}
</style>

Copy the code

The effect is shown below:

Conclusion today

I’m running a little late today. Tomorrow we will continue to refine the style and write down the methods we might use.

Ps: sea, you are full of water!!