阅读 10397

electron-vue模仿网易云桌面应用体验

简介

像官网说的那样,electron-vue就是基于 vue 来构造 electron 应用程序的样板代码。electron-vue开发起来就和vue一样,只是如果有特殊的需求需要修改应用的话就要用到electron相关的api,项目中的数据来自这里,感谢大佬的分享。项目地址git地址

electron

Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。(摘之官网)

vue

vue的话就不多提了,网站

预览

  • 18/11/05更新

  • 18/11/10更新

  • 18/11/12更新 播放页面暂时排版

  • 19/02/18 播放页重构

  • 19/02/19 页面重构,增加个人信息页

  • 19/02/20 一些优化,歌单详情页重构

项目流程

可以先去electron官网了解一下它的开发流程,知道它大体是个怎样的情况就好,后面使用的时候可以再来看看它的api.

搭建

npm install -g vue-cli  
vue init simulatedgreg/electron-vue ele-vue
cd ele-vue
npm install
npm run dev
复制代码

安装过程中一路回车就行,中途会有个让你选择插件的时候,也是为了后面自己手动去装,这里就根据需要选择。

electron-packager

如果你刚开始制作 electron 应用程序或只需要创建简单的可执行文件,那么 electron-packager 就可以满足你的需求。

electron-builder

如果你正在寻找完整的安装程序、自动更新的支持、使用 Travis CI 和 AppVeyor 的 CI 构建、或本机 node 模块的自动重建,那么你会需要 electron-builder。

还是根据自己的需要选择

这些完成以后就可以像开发vue一样去开发项目了。

插件方面

electron-vue中也是能使用前端的ui组件的,以element-ui为例

npm i element-ui -S
然后在main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

复制代码

electron

一点自己的配置
mainWindow = new BrowserWindow({
    height: 670,//窗口高度
    width: 1000,//窗口宽度
    frame: false,//是否显示窗口边框
    resizable: false,//可否缩放
    movable: false//可否移动
  })
//设置不可移动以后
单独在组件中在设置某个区域可移动,添加
  -webkit-app-region: drag;
//自定义边框以后使用
  //组件中
  const { ipcRenderer: ipc } = require("electron");

  <span @click="send('close')">×</span>
  
  send(type) {
      ipc.send(type);
  },

  // src/main/index.js

  import { app, BrowserWindow, ipcMain } from 'electron'
  ipcMain.on('min', e=> mainWindow.minimize());
  ipcMain.on('max', e=> mainWindow.maximize());
  ipcMain.on('close', e=> mainWindow.minimize());
复制代码

iconfont

element的icon可能并不能满足我们的需求,这时候可以选择使用阿里的iconfont。
先去iconfont官网选择你想要的icon,

选择添加到你自己的项目
然后可以在自己的项目中选择生成,复制代码到electron-vue项目的index.ejs中,正常引用css <link rel="stylesheet" href="//at.alicdn.com/t/font_883876_bfzwywhpal.css"> 使用<i class="iconfont icon-play-circle"></i>

scss全局引入

```
新建 src/renderer/globals.scss
$brand-primary: blue;

然后在 .electron-vue/webpack.renderer.config.js 里编辑 vue-loader 的配置
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/renderer/globals"',
scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./src/renderer/globals"',

最后修改
{
    test: /\.scss$/,
    use: ['vue-style-loader', 'css-loader', {
      loader: 'sass-loader',
      options: {
        data: '@import "./src/renderer/globals";'
      }
    }]
  },
别忘了";"
```
复制代码

打包

直接使用npm run build就可以打包,若是要针对不同平台则按需添加参数,打包后的安装包在项目的build文件夹下

最后

界面是两天开发出来的。。所以某些样式不太美观。有个问题是打包以后iconfont不显示了,这个问题后面再解决一下,最直接的办法还是把它下到本地引用。