electron-vue模仿网易云桌面应用体验
像官网说的那样,electron-vue就是基于 vue 来构造 electron 应用程序的样板代码。electron-vue开发起来就和vue一样,只是如果有特殊的需求需要修改应用的话就要用到electron相关的api.
electron
Electron是由Github开发,用HTML,CSS和JavaScript来 构建跨平台桌面应用程序 的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。(摘之官网)
vue
vue的话就不多提了,网站
预览
项目流程
可以先去electron官网了解一下它的开发流程,知道它大体是个怎样的情况就好,后面使用的时候可以再来看看它的api.
搭建
npminstall -g vue-cli vue init simulatedgreg/electron-vue ele-vuecd ele-vuenpm installnpmrun dev
安装过程中一路回车就行,中途会有个让你选择插件的时候,也是为了后面自己手动去装,这里就根据需要选择。
electron-packager
如果你刚开始制作 electron 应用程序或只需要创建简单的可执行文件,那么 electron-packager 就可以满足你的需求。
electron-builder
如果你正在寻找完整的安装程序、自动更新的支持、使用 Travis CI 和 AppVeyor 的 CI 构建、或本机 node 模块的自动重建,那么你会需要 electron-builder。
还是根据自己的需要选择
这些完成以后就可以像开发vue一样去开发项目了。
插件方面
electron-vue中也是能使用前端的ui组件的,以element-ui为例npmi element-ui -S然后在main.js中引入import tElementU Ifrom 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);
electron
一点自己的配置mainWindow =newBrowserWindow({ height:670,//窗口高度width:1000,//窗口宽度frame:true,//是否显示窗口边框resizable:false,//可否缩放movable:true//可否移动})
iconfont
element的icon可能并不能满足我们的需求,这时候可以选择使用阿里的iconfont。
先去iconfont官网选择你想要的icon,
选择添加到你自己的项目
然后可以在自己的项目中选择生成,复制代码到electron-vue项目的index.ejs中,正常引用css <link rel="stylesheet" href="//at.alicdn.com/t/font_883876_bfzwywhpal.css"> 使用
打包
直接使用 npm run build 就可以打包,若是要针对不同平台则按需添加参数,打包后的安装包在项目的build文件夹下
最后
界面是两天开发出来的。。所以某些样式不太美观。有个问题是打包以后iconfont不显示了,这个问题后面再解决一下,最直接的办法还是把它下到本地引用。
原文链接:https://www.jianshu.com/p/8cc...
electron-vue模仿网易云桌面应用体验相关推荐
- vue模仿网易云客户端
和小伙伴使用vue全家桶写了一个网易云客户端,目前实现了部分功能 代码地址: https://github.com/someoneoyl... 技术栈: vue + vue-router + vuex ...
- React Native 模仿网易云音乐手机客户端,兼容安卓和IOS两个平台
React Native 模仿网易云音乐手机客户端,兼容安卓和IOS两个平台. GitHub 完整源码地址https://github.com/yezihaohao/NeteaseCloudMusic ...
- 自定义QListWidget实现item被hover时改变图标样式(模仿网易云音乐选项列表)(方法二)
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
- 自定义QListWidget实现item被hover时改变图标样式(模仿网易云音乐选项列表)(方法一)
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
- VUE实战--网易云音乐
VUE实战–网易云音乐 知识点: 音乐的暂停播放. 歌词的动态匹配. 动态组件: 根据is 属性 后面的组件名匹配 <component :is="组件的名字">< ...
- VUE获取网易云音乐接口,并实现歌词滚动效果
VUE获取网易云音乐接口,并实现歌词滚动效果 最近在捣腾个人博客,加了个播放音乐的模块,所以在这里记录一下歌曲播放歌词实时滚动效果的实现,顺便总结加深一下对各个知识点的理解. GitHub地址 演示地 ...
- 中石化卖咖啡报:产品体验报告 | 网易云音乐,体验一个“社交+音乐+直播”的动听世界
本文来自CCTV5直播[www.cctv5zb.net]:原文地址 www.cctv5zb.net/Article/137532.html 转载注明来源 中石化卖咖啡 编辑导语:作为一名音乐爱好者,体 ...
- 基于Qt模仿网易云音乐播放器
基于Qt模仿网易云音乐界面,目前只实现了部分界面,后续继续完善改造. 部分代码: #ifndef MYSQLDATAMGR_H #define MYSQLDATAMGR_H#include <Q ...
- 模仿网易云音乐鲸云特效动效
JinyunEffect 项目地址:tyhjh/JinyunEffect 简介: 模仿网易云音乐鲸云特效动效 更多:作者 提 Bug 标签: # Android 粒子特效--网易云鲸云特效 文 ...
最新文章
- hdfs dfs的bash hdfs command not found解决方案
- 基于DGCNN和概率图的轻量级信息抽取模型
- C# 重绘tabControl,添加关闭按钮(续)
- OO第三次博客作业---透过代码看设计
- js将docx转换为html,js 将word转换Html
- UITableView:改变 TableHeaderView 的高度
- AI为癌细胞杀手“染色”,辅助医生选择治疗方案 | 附论文
- C++之move提升copy性能
- 使用Foobar2000在PC上播放.ios音乐
- 10个值得推荐的免费设计模板网站
- Delphi ArcEngine 创建梯度专题 Proportional
- H3C模拟器中文路径问题(提示:“当前系统用户名中包含非ASCII字符”! )方法尝试:
- 2008Noip解题报告
- 电脑数据没有了怎么恢复?笔记本电脑数据丢失怎样恢复
- 镜像电流源特点_镜像电流源电路.ppt
- 下位机和上位机通信 学习体会心得
- Flak-SQLAlcemy数据增删改查
- 理论物理极础4:质点系
- 56道java基础必“背“面试题(备战2022金三银四)
- 快乐星球计算机老师,《快乐星球Ⅴ》新电脑老师(上)
热门文章
- python第三方插件登录网易音乐_python3-使用requests模拟登录网易云音乐
- bootstrap项目实例_SpringCloud Config 使用Git的应用实例
- mysql图片路径varchar大小_Mysqlvarchar大小长度问题_MySQL
- python快速部署一个服务器_Python加Shell快速部署集群
- xcode 可以打开xmind_原来xmind还有一款如此漂亮的思维导图工具
- 【视频课】深度掌握模型剪枝+模型量化+知识蒸馏3大核心模型压缩技术理论!...
- 【NLP机器学习基础】从线性回归和Logistic回归开始
- 【图像分割模型】全景分割是什么?
- 中国城中村改造建设前景规划及投融资模式分析报告2022年版
- Go 函数,包(二)