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不顯示了，這個問題後面再解決一下，最直接的辦法仍是把它下到本地引用。