簡(jiǎn)介
像官網(wǎng)說的那樣，electron-vue就是基于 vue 來構(gòu)造 electron 應(yīng)用程序的樣板代碼。electron-vue開發(fā)起來就和vue一樣，只是如果有特殊的需求需要修改應(yīng)用的話就要用到electron相關(guān)的api，項(xiàng)目中的數(shù)據(jù)來自這里，感謝大佬的分享。項(xiàng)目地址git地址
electron
Electron是由Github開發(fā)，用HTML，CSS和JavaScript來構(gòu)建跨平臺(tái)桌面應(yīng)用程序的一個(gè)開源庫(kù)。 Electron通過將Chromium和Node.js合并到同一個(gè)運(yùn)行時(shí)環(huán)境中，并將其打包為Mac，Windows和Linux系統(tǒng)下的應(yīng)用來實(shí)現(xiàn)這一目的。(摘之官網(wǎng))
vue
vue的話就不多提了，網(wǎng)站
預(yù)覽
-
18/11/05更新
image
項(xiàng)目流程
可以先去electron官網(wǎng)了解一下它的開發(fā)流程，知道它大體是個(gè)怎樣的情況就好，后面使用的時(shí)候可以再來看看它的api.
搭建
npm install -g vue-cli
vue init simulatedgreg/electron-vue ele-vue
cd ele-vue
npm install
npm run dev
安裝過程中一路回車就行，中途會(huì)有個(gè)讓你選擇插件的時(shí)候，也是為了后面自己手動(dòng)去裝，這里就根據(jù)需要選擇。
electron-packager
如果你剛開始制作 electron 應(yīng)用程序或只需要?jiǎng)?chuàng)建簡(jiǎn)單的可執(zhí)行文件，那么 electron-packager 就可以滿足你的需求。
electron-builder
如果你正在尋找完整的安裝程序、自動(dòng)更新的支持、使用 Travis CI 和 AppVeyor 的 CI 構(gòu)建、或本機(jī) node 模塊的自動(dòng)重建，那么你會(huì)需要 electron-builder。
還是根據(jù)自己的需要選擇
這些完成以后就可以像開發(fā)vue一樣去開發(fā)項(xiàng)目了。
插件方面
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
一點(diǎn)自己的配置
mainWindow = new BrowserWindow({
height: 670,//窗口高度
width: 1000,//窗口寬度
frame: true,//是否顯示窗口邊框
resizable: false,//可否縮放
movable: true//可否移動(dòng)
})
iconfont
element的icon可能并不能滿足我們的需求，這時(shí)候可以選擇使用阿里的iconfont。
先去iconfont官網(wǎng)選擇你想要的icon，
選擇添加到你自己的項(xiàng)目
然后可以在自己的項(xiàng)目中選擇生成，復(fù)制代碼到electron-vue項(xiàng)目的index.ejs中，正常引用css
<link rel="stylesheet" >使用
<i class="iconfont icon-play-circle"></i>打包
直接使用npm run build就可以打包，若是要針對(duì)不同平臺(tái)則按需添加參數(shù)，打包后的安裝包在項(xiàng)目的build文件夾下
最后
界面是兩天開發(fā)出來的。。所以某些樣式不太美觀。有個(gè)問題是打包以后iconfont不顯示了，這個(gè)問題后面再解決一下，最直接的辦法還是把它下到本地引用。
