背景

這幾天學習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
 

複製程式碼

工程介紹

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做一個簡易服務端，開發檔案下載/上傳等功能。