背景
这几天学习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做一个简易服务端,开发文件下载/上传等功能。