开源下载:vue 仿网易云音乐,客户端实战
source link: http://mp.weixin.qq.com/s?__biz=MzA3MTUzOTcxOQ%3D%3D&%3Bmid=2452974399&%3Bidx=2&%3Bsn=e28d34de0e95dc18e017e2468d2eec6f
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上Web开发的低成本、高效率的优势,这种跨平台方式越来越受到开发者的喜爱。
以下是部分运行效果:
部分运行效果如下图。
环境搭建
创建Electron跨平台应用之前,需要先安装一些常用的工具,如Node、vue和Electron等。
注 意
文末有:3625页互联网大厂面试题
安装Node
安装/升级vue-cli
先执行以下命令,确认下本地安装的vue-cli版本。
如果没有安装或者不是最新版,可以执行以下命令安装/升级。
安装Electron
使用如下命令安装Electron插件。
为了验证是否安装成功,可以使用如下的命令。
创建运行项目
Electron官方提高了一个简单的项目,可以执行以下命令将项目克隆到本地。
然后在项目中执行如下命令即可启动项目。
启动后项目的效果如下图。
除此之外,我们可以使用vue-cli脚手架工具来创建项目。
然后根据下面的提示一步步选中选项即可创建项目,如下所示。
然后,使用npm install命令安装项目所需要的依赖包,安装完成之后,可以使用npm run dev或npm run build命令运行electron-vue模版应用程序,运行效果如下图所示。
Electron源码目录
Electron 的源代码主要依据 Chromium 的拆分约定被拆成了许多部分。为了更好地理解源代码,您可能需要了解一下 Chromium 的多进程架构。Electron源码目录结构和含义具体如下:
平时开发时,需要重点关注的就是src、package.json和appveyor.yml目录。除此之外,其他需要注意的目录如下:
应用工程目录
使用electron-vue模版创建的Electron工程结构如下图。
和前端工程的项目结构类似,Electron项目的目录结构如下所示:
对于开发者来说, 90% 的工作都是在 src 中完成,src 中的文件目录如下。
Electron应用程序分成三个基础模块:主进程、进程间通信和渲染进程。
【主进程】
Electron 运行 package.json 的 main 脚本(background.js)的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个 Electron 应用总是有且只有一个主进程。
【渲染进程】
【主进程与渲染进程通信】
src目录结构
在Electron目录中,src会包包含main和renderer两个目录。
main目录
main目录会包含index.js和index.dev.js两个文件。
-
index.js:应用程序的主文件,electron 也从这里启动的,它也被用作 webpack 产品构建的入口文件,所有的 main 进程工作都应该从这里开始。
-
index.dev.js:此文件专门用于开发阶段,因为它会安装 electron-debug 和 vue-devtools。一般不需要修改此文件,但它可以扩展开发的需求。
渲染进程
renderer是渲染进程目录,平时项目开发源码的存放目录,包含assets、components、router、store、App.vue和main.js。
-
router:如果你了解vue-router,那么Electron项目的路由的使用方式和vue-router的使用方式类似。
-
modules:electron-vue 利用 vuex 的模块结构创建多个数据存储,并保存在 src/renderer/store/modules 中。
综合示例
1,网易云音乐
electron-vue-cloud-music是一款使用Electron+Vue+Ant Design Vue技术开发跨平台桌面应用。
下载链接:
https://github.com/xiaozhu188/electron-vue-cloud-music
具有如下特点:
以下是部分运行效果:
2,qq音乐播放器
部分运行效果如下图。
阅读原文: 最新 3625页大厂面试题
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK