脚本宝典收集整理的这篇文章主要介绍了基于vue-electron的小项目，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

项目由来

因为想要用GUI，而我又是一个向FontEnd Developer方向发展的小白，自然而然想到了Electron来套壳，让网页变成桌面应用，之前只是了解过这个领域，没真正实践过，所以这此项目也是对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的本质
入门视频教程

技术栈

• [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
项目地址：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

---

效果预览

脚本宝典总结

以上是脚本宝典为你收集整理的基于vue-electron的小项目全部内容，希望文章能够帮你解决基于vue-electron的小项目所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。