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是不會扣的，這輩子都不會扣的。。還有就是大圖標列表還未作，以後會補上。

實現思路

整體上下佈局是頂部欄高度固定，寬度自適應，下面區域寬高自適應。下面又區分左右兩個區域。左側欄固定寬度，高度自適應，右側文件列表區域直接填充滿就能夠了。我設置了窗口最小寬高，避免手動拖拽太小。