仿mac百度网盘客户端的报废版electron应用

背景

这几天学习electron，结合之前开发桌面应用的经验，写了一个极其简单的 demo

环境搭建

vue-cli脚手架中已经添加了electron-vue的工程模板，直接输入命令即可，详情亦可参考：electron.org.cn/vue/index.h…

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev
复制代码

工程介绍

, 默认路由如红框所示，默认路由首页指向LandingPage.vue, 为求简单，网盘页面直接从LandingPage.vue开始修改。 components目录内包含了所有页面的.vue文件

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: '*',
      redirect: '/'
    }
  ]
})
复制代码

实现效果

既然是报废版，图标和细节UI是不会扣的，这辈子都不会扣的。。还有就是大图标列表还未做，之后会补上。

实现思路

总体上下布局是顶部栏高度固定，宽度自适应，下面区域宽高自适应。下面又区分左右两个区域。左侧栏固定宽度，高度自适应，右侧文件列表区域直接填充满就可以了。我设置了窗口最小宽高，避免手动拖拽过小。具体可参考源代码：github.com/sparkxxxxxx…

总结

只是尝试了下UI布局模仿，写一个页面实在太方便。之后计划用nodejs做一个简易服务端，开发文件下载/上传等功能。