electron仿百度网盘-起手

背景

现在移动时代中虽然移动设备承载了大部分流量，但是PC端依旧还是不能放弃的重要平台。 这几天学习了下electron，结合之前开发桌面应用的经验，写了一个极其简单的 demo。

源代码路径

https://github.com/sparkxxxxxx/electron-vue-pan

环境搭建

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

# 安装 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是不会扣的，这辈子都不会扣的。。还有就是大图标列表还未做，之后会补上。

实现思路

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

转载于:https://juejin.im/post/5c167c2ff265da6167203868