electron-vue模仿網易雲桌面應用體驗

Izaya發表於2018-11-02
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的話就不多提了，網站

預覽

electron-vue模仿網易雲桌面應用體驗

electron-vue模仿網易雲桌面應用體驗

electron-vue模仿網易雲桌面應用體驗

electron-vue模仿網易雲桌面應用體驗

  • 18/11/05更新

    electron-vue模仿網易雲桌面應用體驗

  • 18/11/10更新

    electron-vue模仿網易雲桌面應用體驗

  • 18/11/12更新 播放頁面暫時排版

    electron-vue模仿網易雲桌面應用體驗

electron-vue模仿網易雲桌面應用體驗

  • 19/02/18 播放頁重構

    electron-vue模仿網易雲桌面應用體驗

  • 19/02/19 頁面重構，增加個人資訊頁

    electron-vue模仿網易雲桌面應用體驗

  • 19/02/20 一些優化，歌單詳情頁重構

    electron-vue模仿網易雲桌面應用體驗

專案流程

可以先去electron官網瞭解一下它的開發流程，知道它大體是個怎樣的情況就好，後面使用的時候可以再來看看它的api.

搭建

npm install -g vue-cli  
vue init simulatedgreg/electron-vue ele-vue
cd ele-vue
npm install
npm run dev
複製程式碼

安裝過程中一路回車就行，中途會有個讓你選擇外掛的時候，也是為了後面自己手動去裝，這裡就根據需要選擇。

electron-vue模仿網易雲桌面應用體驗

electron-packager

如果你剛開始製作 electron 應用程式或只需要建立簡單的可執行檔案，那麼 electron-packager 就可以滿足你的需求。

electron-builder

如果你正在尋找完整的安裝程式、自動更新的支援、使用 Travis CI 和 AppVeyor 的 CI 構建、或本機 node 模組的自動重建，那麼你會需要 electron-builder。

還是根據自己的需要選擇

electron-vue模仿網易雲桌面應用體驗
這些完成以後就可以像開發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模仿網易雲桌面應用體驗
選擇新增到你自己的專案
electron-vue模仿網易雲桌面應用體驗
然後可以在自己的專案中選擇生成，複製程式碼到electron-vue專案的index.ejs中，正常引用css <link rel="stylesheet" href="//at.alicdn.com/t/font_883876_bfzwywhpal.css"> 使用<i class="iconfont icon-play-circle"></i>
electron-vue模仿網易雲桌面應用體驗

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

相關文章