Skip to content

k-water/electron-filesystem

Repository files navigation

基于vue-electron的文件管理器

项目由来

项目的实现是一个WIndows平台的文件管理器,实现了基本的文件操作功能,新建,删除,复制,粘贴,剪切,重命名。

项目地址:https://github.com/k-water/electron-filesystem

什么是Electron

Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体。

这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器。

以下资料供参考学习:

Electron(维基百科)

中文文档

(译)Electron的本质

入门视频教程

技术栈

  • Vue
  • VueRouter
  • Vuex
  • Vue-Electron
  • iView
  • Eslint
  • Babel
  • Webpack
  • Less

项目采用了vue-cli脚手架搭建开发环境,在开始编码之前,在gayhub上搜了一下,发现有大神写了一个基于vue和electron的脚手架,看了文档后,发现正好适合我的需要,瞬间发现了新大陆。

项目名称:electron-vue

项目地址:https://github.com/SimulatedGREG/electron-vue

项目文档(英文的):https://simulatedgreg.gitbooks.io/electron-vue/content/en/

PS:在开始编码之前要仔细阅读文档。

工程目录

│
├── README.md                           <=  项目介绍
├── app                                 <=  开发目录
│   ├── dist                            <= 编译打包
│   ├── icons                           <= 相关图标
│   ├── src                             <= 项目源代码
│   │   ├── main                        <= electron主进程
│   │   │   ├── application.js
│   │   │   ├── index.dev.js
│   │   │   ├── index.js
│   │   ├── renderer                    <= electron渲染进程
│   │   │   ├── App.vue                 <=  Vue 根组件
│   │   │   ├── main.js                 <=  Vue 入口
│   │   │   ├── assets                  <=  静态资源
│   │   │   ├── common                  <=  公共配置
│   │   │   ├── config                  <=  项目配置
│   │   │   ├── extend                  <=  Vue 扩展相关
│   │   │   ├── router                  <=  Vue 路由相关
│   │   │   ├── store                   <=  Vuex
│   │   │   ├── views                   <=  视图层
│   ├── index.ejs                       <= 模板文件
│   ├── package.json                    <=  相关依赖
├── build                               <=  打包桌面应用相关
│   ├── Gruntfile.js                    <=  构建脚本
│   ├── package.json                    <=  相关依赖
├── tasks                               <=  electron-packeger打包
│   ├── release.js
│   ├── runner.js
├── test                                <=  测试文件夹  
│   ├── e2e
│   ├── unit
│   ├── .eslintrc
├── config.js                           <=  electron打包配置
├── webpack.main.config.js
├── webpack.renderer.config.js
├── package.js
│
│

使用说明

# install dependencies
npm install

# serve with hot reload at localhost:9080
npm run dev

# build electron app for production
npm run build

# lint all JS/Vue component files in `app/src`
npm run lint

# run webpack in production
npm run pack

### login
username:water
password:123456

制作安装程序

打包完成后进入build目录,执行grunt命令

执行完成后会有installer目录,双击Setup.exe安装即可

效果预览