像官網(wǎng)說的那樣，electron-vue就是基于 vue 來構造 electron 應用程序的樣板代碼。electron-vue開發(fā)起來就和vue一樣，只是如果有特殊的需求需要修改應用的話就要用到electron相關的api.

electron

Electron是由Github開發(fā)，用HTML，CSS和JavaScript來 構建跨平臺桌面應用程序 的一個開源庫。 Electron通過將Chromium和Node.js合并到同一個運行時環(huán)境中，并將其打包為Mac，Windows和Linux系統(tǒng)下的應用來實現(xiàn)這一目的。(摘之官網(wǎng))

vue

vue的話就不多提了，網(wǎng)站

預覽

項目流程

可以先去electron官網(wǎng)了解一下它的開發(fā)流程，知道它大體是個怎樣的情況就好，后面使用的時候可以再來看看它的api.

搭建

npminstall -g vue-cli vue init simulatedgreg/electron-vue ele-vuecd ele-vuenpm installnpmrun dev

安裝過程中一路回車就行，中途會有個讓你選擇插件的時候，也是為了后面自己手動去裝，這里就根據(jù)需要選擇。

electron-packager

如果你剛開始制作 electron 應用程序或只需要創(chuàng)建簡單的可執(zhí)行文件，那么 electron-packager 就可以滿足你的需求。

electron-builder

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

還是根據(jù)自己的需要選擇

這些完成以后就可以像開發(fā)vue一樣去開發(fā)項目了。

插件方面

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官網(wǎng)選擇你想要的icon，

選擇添加到你自己的項目

然后可以在自己的項目中選擇生成，復制代碼到electron-vue項目的index.ejs中，正常引用css <link rel="stylesheet" href="//at.alicdn.com/t/font_883876_bfzwywhpal.css"> 使用

打包

直接使用 npm run build 就可以打包，若是要針對不同平臺則按需添加參數(shù)，打包后的安裝包在項目的build文件夾下

最后

界面是兩天開發(fā)出來的。。所以某些樣式不太美觀。有個問題是打包以后iconfont不顯示了，這個問題后面再解決一下，最直接的辦法還是把它下到本地引用。

原文鏈接：https://www.jianshu.com/p/8cc...

總結

以上是生活随笔為你收集整理的electron-vue模仿网易云桌面应用体验的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。