background

In the current mobile era, although mobile devices bear most of the traffic, PC terminal is still an important platform that cannot be abandoned. I learned electron these days and wrote a very simple demo based on my previous experience in developing desktop applications.

Source code path

Github.com/zhangyy62/e…

Environment set up

Vue – cli scaffolds have been added in the electron – vue project template, type the command can be directly, details can be reference: electron.org.cn/vue/index.h…

NPM install -g vue-cli vue init SimulatedGreg /electron-vue my-project Yarn # NPM install yarn run dev # NPM run devCopy the code

Project introduction

The default route is shown in the red box. The home page of the default route points to LandingPage.vue. For simplicity, modify the web disk page directly from landingPage. vue. The Components directory contains.vue files for all pages

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [{path: '/'.name: 'landing-page'.component: require('@/components/LandingPage').default
    },
    {
      path: The '*'.redirect: '/'}]})Copy the code

Implementation effect

Since it is scrapped version, icon and detail UI is not buckle, this life will not buckle. There is also the big icon list is not done, will be filled up later.

Implementation approach

Overall upper and lower layout is the top bar height fixed, width adaptive, the following area width and height adaptive. Next, the left and right areas are distinguished. The left column is of fixed width and adaptive height, and the right file list area is filled directly. I set the minimum width and height of the window to avoid dragging too small manually.