博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
基于vue-electron的小项目
阅读量:6823 次
发布时间:2019-06-26

本文共 2362 字,大约阅读时间需要 7 分钟。

项目由来

因为想要用GUI,而我又是一个向FontEnd Developer方向发展的小白,自然而然想到了Electron来套壳,让网页变成桌面应用,之前只是了解过这个领域,没真正实践过,所以这此项目也是对Electron的一个认识和学习吧。

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

项目地址:

什么是Electron

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

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

以下资料供参考学习:

)

技术栈

  • [x] Vue

  • [x] VueRouter

  • [x] Vuex

  • [x] Vue-Electron

  • [x] iView

  • [x] Eslint

  • [x] Babel

  • [x] Webpack

  • [x] Less

  • [x] Nodejs

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

项目名称:electron-vue

项目地址:
项目文档(英文的):

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 dependenciesnpm install# serve with hot reload at localhost:9080npm run dev# build electron app for productionnpm run build# lint all JS/Vue component files in `app/src`npm run lint# run webpack in productionnpm run pack

效果预览

转载地址:http://nulzl.baihongyu.com/

你可能感兴趣的文章
python的常用模块
查看>>
我的友情链接
查看>>
Delphi下WebBrowser应用示例
查看>>
AS3的http
查看>>
启动模式、时钟浅见
查看>>
ORA-01033: ORACLE initialization or shutdown in progress ,Enterprise Manager Console
查看>>
Intellij IDEA 一些不为人知的技巧
查看>>
演示:如何编译tbox
查看>>
简单的安卓应用授权认证(JNI)
查看>>
查看硬盘读取速率
查看>>
把匹配的小写转换成大写(\U、\u)
查看>>
【Android网络开发の5】Android中的网络数据下载
查看>>
解决PotPalyer不能拖放播放
查看>>
Linux安装mysql5.7
查看>>
HIVE常用操作以及函数
查看>>
【优达学城测评】SQL 支持许的数据类型(3)
查看>>
PHP CURL CURLOPT参数说明(curl_setopt)
查看>>
Learning NodeJs(1)
查看>>
怎么解决mysql远程连接报10038的错误
查看>>
js 父窗口可以找到子窗口的元素
查看>>